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

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

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.

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.

@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 AOT\node_modules\packages\compiler\esm5\src\metadata_resolver.js:328:50) at D:\Webpack AOT\node_modules\packages\compiler\esm5\src\metadata_resolver.js:617:54 at Array.forEach (<anonymous>) at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (D:\Webpack AOT\node_modules\packages\compiler\esm5\src\metadata_resolver.js:616:16) at D:\Webpack AOT\node_modules@angular\compiler\bundles\compiler.umd.js:30550:69 at Array.forEach (<anonymous>) at D:\Webpack AOT\node_modules\packages\compiler\esm5\src\aot\compiler.js:235:7 at Array.forEach (<anonymous>) at AotCompiler.loadFilesAsync (D:\Webpack AOT\node_modules\packages\compiler\esm5\src\aot\compiler.js:234:9) at D:\Webpack AOT\packages\compiler-cli\src\transformers\program.ts:180:32 at <anonymous> Child html-webpack-plugin for “index.html”: chunk {0} index.html 609 bytes [entry] webpack: Failed to compile.

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