Cannot read property 'bindingStartIndex' of null when using Library

🐞 bug report

Affected Package

Not sure. Maybe this is somewhere in @angular/cli or somewhere related to Webpack.

Is this a regression?

Yes, the previous version in which this bug was not present was Angular 8

Description

When creating a library as described in the documentation and using it in an empty app, I get the following error at runtime:

ERROR TypeError: Cannot read property 'bindingStartIndex' of null
at Module.ɵɵelementStart (core.js:20997)
at MyLibComponent_Template (my-lib.js:19)
at executeTemplate (core.js:11930)
at renderView (core.js:11716)
at renderComponent (core.js:13232)
at renderChildComponents (core.js:11519)
at renderView (core.js:11742)
at renderComponent (core.js:13232)
at renderChildComponents (core.js:11519)
at renderView (core.js:11742)

I do not see any errors while compiling.

🔬 Minimal Reproduction

I did the following:

Create a my-libs project: ng new my-libs --create-application=false
Create a library: cd my-libs and ng generate library my-lib
Create an app next to this: cd .. and ng new my-app
Add the library as a dependency of the app: Add "my-lib": "file:../my-libs/dist/my-lib" to the dependencies in the app’s package.json and run npm install
Import the MyLibModule in the AppModule (imported via import { MyLibModule } from 'my-lib';)
Use the component in the AppComponent: <lib-my-lib></lib-my-lib>
Build the library: cd my-libs and ng build --prod
Run the app: cd .. and ng serve
Point browser at http://localhost:4200/
Open Developer Tools to look at the console

The resulting project is contained in this zip-file repro.zip. I removed the node_modules, so please do

$ cd my-libs
$ npm install
$ ng build --prod
$ cd ..
$ cd my-app
$ npm install
$ ng serve

🔥 Exception or Error


    ERROR TypeError: Cannot read property 'bindingStartIndex' of null
    at Module.ɵɵelementStart (core.js:20997)
    at MyLibComponent_Template (my-lib.js:19)
    at executeTemplate (core.js:11930)
    at renderView (core.js:11716)
    at renderComponent (core.js:13232)
    at renderChildComponents (core.js:11519)
    at renderView (core.js:11742)
    at renderComponent (core.js:13232)
    at renderChildComponents (core.js:11519)
    at renderView (core.js:11742)

🌍 Your Environment

Angular Version:


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.2
Node: 12.13.0
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.2
@angular-devkit/core         9.0.2
@angular-devkit/schematics   9.0.2
@schematics/angular          9.0.2
@schematics/update           0.900.2
rxjs                         6.5.3

Issue Analytics

State:
Created 4 years ago
Reactions:26
Comments:22 (2 by maintainers)

Top GitHub Comments

85reactions

chqy24commented, Mar 12, 2020

in your angular app that depends on your local library, set projects.projectName.architect.build.options.preserveSymlinks with true in angular.json will prevent the angular cli from updating linked local library

53reactions

kctangcommented, May 19, 2020

This happens when @NgModule() is resolved from a different node_modules location.

Given this configuration, we can use my-lib from my-app directly without building my-lib:

# project directory structure
/
  /my-app
    /node_modules
    /projects
  /my-lib
    /node_modules
    /projects

# my-app's tsconfig.json:
    "paths": {
      "my-lib": [
        "../my-lib/projects/my-lib/src/public-api"
      ]
    }

As @mhevery highlighted, the error indicates that somehow there are two copies of Ivy in there. This was due to TypeScript’s module resolution approach - it looks for node_modules by traversing up the directory of file being compiled.

To fix this, I tell Typescript where to find Angular packages by using:

    "paths": {
      "@angular/*": [
        "./node_modules/@angular/*"
      ],
      "my-lib": [
        "../my-lib/projects/my-lib/src/public-api"
      ]
    }

Initial test seems to be working. Hope this helps.

Also, I think this approach does not depend on preserveSymlinks or "enableIvy": false.