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

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.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 7
  • Comments: 24 (2 by maintainers)

Most upvoted comments

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

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 }),

@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!

@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 😃

Someone pointed me to this PR, and I’m passing it along, because it solved the problem for me: https://github.com/angular/angular-cli/pull/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.

Looks like npm link caused the problem https://github.com/angular/angular/issues/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

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

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

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