JIT mode only: Uncaught Error: Unexpected value imported by the module 'AppModule'. Please add a annotation.

[anjmao]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.3.0
node: 6.11.0
npm: 5.3.0
os: darwin x64
@angular/animations: 4.3.5
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.5
@angular/language-service: 4.3.5

Repro steps.

Repository https://github.com/ng-select/ng-select

git clone git@github.com:ng-select/ng-select.git
cd ng-select
npm install
npm run build // should output dist folder
cd integration
npm install // should install @ng-select/ng-select from dist folder
ng serve // will file at runtime
ng serve --prod // works fine

The log given by the failure.

Uncaught Error: Unexpected value 'NgSelectModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.es5.js:1690)
    at compiler.es5.js:15382
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26795)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26768)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/main.ts (main.ts:11)

Desired functionality.

I expect to serve linked local library without any errors as it works with -aot mode.

Mention any other details that might be useful.

I get this error only then I'm installig local library from dist folder and only with JIT mode. In package.json I have added "@ng-select/ng-select": "../dist/"

It works perfectly fine if I install library from npm repository. I tried to add paths to tsconfig as described here https://github.com/angular/angular-cli/wiki/stories-linked-library but it doesn't work for me. I would be very helpful if somebody can look at this issue, I thought something may be wrong with my code somewhere but I suppose everything should work fine in JIT mode if it is working in AOT mode :)

[ebtc]

I have the same issue over here and already mentioned it in another issue that seemed related.

It works in 1.2.7, but not in any of the 1.3.x versions (incl. the rc) and neither in the 1.4.0-beta0.

[anjmao]

I installed cli 1.2.7 as @ebtc mentioned but I'm still getting the same error.

Output from ng serve

Your global Angular CLI version (1.3.0) is greater than your local
version (1.2.7). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

[GooSP]

Same issue with JIT (build works but fails at runtime). AOT works fine.
I am using lerna to link my library with my app.

Used to work with:

• @angular/* 4.2.3
• @angular/cli: 1.1.2

But once upgraded to the following versions, it started to fail:

• @angular/* 4.3.5
• @angular/cli: 1.3.0

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

update: Its working with angular-cli 1.2.7

[mpalourdio]

Same error here when symlinking / npm-linking an external module from ng-cli 1.3.x. Fixing @angular-cli to ~1.2.0 instead of ^1.2.0 fixes the problem.

[bgotink]

A simple reproduction of this issue is available at bgotink/angular-cli-symlink-reproduction

As already mentioned above:

• this works fine in 1.2.x but not 1.3.x or 1.4.0-beta.1
• this works fine in AOT but not in JIT

@anjmao I think you're missing the paths in the compilerOptions. If I modify integration/tsconfig.json in your repository to match

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

it works with @angular/cli@1.2.x in JIT.

[anjmao]

Thanks @bgotink, after adding paths it started to work in JIT mode on @angular/cli@1.2.x

[ebtc]

@hansl did an update to the way paths get read: d1d2aa0. Has anyone gotten his modules to work with this? Any other solutions?
@filipesilva ... or this is unrelated to the original issue that brought d1d2aa0 about?

[mpalourdio]

After digging through issues, I just figured this one : #7137
As mentioned, I added --preserve-symlink to my ng serve command and I could successfully run my app with my external module symlinked !