[英]Unexpected value 'MyCustomModule' imported by the module 'AppModule'
I am trying to migrate one of my angular2 custom library to RC.6 + Webpack. 我正在尝试将我的angular2自定义库之一迁移到RC.6 + Webpack。 My directory structure is:
我的目录结构是:
- 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
Within dev
folder try to run an app. 在
dev
文件夹中尝试运行应用程序。 I bootstrap my module: 我引导我的模块:
app.module.ts 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 {
}
Now using the webpack I bundle my dev app. 现在使用webpack我捆绑了我的开发应用程序。
webpack.config.js 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
};
But when I try to load the app I get a message: 但是当我尝试加载应用程序时,我收到一条消息:
metadata_resolver.js:230
Uncaught Error: Unexpected value 'MyCustomModule' imported by the module 'AppModule'
My barrel file I import looks like: 我导入的桶文件看起来像:
myCustomLib.js myCustomLib.js
export * from './lib/myCustomLib.module';
I found also hint on similar topic on github , but changing it to: 我在github上发现了类似主题的提示 ,但是将其更改为:
export { MyCustomModule } from './lib/myCustomLib.module';
did not help. 没有帮助。 I have also tried to import the module from
src
directory - same error. 我也尝试从
src
目录导入模块 - 同样的错误。 MyCustomModule should be ok as It was working fine with systemJS before. MyCustomModule应该没问题,因为之前它与systemJS工作正常。
myCustomLib.module.ts: myCustomLib.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [
BrowserModule
]
})
export class MyCustomModule {}
Any idea what can be the reason of this error? 知道这个错误的原因是什么? I have seen similar topics here but no answer or hint helped.
我在这里看过类似的主题,但没有回答或暗示有帮助。
Edit : To make the example even simpler I have removed all from MyCustomModule - same problem... 编辑 :为了使示例更简单我已从MyCustomModule中删除所有 - 同样的问题...
Add the lib folder to your webpack configuration for resolving modules .The path should be relative to the location of the webpack config file. 将lib文件夹添加到webpack配置中以解析模块 。路径应该相对于webpack配置文件的位置。
resolve: {
modules: ['node_modules','lib']
in myCustomLib.js
, try to import before exporting 在
myCustomLib.js
,尝试在导出之前导入
import { MyCustomModule } from './lib/myCustomLib.module;
export MyCustomModule;
你的MyCustomModule应该在src / app文件夹中,因为编译器无法识别它,因为编译器会编译src文件夹中的所有文件,这就是为什么它不能识别你的模块
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.