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

cannot read property 'type' of null javascript
uncaught typeerror: cannot read property 'ngmodule' of undefined
typeerror: cannot read property 'type' of null react
error in cannot read property 'type' of null
build error cannot read property 'type' of null
cannot read property 'type' of undefined angular
an unhandled exception occurred: cannot read property 'type' of null
typeerror: cannot read property 'isskipself' of null ng-packagr

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.

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

Cannot read property 'bindingStartIndex' of null when using Library , Maybe this is somewhere in @angular/cli or somewhere related to Webpack. When creating a library as described in the documentation and using it ERROR TypeError: Cannot read property 'bindingStartIndex' of null at  If library-b is installed that way, then ng build library-a fails with "Cannot read property 'type' of null" (only if components are listed in module exports). If I copy dist/library-b into node_modules, then ng build library-a is fine.

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!

Angular library build error: TypeError: Cannot read property 'type' of , 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  I have a weird issue TypeError: Cannot read property 'allowed' of undefined on last element in $scope.leaveType.. Update : Thanks @dusky its fixed the problem, but

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.

Improve error message: `TypeError: Cannot read property 'type' of null`, Angular library build error: TypeError: Cannot read property 'type' of null - angular​. @f1ames thanks for your help, i have checked your links and yes, seems like an angular problem. In my case, i'm working in a new project, so i have changed my devDependencies version.

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/*"
  ]

Angular cli build prod: TypeError: Cannot read property 'kind' of , 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 . tryParseHtml (/Users/John/apps/tests/service-work/node_modules/@angular/  Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question.Provide details and share your research! But avoid …. Asking for help, clarification, or responding to other answers.

angular cli package failure on build (TypeError: Cannot read , Keep in mind now TypeScript 3.6.4 is out. Still, it's ok to read below what wasn't really working. TypeScript <= 3.6.3 presents this issue, Handle  Angular 6 ng build Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined at levenshtein

Toolips ng build –prod error, angular cli package failure on build (TypeError: Cannot read property 'write' of UI\node_modules\@angular\cli\ember-cli\lib\ui\index.js:56:23)  I have an AngularJS (I know, very old!) application. In this app, I’m trying to include a React component, with the help of react2angular. The intention is to migrate the existing AngularJS c…

TypeError: Cannot read property 'close' of undefined when using , in Error: TypeError: Cannot read property 'kind' of undefined We are continuously working with Angular team on that and adjusting our library to work correctly  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Comments
  • 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.
  • @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.
  • @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).