Angular 10 Cannot read property 'bindingStartIndex' of null when using Library while rendering component from different workspace

Question

I created an Angular-Library which is outside of my App-Workspace. The result is that I have two different workspaces.

My first approach was building my Library and link /dist folder with my App. This worked not so fine with ng serve but anyways I had an issue with rendering my Library-Component-Templates.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'bindingStartIndex' of null
TypeError: Cannot read property 'bindingStartIndex' of null
[...]

Doing my first research I found this github issues post

Basically the given solution is to add my path from my Library public-api.ts in my tsconfig.json which can be imported inside my App sources. Like this:

    "paths": {
    "@app/*": ["src/app/*"],
      "@core": ["src/app/@core"],
    "@core/*": ["src/app/@core/*"],
    "@shared": ["src/app/@shared"],
    "@shared/*": ["src/app/@shared/*"],
      "@env/*": ["src/environments/*"],
      "@myLibrary/*": ["../myLibrary/projects/myLibrary/src/public-api"]
  }

Somehow I still have the same issue while rendering my template.

Because of that my last approach was just simply import my lib-Component directly from my app.module.ts

import { TestComponent } from '../../../../myLibrary/projects/myLibrary/src/lib/components/testComponent/test.component';
   @NgModule({
     imports: [
       FlexLayoutModule,
       CelNgZuiModule,
       CommonModule
   ],
   declarations: [FactoryModelComponent, TestComponent,]
   })

And the result is the same. I still get the same error while rendering my template. And this approach is currently confusing me really. I mean I just only imported a .ts-File from another Location. Using components from my App or injecting Services from my Library are working fine.

Test.component

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'cel-test',
   template: '<p> should work fine </p>',
})
export class TestComponent implements OnInit {

constructor() {
    console.log("it is working");
}

ngOnInit() {
}

}

App-angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mes-demo": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "preserveSymlinks": true,
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/apple-touch-icon.png",
              "src/robots.txt",
              "src/manifest.webmanifest",
              "src/assets"
            ],
            "styles": [
              "src/main.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "serviceWorker": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mes-demo:build",
            "hmr": true,
            "hmrWarning": false
          },
          "configurations": {
            "production": {
              "browserTarget": "mes-demo:build:production",
              "hmr": false
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mes-demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "scripts": [],
            "styles": [
              "src/main.scss"
            ],
            "assets": [
              "src/favicon.ico",
              "src/apple-touch-icon.png",
              "src/robots.txt",
              "src/manifest.webmanifest",
              "src/assets"
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "mes-demo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "mes-demo:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "mes-demo"
}

Outweigh

Answer 1

I had the same problem and solved it as follows

I inserted the "preserveSymlinks" property inside the "options" in the angular.json file, making it as follows

"projects.project-name.architect.build.options.preserveSymlinks": true

Then I added it to the tsconfig.json file

paths: {
   "@angular/*": [
      "./node_modules/@angular/*"
   ],
}

I hope I helped someone.

Alyssa

It worked for me. Did you figure out why you got the error and why enabling this preserveSymlinks worked? Still trying to understand the issue but not really finding the reason – Almita

Worked for me too. Tks. More details here: medium.com/@maravondra/… – Volost

thank you, this worked for me by just adding preserveSymLinks: true in angular.json as you mentioned – Megrims

ONLY needed the first part "preserveSymlinks" – Laughry

Answer 2

This also can happen is you refer component file paths that are outside of you r current working folder, or basically if your syntax and structure for adding components is off. Sometimes your editor's help is not helpful if you're not careful.

Cofer

Answer 3

If this happens after you've referenced a component file path outside of your current working folder, be sure to take a look at:

https://github.com/angular/angular/issues/35586#issuecomment-630774572

Sparkie

Answer 4

I got this error when using Ionic within an NX monorepo. One of the migrations for Capacitor added a node_modules folder to my application (instead of using the root node_modules). I fixed it by removing the node_modules in the app folder.

Wallsend