Angular-cli: CLI 1.5.0. Cannot read property 'annotation' of null

[ghost]

Bug Report or Feature Request (mark with an x)

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

Versions.

Angular CLI: 1.5.0
Node: 8.5.0
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

https://github.com/angular/angular-cli/issues/8316#issuecomment-341887729

The log given by the failure.

ERROR in TypeError: Cannot read property 'annotation' of null
    at CompileMetadataResolver.loadDirectiveMetadata (\node_modules\@angular\compiler\bundles\compiler.umd.js:14787:109)
    at \node_modules\@angular\compiler\bundles\compiler.umd.js:15073:54
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (\node_modules\@angular\compiler\bundles\compiler.umd.js:15072:41)
    at \node_modules\@angular\compiler\bundles\compiler.umd.js:29416:69
    at Array.forEach (<anonymous>)
    at \node_modules\@angular\compiler\bundles\compiler.umd.js:29415:35
    at Array.forEach (<anonymous>)
    at AotCompiler.loadFilesAsync (\node_modules\@angular\compiler\bundles\compiler.umd.js:29414:15)
    at \node_modules\@angular\compiler-cli\src\transformers\program.js:145:35
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Any clue?

[ghost]

I removed node_modules folder and reinstalled the packages with npm i and everything worked....

[ghost]

hmm... nope. The error is back again after several compilations.

[rsheptolut]

Got this too after upgrading angular from 4.4 to 5.0 and angular CLI to 1.5. The error message itself is what I have ussue with. How do I troubleshoot an issue with that kind of input? Had to narrow the source down by gradually removing stuff from the project.

Turned out to somehow be tied to this npm package I'm using: ng2-pdf-viewer. I used version 1.1.1 of it, but the latest 2.0.3 doesn't seem to fix this for me.

Happens when I just import { PdfViewerComponent } from "ng2-pdf-viewer"; and then add PdfViewerComponent to the declarations array of any Angular module in my project. Can prepare a sample project to reproduce this, if anyone's up for fixing the bug.

I guess the real root cause _may_ be in the ng2-pdf-viewer itself, but Angular CLI should make that error message a lot more friendly. Give me something to narrow it down. I have a lot of stuff in my project and narrowing the source of the problem down like this takes hours. Even when the npm package get fixed, I still could be trying to use and old version of it until I luck into updating it.

[jdvoges]

I am getting the same error but don't have ng2-pdf-viewer

