generator-angular2-library: Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation.

##Bug when linking a recently created library with a vanilla application generated with angular/cli

Stack Trace:

compiler.es5.js:1540 Uncaught Error: Unexpected value ‘[object Object]’ imported by the module ‘AppModule’. Please add a @NgModule annotation. at syntaxError (http://localhost:4200/vendor.bundle.js:5753:34) at http://localhost:4200/vendor.bundle.js:18707:44 at Array.forEach (native) at CompileMetadataResolver.webpackJsonp…/node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/vendor.bundle.js:18690:49) at JitCompiler.webpackJsonp…/node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.loadModules (http://localhost:4200/vendor.bundle.js:29843:66) at JitCompiler.webpackJsonp…/node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:29802:52) at JitCompiler.webpackJsonp…/node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:29764:23) at PlatformRef.webpackJsonp…/node_modules/@angular/core/@angular/core.es5.js.PlatformRef.bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:35662:25) at PlatformRef.webpackJsonp…/node_modules/@angular/core/@angular/core.es5.js.PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:35648:21) at Object…/src/main.ts (http://localhost:4200/main.bundle.js:20932:124)

OS: Ubuntu 16.04 x64 Dep Versions: Node - v6.10.2 Npm - 3.3.0 ng-cli - v1.1.0 @ angular/common: 4.1.3 @ angular/compiler: 4.1.3 @ angular/compiler-cli: 4.1.3 @ angular/core: 4.1.3 @ angular/platform-browser: 4.1.3 @ angular/platform-browser-dynamic: 4.1.3

Steps to reproduce:

yo angular2-library
cd <library folder>
npm link src/
cd ..

ng new sample-app
cd sample-app
npm link <library name>

place the folowing code in src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SampleModule } from '_<library name>_';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SampleModule.forRoot()
  ],
  exports: [
    SampleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Serve the application and open in browser

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (3 by maintainers)

Most upvoted comments

I had the same issue, found answer here: https://github.com/angular/angular-cli/wiki/stories-linked-library

You need to edit /src/tsconfig.app.json in your project (not library!) and add:

    "baseUrl": "",
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    },

into compilerOptions object.

+53

adjioev on Jun 2, 2017

This patch works for default ng 2 project (ng new foobar). If project was updated to work with webpack with the following tutorial: https://angular.io/docs/ts/latest/guide/webpack.html webpack.common.js needs be patched. Looks like webpack doesn’t pick up baseUrl and pathes props, so you need to add

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
...

  resolve: {
    ....
    plugins: [
      new TsConfigPathsPlugin({
        configFileName: helpers.root('src', 'tsconfig.json'),
        compiler: "typescript",
      })
    ]
  },

Of course make sure that /src/tsconfig.json has baseUrl path paths configured as it was described above.

I agree with @xxxtonixxx , this @angular-cli is nuts. In my package.json “@angular/cli”: “1.0.0” works. but “@angular/cli”: “^1.0.0”, or “@angular/cli”: “1.0.6” fails. It sits in devDependencies so why does it affect runtime?

adjioev on Jun 4, 2017

Uncaught Error: Unexpected value ‘[object Object]’ declared by the module ‘AppModule’ at syntaxError (compiler.js:215) at compiler.js:10508 at Array.forEach (<anonymous>) at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10506) at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:22567) at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548) at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:22508) at CompilerImpl.push…/node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143) at PlatformRef.push…/node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:4199) at Object…/src/main.ts (main.ts:11)

Facing this error I am a beginer too help me out friends Thanks in Advance I am using Anglar cli 6.0.1 verson

ramanansivagnanam on Jun 13, 2018

@daslaf I found that with the latest versions of angular cli (v1.3.0 and 1.3.1) that you must remove "paths": { "@angular/*": [ "../node_modules/@angular/*" ] }

from tsconfig.app.json. This is because the latest version of angular-cli uses the patched version of ngtools/webpack so the original issue that required the use of “paths” in the tsconfig.app.json is no longer necessary and I also found it had to be removed or angular-cli will error.

jpconsi on Aug 22, 2017

I agree with @xxxtonixxx , this @angular-cli is nuts. In my package.json “”: “1.0.0” works. but “”: “^1.0.0”, or “”: “1.0.6” fails. It sits in devDependencies so why does it affect runtime?

Can confirm this is happening for me too!

gotnull on Jun 4, 2017