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

Question

我正在尝试使用 webpack 2 在 angular 2 中实现 absolute path。

我看过这个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 {}

webpack.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;

当我尝试在 app.module.ts 中使用 Modules/Core/Assets/Typescript/core.module 时，我得到：

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 目录为我提供了正确的导入目录路径 但这不是我们都想做的事情。

Answer 1

我找到了解决方案，但这不是导入的好方法。

将根目录添加到 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，它将起作用。

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

Angular 2 import modules using absolute path with webpack

angularjs

webpack-2

angular