web-dev-qa-db-ja.com

モジュール「AppModule」によってインポートされた予期しない値「MyCustomModule」

Angular2カスタムライブラリの1つを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フォルダー内でアプリを実行してみてください。 I bootstrap=私のモジュール：

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';

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 {}

このエラーの原因は何ですか？私はここで同様のトピックを見ましたが、答えもヒントも助けになりませんでした。

Edit：例をより簡単にするために、MyCustomModuleからすべて削除しました-同じ問題...

angularwebpackangular2-modules
26
Baumi

Libフォルダーを モジュールを解決するためのwebpack構成 に追加します。パスは、webpack構成ファイルの場所に相対する必要があります。

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

myCustomModuleはsrc/appフォルダー内にある必要があります。これは、コンパイラーがsrcフォルダー内のすべてのファイルをコンパイルするため、コンパイラーによって認識されないため、モジュールを認識しないためです。

0
Rajat Gupta

myCustomLib.js、エクスポートする前にインポートを試みます

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

export MyCustomModule;
0
Ionut Achim