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

[Avien]

Looks like npm link caused the problem #11639
When I install the repo I am trying to import via npm git+ssh it works!
The problem now is that the workflow is harder without npm link

[IAMtheIAM]

I'm getting the error also. Cannot import a custom module into the imports section of @NgModule without getting Unexpected value 'ButtonsModule' imported by the module 'AppModule' at

import { ButtonsModule } from '@progress/kendo-angular-buttons';
...
  imports: [ // import other modules
      ButtonsModule, GridModule, BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(ROUTES, { useHash: true }),

[Madd0g]

Someone pointed me to this PR, and I'm passing it along, because it solved the problem for me: angular/angular-cli#2291

in webpack config:

resolve: { 
     modules: [ path.join(__dirname, "node_modules") ] 
}

I see in the config above that it's only "node_modules". It seems that it only works if it's a full path.

[serhiisol]

@Madd0g it has to be with projectRoot:

resolve: { 
     modules: [ path.join(projectRoot, "node_modules") ] 
}

cause your node_modules won't be available from __dirname, __dirname points to webpack.config folder

PS: but if you have custom webpack compilation process, than probably __dirname will work :)

[Madd0g]

it works in my setup, but the important thing is, have the full path to node_modules there.

[waratah]

I copied and pasted my module include:
import { ModalModule, TabsModule } from 'ng2-bootstrap/ng2-bootstrap';

and this error disappeared. It appears that case does have a major impact here.

[gorshkov-leonid]

I have same problem, but it is appeared with AotPlugin only. When I built debug version via awesome-typescript-loader I've got success. But I want AotPlugin

[gorshkov-leonid]

So many closed issues and I not found solution. It is very bad. Angular is bearded dinosaur.... Tricks here and there....

[zeeshananjumjunaidi]

open app.component.ts file and import your customModule (e.g. Test_Provider).

import { Test_Provider } from './Test Provider';

and in the component section add it to providers array.

@component({
templateUrl: 'app.html',
providers:[Test_Provider]
})

[Jaldeep]

I am unable to resolve the issue, tried all the above steps mentioned. do we have any suggestion @Madd0g @zeeshananjumjunaidi @gorshkov-leonid

[ds82]

I had the same issue and finally found it .. my module imported a dependency that again imported reflect-metadata. Despite the fact that I added reflect-metadata to the paths option of tsconfig.json it seems that the dependency loaded its own reflect-metadata what caused the issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}