Question

我正在尝试使用absolute path在angular 2中实施webpack 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 {}

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，它会起作用。

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

1 个答案: