Unexpected value 'MyCustomModule' imported by the module 'AppModule'

[rbaumi]

I am trying to migrate one of my angular2 custom library to 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. I bootstrap my 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 {
}

Now using the webpack I bundle my dev app.

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

export * from './lib/myCustomLib.module';
I found also hint on similar topic on github, but changing it to:

export { MyCustomModule } from './lib/myCustomLib.module';
did not help. I have also tried to import the module from src directory - same error. MyCustomModule should be ok as It was working fine with systemJS before.

myCustomLib.module.ts:

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

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

I have tried to debug it and in file ng_module_resolver.js I can see that it end with:

ng_module_resolver.js:30
Uncaught Error: No NgModule metadata found for 'MyCustomModule'

Any idea what can be the reason of this error? I have seen similar topics here but no answer or hint helped.

[pkozlowski-opensource]

Hard to say for sure but it looks like metadata from decorators are lost during transpilation. Not sure why you are trying to use both TS and Babel. If you need help setting your WebPack build you might have a look at the minimal seed project (https://github.com/angular/angular2-seed), try out CLI, consult https://angular.io/docs/ts/latest/guide/webpack.html or use on of the popular starter kits.

In any case this is a support question so doesn't belong here. Try one of the support channels instead: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

[lw0110]

Similar issue here.. @pkozlowski-opensource , really do not think above is useful suggestion...

[pkozlowski-opensource]

really do not think above is useful suggestion

What other suggestion would you expect given that we've got no way of reproducing similar issues locally. I would love to help but there are just so many possible setups and its variants that it is next to impossible to suggest anything without debugging your local setup...

[rbaumi]

@lw0110: @pkozlowski-opensource sugestion was right. I used seed project (https://github.com/angular/angular2-seed) to create my library and after compilation everything is working ok... I'm not sure yet what is an exact problem but this issue does not belong here.

[moff]

@rbaumi what version of Webpack you were using when you got the error?

[rbaumi]

@moff: that time it was 2.1.0-beta.22.

[moff]

@rbaumi I've got a feedback describing the same issue in one of my repos. According to it it's clear that this problem appeared only after update to RC6 while using Webpack 2. I use Webpack 1 and I don't have that problem - works good.

That's why I think that it has something to do with proper Webpack 2 configuration when using RC6.

You wrote that you succeeded with angular2-seed - it uses Webpack 1, not 2nd version.

I know that my post is not helping, but unfortunately I haven't found the solution for that so far.

If someone will find it - please share!

[Avien]

I'm also having the same issue right now
Not just for a 'customModule' but also for another service imported from a shared project which uses http and throws http provider error although I am importing the HttpModule properly

[moff]

@Avien I haven't found solution for that so I just use Webpack 1 for now.

[Avien]

I also use Webpack 1 and I do have this problem
How is it related to Webpack version?

angular2-seed does not use Webpack but gulp

[moff]

@Avien I don't see Gulp in angular2-seed, but I see Webpack 1.12.9.

I don't know why I get this error when I use Webpack 2, but I don't have that issue when I use Webpack 1.

[Avien]

Yeah sorry I was looking at https://github.com/mgechev/angular2-seed