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

Question

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.

Dabster

Answer 1

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

Dabster

Unfortunatelly I'm exactly in the same situation and this solution does not work for me. In a way it makes sense because the component I'm exporting is already exported from it's own file via public_api.ts barrel. – Labor

@GeorgeKnap it's been long enough that I don't remember too many details of this problem, but I think I ended up fixing things by creating a new, working, blank angular app, porting over my modules and code piece by piece, and incrementally rebuilding the app along the way searching for build errors. That way I was able to figure out exactly what code broke things. It was an extremely time consuming debugging process. – Dabster

@GeorgeKnap Also, I may be remembering this incorrectly, but I think I ran into this problem while upgrading from angular v5 to v6, and I think one of the problems was that my polyfills.ts file was missing a required polyfill (I think the Reflect api, but I'm not sure). – Dabster

I included Angular Material in Library B and Library A could not be compiled anymore. I only got the famous "Cannot read property 'type' of null" So the fix was to export the included Material module in the module file of Library B. import { MatTooltipModule } from '@angular/material/tooltip'; export { MatTooltipModule } – Topeka

Answer 2

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

Medicament

Answer 3

I arrived on this page with the same error message, but resolved this by not using yarn link when developing Angular libraries.

This is because the default library files are already resolved in the tsconfig.json file. So in my project angular generated this:

// tsconfig.json
...
    "paths": {
      "lib-core": [
        "dist/lib-core"
      ],
      "lib-core/*": [
        "dist/lib-core/*"
      ],

Then I just run 2 terminals while I'm developing the library package and the app package (which uses the library)

1. ng build --project=lib-core --watch in the background
2. ng serve --project=my-app for developing my app

So I don't need yarn link and I don't get that error message!

Lundeen

main problem here is when you deal with multiple libraries which can not be used as alias in each other – Passionate

Answer 4

I resolve it by installing the @angular/cdk 8.0.0 version.

When I installed 8.2.3, as build would report error as Cannot read property 'type' of null,

npm i @angular/[email protected] and it resolved

Shanaeshanahan

Answer 5

While developing an Angular library that used another Angular library, I got the same issue.

I would recommend upgrading related dependency versions first to see if it solves the problem:

// initial versions (did not work)
"@angular-devkit/build-angular": "~0.13.0",
"@angular-devkit/build-ng-packagr": "~0.13.0",
"@angular/cli": "~7.3.1",
"@angular/compiler-cli": "~7.2.0",

// updated versions (works!)
"@angular-devkit/build-angular": "~0.13.8",
"@angular-devkit/build-ng-packagr": "~0.13.8",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.14",

This worked for me.

I suspect the solution that John proposed will work as well (because i did not re-export transitive library used) and is needed if you are using older version of Angular library development tools. However, it may not be required if you just upgrade the Angular lib dev tools.

Kleeman

Answer 6

My issue was on <projectRoot>/tsconfig.json (you can check it on #24143(comment))

Basically I had to remove the paths from tsconfig.json like:

  "library-b": [
    "dist/library-b"
  ],
  "library-b/*": [
    "dist/library-b/*"
  ]

Niggle