Error: “Unexpected value 'undefined' imported by the module 'AppModule'” when importing Angular2 (RC6) module built by webpack

[ogix]

I'm submitting a bug report

Webpack version:
1.10.x/2.x

Please tell us about your environment:
Windows 10

Current behavior:
I am getting runtime error “Unexpected value 'undefined' imported by the module 'AppModule'” when importing Angular2 (RC6) module built by webpack. If I build using tsc command then there is no error.

my webpack.config.js:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: './index.ts',
    output: {
        path: './dist',
        filename: 'index.js'
    },
    resolve: {
      root: [ path.join(__dirname, 'src') ],
      extensions: ['', '.ts', '.js']
    },
    module: {
        loaders: [
          { test: /\.ts$/, loaders: ['awesome-typescript-loader'] },
          { test: /\.(html|css)$/, loader: 'raw-loader' }
        ]
    }
}

Expected/desired behavior:
No error

[bebraw]

Can you provide a standalone repo? Thanks!

[ogix]

Here you are: https://github.com/ogix/ng2-fancy-image-uploader/tree/v1.0.2
I have published to npm: https://www.npmjs.com/package/ng2-fancy-image-uploader and I get this error when importing as in the example

[ogix]

I am starting to think that webpack in general does not support referencing dependencies that were already built using webpack. Or am I wrong?

EDIT:

If I specify option: libraryTarget: 'umd' then I get a slightly different error: Unexpected value 'FancyImageUploaderModule' imported by the module 'AppModule'.

[sokra]

see #2945

[Choleriker]

Guys, there is another simple solution for this. I have 2 modules which are somehow deep in the structure using each other. I ran into the same problem with circular dependencies with webpack and angular 2. I simply changed the way of how the one module is declared:

....

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        require('../navigation/navigation.module')
    ],
    declarations: COMPONENTS,
    exports: COMPONENTS
})
class DppIncludeModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DppIncludeModule
        };
    }
}

export = DppIncludeModule;

When I now using the imports statement on ngModule attribute I simply use:

@NgModule({
    imports: [
        CommonModule,
        ServicesModule.forRoot(),
        NouisliderModule,
        FormsModule,
        ChartModule,
        DppAccordeonModule,
        PipesModule,
        require('../../../unbranded/include/include.module')
    ],
....

With this all problems are away.

[ghost]

Can this somehow tell me WHICH module is causing the circular dependency?

[liambayly]

if you guys don't have it installed try setting up madge , it will help with circular dependencies,

[JeSuisAlrick]

@Choleriker it probably better you never posted in the first place. You did not explain what you did, dude.