使用絕對路徑的webpack的Angular 2導入模塊

我正在嘗試使用webpack 2來實現absolute path的angular 2。使用絕對路徑的webpack的Angular 2導入模塊

我看過這個article，它展示瞭如何使用絕對路徑。

我的文件夾結構爲：

|-resources 
    |-assets 
     |-Typescript 
     |-main.ts 
     |-App 
      |-app.module.ts 
|-Modules 
    |-Core 
     |-Assets 
     |-Typescript 
      |-core.module.ts 
    |-Cart 
     |-Assets 
     |-Typescript 
      |-cart.module.ts

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { AppModule } from './App/AppModule'; 
if (process.env.ENV === 'production') { 
    enableProdMode(); 
} 
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { CoreModule } from '../../../../Modules/Core/Assets/Typescript/core.module'; 
import { CartModule } from '../../../../Modules/Cart/Assets/Typescript/cart.module'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     CoreModule, 
     CartModule 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule {}

w^ebpack.common.js由解析配置的

resolve: { 
      extensions: ['.ts', '.js'], 
      modules: [helpers.root('./resources/assets/Typescript'), helpers.root('./Modules'),'node_modules'], 
     },

helpers.js

var path = require('path'); 
var _root = path.resolve(__dirname, '..'); 

function root(args) { 
    args = Array.prototype.slice.call(arguments, 0); 
    return path.join.apply(path, [_root].concat(args)); 
} 

exports.root = root;

當我嘗試使用模塊/核心/資產/打字稿/ core.module的應用程序。 module.ts我得到：

ERROR in [default] C:\xampp\htdocs\project\resources\assets\Typescript\App\AppModule.ts:3:27 
Cannot find module 'Modules/Core/Assets/Typescript/core.module'.

我怎麼能實現absolute path in the custom directory？ 在node_modules中添加Modules目錄會爲我提供正確的導入目錄路徑，但這不是我們所希望的。

來源

2016-11-21 PaladiN

有一個相關的討論，它修改了WebPack配置後突出了TypeScript配置的一些問題 - https://github.com/AngularClass/angular-starter/issues/1439 –

我找到了解決方案，但它不是進口的好方法。

在webpack.config.js添加根目錄下的模塊分解

resolve: { 
      extensions: ['.ts', '.js'], 
      modules: [helpers.root('./resources/assets/Typescript'), helpers.root('./Modules'),'node_modules'], 
     },

在app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './Components/AppComponent'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     require('Core/Assets/Typescript/Core/CoreModule').CoreModule, 
     require('Category/Assets/Typescript/Category/CategoryModule').CategoryModule 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AdminModule {}

主要的是隻增加了root directory從你想要使用路徑的地方開始工作。

來源

2016-11-23 08:20:32 PaladiN

使用絕對路徑的webpack的Angular 2導入模塊

回答

相關問題