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

John picture John · May 26, 2018 · Viewed 12.8k times · Source

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.

Answer

John picture John · May 26, 2018

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 {}