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

Hi @jvandemo ,

I known this issue was raised before in #113 but looks like this problem is happened again in the latest Angular CLI. Below is the version I am using:

Node - 6.11.2 Npm - 5.3.0 Angular cli - 1.3.0

How to reproduce:

Generate the sample library using yo angular2-library
Build the library - npm run build
Link the library - npm link
Generate consumer app using angular cli - ng new testsample
Import the sample library - npm link samplelib
Import samplelib module in app.mddule.ts of consumer app
Change the content of src/tsconfig.app.json as mentioned in FAQ
Start the consumer app using ng serve

Below is the src/tsconfig.app.json content:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [],
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

I am not sure I missed any things else. I have a second environment which is working correctly: Node 6.10.0, Npm 5.3.0, Angular Cli 1.0.2.

Below is the screen shot of the error. Any clue? screen shot 2017-08-14 at 4 33 40 pm 1

Thanks.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 27 (6 by maintainers)

Most upvoted comments

When you npm link a library with peer dependencies, the consuming application will search for the peer dependencies in the library’s parent directories instead of the application’s parent directories.

Please try:

$ ng serve --preserve-symlinks

to make sure the consuming application searches for the peer dependencies in the application’s node_modules directory.

Can you let me know if that works?

Thanks!!

+10

jvandemo on Aug 14, 2017

@NetanelBasal , @daslaf

Actually the npm run build:watch and npm start are working as expected - when library code is changed the npm run build:watch will detect it and rebuild the codes. After that, npm start on the consumer application should refresh as well but there are few tricks:

Library application:

Build the library application to make sure there is no error - npm run build
Link the src directory of library application into global node modules - npm link src
Watch the code changes - npm run build:watch

Consumer application: *Assume you are using angular CLI

Create a new app - ng new myproject
Edit package.json and change this line: “start”: “ng serve” to “start”: “ng serve --poll 10000 --preserve-symlinks”.
Link the library - npm link libappname
Start the app using “npm start” instead of “ng serve”

Now both lib and consumer app are ready and will refresh if there are any code changes. Try to change some codes in lib, you should see the console is rebuilding instantly. After few seconds, consumer app will kick in by restarting the app and finally browser refresh. Whole process is fully automated. Hope this help.

quahkj on Aug 22, 2017

jvandemo on Aug 14, 2017

@NetanelBasal, @daslaf Playground is coming soon with #146 👍

jvandemo on Aug 31, 2017

@NetanelBasal Yes! It’s freaking annoying having to re-run ng serve each time something changes in the package

daslaf on Aug 22, 2017