This seems to be a related problem that I am having as well. It compiles but this is an error in Chrome

Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation. at syntaxError (compiler.js:466) at eval (compiler.js:15088) at Array.forEach (<anonymous>) at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15071) at JitCompiler._loadModules (compiler.js:33484) at JitCompiler._compileModuleAndComponents (compiler.js:33445) at JitCompiler.compileModuleAsync (compiler.js:33361) at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230) at PlatformRef.bootstrapModule (core.js:5443) at eval (webpack-internal:///../../../../../src/main.ts:13)

[mbx2015]

I have the same problem, And I think It's due to the AOT compiler metadata restrictions as defined here https://angular.io/guide/aot-compiler

[ghost]

I finally found a way to reproduce the issue.

1. Install the latest Angular CLI (1.5.0)
2. Create a new project:
   ng new bugTest -sc -sg -st && cd bugTest
3. Install ng2-validation:
   npm i --save ng2-validation
4. Replace contents of app.module.ts with

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { EmailValidator } from 'ng2-validation/dist/email';

@NgModule({
  declarations: [
    AppComponent,
    EmailValidator
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. Run ng serve --aot. First build will be successful
2. Edit any file to trigger compilation. That's where the error happens.

UPD: I copied code of EmailValidator to my project and used it directly instead of importing from ng2-validation plugin and everything worked perfectly. So I guess the error is somehow related to how ng2-validation plugin is compiled.

[jmls]

wait, I just got this error as well - but have no idea what component or module is creating it ... how do I begin to try and find out what it is ?

[ghost]

@jmls make sure you don't import components/directives/pipes/validators/etc directly from an npm module. Seems like you should not import anything besides NgbModule.

[krotscheck]

We just encountered a similar issue, the root cause of which was an invalid metadata.json file generated for files that effectively had no exports (such as namespaces with only consts, etc). The issue appears to have been fixed with this patch: https://github.com/angular/angular/issues/20479

[ghost]

@krotscheck the issue is not fixed. It is still reproducible https://github.com/angular/angular-cli/issues/8316#issuecomment-341887729. The error happens with plugins that don't even use Angular CLI.

There's no null in https://unpkg.com/[email protected]/dist/index.metadata.json

[subhashreeramanathan]

@krotscheck Am using Webpack with AOT. Initially it works like a charm. When changing some values in html or ts file it failed to compile and throws the below error.
[at-loader] Checking started in a separate process...

[at-loader] Ok, 0 sec. chunk {0} vendor.js, vendor.css, vendor.js.map, vendor.css.map (vendor) 3.51 MB {2} [initial]
chunk {1} app.js, app.js.map (app) 2.25 MB {0} [initial]
chunk {2} polyfills.js, polyfills.js.map (polyfills) 621 kB [entry]

ERROR in TypeError: Cannot read property 'annotation' of null
at CompileMetadataResolver.loadDirectiveMetadata (D:\Webpack AOTnode_modules\packages\compiler\esm5\src\metadata_resolver.js:328:50)
at D:\Webpack AOTnode_modules\packages\compiler\esm5\src\metadata_resolver.js:617:54
at Array.forEach ()
at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (D:\Webpack AOTnode_modules\packages\compiler\esm5\src\metadata_resolver.js:616:16)
at D:\Webpack AOTnode_modules\@angular\compiler\bundles\compiler.umd.js:30550:69
at Array.forEach ()
at D:\Webpack AOTnode_modules\packages\compiler\esm5\src\aot\compiler.js:235:7
at Array.forEach ()
at AotCompiler.loadFilesAsync (D:\Webpack AOTnode_modules\packages\compiler\esm5\src\aot\compiler.js:234:9)
at D:\Webpack AOT\packages\compiler-cli\src\transformers\program.ts:180:32
at
Child html-webpack-plugin for "index.html":
chunk {0} index.html 609 bytes [entry]
webpack: Failed to compile.

[krotscheck]

@subhashreeramanathan - Looking at the trace you have, it seems that the method "getNonNormalizedDirectiveMetadata" in the compiler returns null. Opening up the the esm5/compiler.js in node_modules, finding the method, and littering it with console.log statements will give you a better idea of what it's trying to read, and why it's returning null. Good luck tracking this one down!

@maxkorz 🤷‍♂️ Well, i did say "Similar", and this particular post of issues helped me track down the problem. In my case, the metadata wasn't even being generated properly. In your case, it could be that there's a type mismatch of some sort, maybe tracing through the code in the node module like I just suggested might help?

[melnikovic]

I had same issue with ng2-pdf-viewer , upgrade to version 3.0.5 fixed issue for me. Also new version has changed exports. So you will have to import module instead of component

import {PdfViewerModule} from 'ng2-pdf-viewer';
@NgModule({
    imports: [
        PdfViewerModule
    ]
})

[jmorganmartin]

Updating that this still exists with the latest releases:

Angular CLI: 1.7.0
Node: 8.9.4
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.6.2
webpack: 3.11.0

Fails on first rebuild:

** NG Live Development Server is listening on localhost:4202, open your browser on http://localhost:4202/ **
Date: 2018-02-16T23:46:46.903Z
Hash: e43f790bcd454aee18c1
Time: 33057ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 400 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 1.1 MB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 600 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 9.53 MB [initial] [rendered]

webpack: Compiled successfully.
webpack: Compiling...
Date: 2018-02-16T23:48:00.785Z - Hash: 635268d78c8e81d65f91 - Time: 2883ms
5 unchanged chunks

ERROR in TypeError: Cannot read property 'annotation' of null
    at CompileMetadataResolver.loadDirectiveMetadata (C:\Users\Morgan\Websites\rhc\node_modules\@angular\compiler\bundles\compiler.umd.js:14917:110)
    at C:\Users\Morgan\Websites\rhc\node_modules\@angular\compiler\bundles\compiler.umd.js:15208:54
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (C:\Users\Morgan\Websites\rhc\node_modules\@angular\compiler\bundles\compiler.umd.js:15207:41)
    at C:\Users\Morgan\Websites\rhc\node_modules\@angular\compiler\bundles\compiler.umd.js:30637:69
    at Array.forEach (<anonymous>)
    at C:\Users\Morgan\Websites\rhc\node_modules\@angular\compiler\bundles\compiler.umd.js:30636:35
    at Array.forEach (<anonymous>)
    at AotCompiler.loadFilesAsync (C:\Users\Morgan\Websites\rhc\node_modules\@angular\compiler\bundles\compiler.umd.js:30635:15)
    at C:\Users\Morgan\Websites\rhc\node_modules\@angular\compiler-cli\src\transformers\program.js:144:35
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.

[alan-agius4]

Closing as you shouldn't be doing deep imports and registering components, pipes etc from a library in the application's ngModule as described here https://github.com/angular/angular-cli/issues/8316#issuecomment-341887729