27

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

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

Edit: To make the example even simpler I have removed all from MyCustomModule - same problem...

Rohan Fating
  • 2,045
  • 12
  • 23
Baumi
  • 1,647
  • 1
  • 15
  • 28
  • 1
    Can it be that one of your MyCustomComponent are declared in AppComponent ? I'm also getting this kind of message when one Component is referenced twice – Patrice Sep 08 '16 at 08:59
  • 1
    Nope. I have just double checked that. the only thing I import is MyCustomModule. All other have even unique names so it's not that. – Baumi Sep 08 '16 at 09:09
  • 3
    Facing the same issue right now, did you find a solution ? – RVandersteen Sep 23 '16 at 08:55
  • Problem in my opinion is related to the webpack v2. Moving to webpack 1.13.2 solves the issue. Take a look also at this discussion: https://github.com/angular/angular/issues/11438 – Baumi Sep 23 '16 at 08:59
  • @Baumi, did you manage to solve it? – vlio20 Oct 23 '16 at 20:21
  • @vlio20 - take a look at my comment just above yours. – Baumi Oct 24 '16 at 07:03
  • I am getting these as well, yet in core/2.1.2. It seems to be to be related to order of or multiple exports in company of @DeCorator - reFactoring out multiple exports has solved this error for me. – CNSKnight Nov 03 '16 at 21:54
  • is your `myCustomLib.js` an external (npm?) module or it is a part of your application – Atais Nov 30 '16 at 15:17
  • In that case my `myCustomLib.js` was my application that I wanted to publish to npm. – Baumi Dec 02 '16 at 12:43
  • As far as I remember, because `MyCustomModule` is a module on its own, you should use a non relative import, `import { MyCustomModule } from "myCustomLib"`, and perhaps adjust your `resolve.modules` – Poul Kruijt Dec 08 '16 at 09:49
  • I think it's the files extension problem, why is it .js ? shouldn't it be .ts ? because if it's not .ts , awesome-typescript-loader won't transpile it – Milad Dec 24 '16 at 12:08
  • why not importing the module directly ? – Ced Jan 04 '17 at 21:08
  • Could not reproduce problem with latest version of angular 2 webpack starter. Maybe worth a try to start from there? – Karl Jan 08 '17 at 10:21
  • Since you're not specifically excluding *.d.ts files in the webpack loader. It might pick this up? – therebelcoder May 15 '17 at 16:36
  • 1
    you should make a demo repo to reproduce the issue, then helpers can find ways to solve it. – e-cloud Jul 12 '17 at 04:53

3 Answers3

1

Add the lib folder to your webpack configuration for resolving modules.The path should be relative to the location of the webpack config file. 

resolve: {
   modules: ['node_modules','lib']
Nathan Tuggy
  • 2,239
  • 27
  • 28
  • 36
LT56
  • 167
  • 5
0

in myCustomLib.js, try to import before exporting

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

export MyCustomModule;
Ionut Achim
  • 790
  • 4
  • 8
0

your MyCustomModule should be inside the src/app folder as it is not recognised by compiler because compiler, compiles all the files in the src folder ,thats why it is not recognising your module

Rajat Gupta
  • 1,531
  • 1
  • 5
  • 17