模块“AppModule”导入的意外值“MyCustomModule”答案

【问题标题】：Unexpected value 'MyCustomModule' imported by the module 'AppModule'模块“AppModule”导入的意外值“MyCustomModule”
【发布时间】：2017-01-16 01:08:02
【问题描述】：

我正在尝试将我的 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 中删除了所有内容 - 同样的问题...

【问题讨论】：

你的 MyCustomComponent 之一是在 AppComponent 中声明的吗？当一个组件被引用两次时，我也会收到这种消息
不。我刚刚仔细检查过。我唯一导入的是 MyCustomModule。所有其他人甚至都有唯一的名称，所以不是那样的。
现在遇到同样的问题，你找到解决办法了吗？
在我看来问题与 webpack v2 有关。迁移到 webpack 1.13.2 解决了这个问题。也看看这个讨论：github.com/angular/angular/issues/11438
你应该做一个demo repo来重现这个问题，然后帮助者可以找到解决它的方法。

标签： angular webpack angular2-modules

【解决方案1】：

在myCustomLib.js，先导入再导出

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

export MyCustomModule;

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您的 MyCustomModule 应该在 src/app 文件夹中，因为编译器无法识别它，因为编译器会编译 src 文件夹中的所有文件，这就是它无法识别您的模块的原因

【讨论】：