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

[quahkj]

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:

1. Generate the sample library using yo angular2-library
2. Build the library - npm run build
3. Link the library - npm link
4. Generate consumer app using angular cli - ng new testsample
5. Import the sample library - npm link samplelib
6. Import samplelib module in app.mddule.ts of consumer app
7. Change the content of src/tsconfig.app.json as mentioned in FAQ
8. 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?

Thanks.

[daslaf]

I can confirm this is also happening to me

[saberhamidi]

Same happening to me also after i updated Angular CLI

[NetanelBasal]

+1

[leahcnels]

+1
had to downgrade to angular/cli @1.2.7

[jvandemo]

Thank you for reporting.

Related issue: angular/angular-cli#7384. If anyone knows what aspect of Angular CLI 1.3 is causing it, please let me know.

Meanwhile, I will see if I can pinpoint the issue 👍

[saberhamidi]

if you can please come with a solution it will make my day. This error seems to be affecting a lot of people

[jvandemo]

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!!

[jvandemo]

Related article: http://codetunnel.io/you-can-finally-npm-link-packages-that-contain-peer-dependencies.

[saberhamidi]

I even run "ng serve --preserve-symlinks" and the problem still not solved.

before it was working well, however when I updated my Angular CLI from 1.1.1 to version 1.3.0 and tried to run the application, I encountered that error in my browser console. but when running 'ng serve' the application compiles successfully, however, the browser throws that error.

https://github.com/saberhamidi/Cloud7Shisha

the above link is my project in github, if you can please clone it and run it yourself, and see what is really happening. make sure you run it with Angular CLI version 1.3.0, and please let me know if you find the cause of it.

thanks @jvandemo

[quahkj]

Good news! The --preserve-symlinks option is worked for both ng serve and ng builld. Now the error is gone and it works as expected.

I found the below configuration is no longer required as well:

{
  "compilerOptions": {
    // ...
    // Note: these paths are relative to `baseUrl` path.
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  }
}

Thanks a lot @jvandemo and I appreciate that.

[saberhamidi]

glad that it worked for you, but i am still struggling :(,

[NetanelBasal]

Yes, it works. I think we should add this to the documentation.

[osahner]

worked for me too.

[jvandemo]

@quahkj; @NetanelBasal, @osahner — Thank you for the confirmations, much appreciated! 👍

@saberhamidi — Is it possible to share your code so we can help you figure out what could be wrong? It could also be structure related, see angular/angular-cli#7384. Thanks!

[saberhamidi]

@quahkj I have included a github link of my project on my previous comment if you scroll up please, you can use it to download my code and try it yourself.

[saberhamidi]

i spend the whole day yesterday trying to find the cause of that error, but failed :(

[quahkj]

@saberhamidi - I suggest you create a new sample library project and a new angular cli project in your existing environment and try it out. Make sure it is worked in your environment first - just isolate any env related issue.

[shanthece]

I can confirm this exactly happening to me

[jvandemo]

@shanthece — Can you try:

$ ng serve --preserve-symlinks

to see if that fixes your problem?

[NetanelBasal]

Try to update the @angular/cli and generate a new project, this is what fix my problem.

[NetanelBasal]

The frustrating thing is that there is no automatic refresh even with build:watch.

[daslaf]

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

[quahkj]

@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:

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

Consumer application:
*Assume you are using angular CLI

1. Create a new app - ng new myproject
2. Edit package.json and change this line: "start": "ng serve" to "start": "ng serve --poll 10000 --preserve-symlinks".
3. Link the library - npm link libappname
4. 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.

[NetanelBasal]

OK, thanks, we will check it out. By the way, this thread needs to be added to the README file.

[jvandemo]

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

[Janatbek]

In my case my consuming app brakes when it tries to bring css and js from assets of library.
Everything works. Library in watch mode, consuming app detects changes. But, it fails on assets. Can someone tell me workarounds?

[tarunlv]

I had the same problem from last 2 days.
You just have to upgrade/downgrade your @angular/cli to @angular/cli@1.2.7
run{ npm install @angular/cli@1.2.7 }