使用绝对路径的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目录会为我提供正确的导入目录路径，但这不是我们所希望的。

有一个相关的讨论，它修改了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从你想要使用路径的地方开始工作。

使用绝对路径的webpack的Angular 2导入模块

相关推荐