question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:19 (3 by maintainers)

github_iconTop GitHub Comments

53reactions
adjioevcommented, Jun 2, 2017

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.

6reactions
adjioevcommented, Jun 4, 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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unexpected value ' ' imported by the module ' '. Please add a ...
It means it doesn't recognise it as a module. Try this: import {HttpClientModule} from '@angular/common/http';.
Read more >
Uncaught Error: Unexpected value '[object Object]' imported ...
Uncaught Error : Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation. #170.
Read more >
Javascript – Unexpected value '…' imported by the module ...
imported by the module 'AppModule'. Please add a @NgModule annotation. I've tried: Clearing my npm cache; Re-installing all node modules; Forcing all Angular ......
Read more >
Unexpected value 'undefined' imported by the module ...
Coding example for the question Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError-angular.js.
Read more >
Error message Is it missing @NgModule annotation? NG6002
Angular. Error message Is it missing @ NgModule annotation ? NG6002: Appears NgModule. imports AppModule Angular. 11K views 1 year ago.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found