Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 439
John Avatar asked May 26 '18 02:05

John


Video Answer


2 Answers

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 {}
like image 51
John Avatar answered Sep 22 '22 10:09

John


Know this thread is kinda old but this may help someone coming across this.

I was/am having the same issue with my Angular 9 library that is wrapping around some Angular Material components both my library and my app that is consuming my library are using Ivy.

Adding the fullTemplateTypeCheck and setting it to false suppresses the error however the down side is it may suppress other errors you may be possibly getting.

https://github.com/ng-packagr/ng-packagr/issues/1087

Example tsconfig.lib.json

"angularCompilerOptions": {
        "fullTemplateTypeCheck": false,
},
like image 27
bcreature Avatar answered Sep 21 '22 10:09

bcreature