Improve error message: `TypeError: Cannot read property 'type' of null`

[jorroll]

I'm submitting a...

[x] Feature request

Current behavior

If a custom library module, lets call it library-a, imports another custom library module, library-b, and the library-b module exports components/modules which are not also exported via typescript/javascript (i.e. library-b has @NgModule({exports: [...]}) but not export { ... }), then a very non-descriptive BUILD ERROR TypeError: Cannot read property 'type' of null is thrown with the following trace when performing ng build library-a.

BUILD ERROR
Cannot read property 'type' of null
TypeError: Cannot read property 'type' of null
    at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15378:27
    at Array.forEach (<anonymous>)
    at removeSummaryDuplicates (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15377:11)
    at TemplateParser.tryParseHtml (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14806:34)
    at TemplateParser.tryParse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14799:21)
    at TemplateParser.parse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14780:27)
    at AotCompiler._parseTemplate (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20483:43)
    at AotCompiler._createTypeCheckBlock (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20250:23)
    at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20220:27
    at Array.forEach (<anonymous>)

This made the problem very difficult to debug.

Expected behavior

Provide a better, more descriptive error message to aid in debugging.

Environment

Angular CLI: 6.0.5
Node: 8.9.1
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.5
@angular-devkit/build-angular      0.6.5
@angular-devkit/build-ng-packagr   0.6.5
@angular-devkit/build-optimizer    0.6.5
@angular-devkit/core               0.6.5
@angular-devkit/schematics         0.6.5
@angular/cdk                       6.1.0
@angular/cli                       6.0.5
@angular/material                  6.1.0
@angular/material-moment-adapter   6.1.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.5
@schematics/angular                0.6.5
@schematics/update                 0.6.5
ng-packagr                         3.0.0
rxjs                               6.2.0
typescript                         2.7.2
webpack                            4.8.3

[splincode]

Add repo for example and add about info for repro steps

[jorroll]

Cannot reproduce in new repo so closing. No longer sure what caused the original problem.

[GeorgeKnap]

getting this as well a lot. very difficult to find the actual problem.

[dherges]

I opened an issue on ng-packagr ng-packagr/ng-packagr#1087

[GeorgeKnap]

We've found the solution working for our project. Removing the components from the exports array in library-b's module and keeping them exported only in public_api.ts.

[dherges]

@GeorgeKnap Can you share some code? doesn't need to be the full code base, only the parts related to this issue

[GeorgeKnap]

@dherges
easy. Let's consider a setup as in original post above with library-a and library-b modules.

@NgModule({
  imports: [
    TranslateModule.forChild(),
    CommonModule,
    ReactiveFormsModule,
    TranslateModule,
    FlexLayoutModule,
    MatButtonModule,
    MatCheckboxModule,
    MatProgressSpinnerModule,
  ],
  declarations: [
    CustomButtonComponent,
    CustomHeaderButtonComponent,
    LoadingOverlayComponent,
    NoRowsOverlayComponent
  ],
  exports: [
    CommonModule,
    ReactiveFormsModule,
    TranslateModule,
    FlexLayoutModule,
   CustomButtonComponent, // <--
    CustomHeaderButtonComponent, // <--
    LoadingOverlayComponent, // <--
    NoRowsOverlayComponent // <--
  ],
  entryComponents: [
    LoadingOverlayComponent
  ],
  providers: [
    ConfigService,
    { provide: APP_INITIALIZER, multi: true, useFactory: configServiceInitializerFactory, deps: [ConfigService] }
  ],
})
export class LibraryBModule {}

if you import this module into library-a module you get the error while building library-a. But if you don't export the components (marked with <--) from the module the build will work.
And of course to be able to import them elsewhere you need to export them from the library public_api.ts barrel:

export * from './lib/components/ag-grid/cell/custom-button.component';
export * from './lib/components/ag-grid/header/custom-header-button.component';
export * from './lib/components/ag-grid/loading-overlay.component';
export * from './lib/components/ag-grid/no-rows-overlay.component';

[jorroll]

@GeorgeKnap nice detective work! I shutter to think how long this took you to pin down...I'm reopening the issue now that there's a reproduction.

[dherges]

But how can that be the cause of error?

There must be something in CustomButtonComponent, CustomHeaderButtonComponent (and so on) that cuases the build failure. Any error in the template validation?

[GeorgeKnap]

@dherges
No, the LibraryB always builds fine into --prod. If the problem was with the components the error would probably not go away because they are still declared in that module.

anyway if there really is problem, there is no way to tell what is it and where.