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

[adjioev]

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.

[adjioev]

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?