angularangular-aot

Angular library build error: TypeError: Cannot read property 'type' of null


In Angular v6, when attempting to build my library I am running into an extremely non-descriptive BUILD ERROR Cannot read property 'type' of null

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

Having already solved this problem, I'm making this post to help anyone else running into this issue.


Solution

  • Update

    It seems like my diagnosis of this issue was incorrect (it's been so long now I can't remember exactly how I fixed it). Check out this issue in the Angular repo for what sounds like the correct diagnosis,

    Original answer:

    So after a LOT of debugging, I figured it out:

    My custom library, let call it library A, imports another custom library, library B, into library A's NgModule. Library B exports several components and modules from it's main NgModule. The problem was that, while library B exported the components and modules from it's NgModule, I failed to also export those components and modules via javascript/typescript. The solution was to make sure to export any components / modules via typescript that I exported in the NgModule.

    Example problem code

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { LibraryBComponent } from './library-b.component';
    
    @NgModule({
      imports: [CommonModule],
      declarations: [LibraryBComponent],
      exports: [LibraryBComponent],
    })
    export class LibraryBModule {}
    

    Solution code

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { LibraryBComponent } from './library-b.component';
    
    export { LibraryBComponent }      // <-- addition
    
    @NgModule({
      imports: [CommonModule],
      declarations: [LibraryBComponent],
      exports: [LibraryBComponent],
    })
    export class LibraryBModule {}