web-dev-qa-db-fra.com

Valeur inattendue 'MyCustomModule' importée par le module 'AppModule'

J'essaie de migrer l'une de mes bibliothèques personnalisées angular2 vers RC.6 + Webpack. Ma structure de répertoire est:

- 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

Dans le dossier dev, essayez d’exécuter une application. J'amorce mon module:

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

Maintenant, en utilisant le pack Web, je fournis mon application de développement. 

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

Mais lorsque j'essaie de charger l'application, je reçois un message:

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

Mon fichier de baril que j'importe ressemble à:

myCustomLib.js

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

J'ai également trouvé un indice sur un sujet similaire sur github , mais en le changeant en:

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

n'a pas aidé. J'ai également essayé d'importer le module à partir du répertoire src - même erreur. MyCustomModule devrait être ok car cela fonctionnait bien avec systemJS auparavant.

myCustomLib.module.ts:

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

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

Une idée de ce qui peut être la raison de cette erreur? J'ai vu des sujets similaires ici mais aucune réponse ou indice n'a aidé.

Edit: Pour simplifier davantage l'exemple, j'ai tout supprimé de MyCustomModule - même problème ... 

angularwebpackangular2-modules
25
Baumi

Ajoutez le dossier lib à votre configuration webpack pour résoudre les modules . Le chemin doit être relatif à l’emplacement du fichier de configuration webpack. 

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

votre MyCustomModule doit être dans le dossier src/app car il n'est pas reconnu par le compilateur, car le compilateur compile tous les fichiers du dossier src, c'est pourquoi il ne reconnaît pas votre module 

0
Rajat Gupta

dans myCustomLib.js, essayez d'importer avant d'exporter

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

export MyCustomModule;
0
Ionut Achim