模块'AppModule'

时间:2016-09-08 07:40:32

标签: angular webpack angular2-modules

我正在尝试将我的angular2自定义库之一迁移到RC.6 + Webpack。我的目录结构是:

- src - source TS files
- lib - transpiled JS files + definition files
- dev - development app to test if it works / looks ok.
- myCustomLib.js - barrel
- myCustomLib.d.ts

dev文件夹中尝试运行应用。我引导我的模块:

app.module.ts

import { BrowserModule }                from "@angular/platform-browser";
import { NgModule }                     from "@angular/core";
import { AppComponent }                 from "./app.component";
import { MyCustomModule }               from "../../myCustomLib";

@NgModule({
    imports: [
        BrowserModule,
        MyCustomModule
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

现在使用webpack我捆绑了我的开发应用程序。

webpack.config.js

module.exports = {
    entry: "./app/boot",
    output: {
        path: __dirname,
        filename: "./bundle.js",
    },
    resolve: {
        extensions: ['', '.js', '.ts'],
        modules: [
            'node_modules'
        ]
    },
    devtool: 'source-map',
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }, {
            test: /\.ts$/,
            loader: 'awesome-typescript-loader',
            exclude: /node_modules/
        }]
    },
    watch: true
};

但是当我尝试加载应用时,我收到了一条消息:

metadata_resolver.js:230
Uncaught Error: Unexpected value 'MyCustomModule' imported by the module 'AppModule'

我导入的桶文件看起来像:

myCustomLib.js

export * from './lib/myCustomLib.module';

我还发现hint on similar topic on github,但将其更改为:

export { MyCustomModule } from './lib/myCustomLib.module';

没有帮助。我还尝试从src目录导入模块 - 同样的错误。 MyCustomModule应该没问题,因为之前它与systemJS一起工作正常。

myCustomLib.module.ts:

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

@NgModule({
    imports: [
        BrowserModule
    ]
})
export class MyCustomModule {}

知道这个错误的原因是什么?我在这里看过类似的主题,但没有回答或暗示有帮助。

编辑:为了让示例更简单,我已将所有内容从MyCustomModule中移除 - 同样的问题......

3 个答案:

答案 0 :(得分:1)

将lib文件夹添加到webpack configuration for resolving modules。路径应该相对于webpack配置文件的位置。

resolve: {
   modules: ['node_modules','lib']

答案 1 :(得分:0)

<{1>}中的

,尝试在导出

之前导入
myCustomLib.js

答案 2 :(得分:0)

你的MyCustomModule应该在src / app文件夹中,因为编译器无法识别它,因为编译器会编译src文件夹中的所有文件,这就是为什么它不能识别你的模块