I have updated a project that I use as a library for my application from angular 17 to angular 18, and I have updated all the packages as usual. I have also accepted the migration to the new build system.
npm i typescript@5.5.4
ng update @angular/core@18 ng update @angular/cli@18
ng update @angular-eslint/schematics@18 ng update @angular/material@18
and when I run the library I get this error in the browser console:
main.ts:10 ERROR TypeError: Cannot read properties of null (reading 'bindingStartIndex')
at ɵɵelementStart (core.mjs:23501:53)
at AppComponent2_Template (template.html:1:1)
at executeTemplate (core.mjs:11788:5)
at renderView (core.mjs:12950:7)
at renderComponent (core.mjs:12896:3)
at renderChildComponents (core.mjs:12996:5)
at renderView (core.mjs:12978:7)
at ComponentFactory.create (core.mjs:16260:9)
at _ApplicationRef.bootstrap (core.mjs:31811:38)
at core.mjs:33216:56
In my package.json I have added a package locally that is the component that should be rendered, I don't know if that could be the problem and that something has changed the way to import packages locally.
"@mylib/dashboards": "file:./MyLib.Dashboards/dist/dashboards/mylib-dashboards-18.0.0.tgz"
Since in the tsconfig.json I had already added the path of the angular libraries, which is the solution I have seen people giving to this problem
“paths": {
“@angular/*": [
“node_modules/@angular/*”
],
I also tried to add in the angular.json the preserveSymlinks section, but nothing changed.
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"preserveSymlinks": true,
However if I remove this path from “@angular/*” I get no error but the mocks data with which I test the library does not load. I create this mocks data with InMemoryDataService which implements InMemoryDbService creating a database.
package.json:
{
"name": "widgets-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "jest --coverage --verbose --silent",
"lint": "ng lint",
"build_prod": "ng build widgets --configuration production",
"pack": "cd dist/widgets && npm pack",
"package": "npm run build_prod && npm run pack",
},
"private": true,
"dependencies": {
"@angular/animations": "^18.2.7",
"@angular/cdk": "^18.2.7",
"@angular/common": "^18.2.7",
"@angular/compiler": "^18.2.7",
"@angular/core": "^18.2.7",
"@angular/forms": "^18.2.7",
"@angular/material": "^18.2.7",
"@angular/material-moment-adapter": "^18.2.7",
"@angular/platform-browser": "^18.2.7",
"@angular/platform-browser-dynamic": "^18.2.7",
"@angular/router": "^18.2.7",
"@asymmetrik/ngx-leaflet": "^18.0.1",
"@mylib/dashboards": "file:../MyLib.Dashboards/dist/dashboards/mylib-dashboards-18.0.0.tgz",
"@mylib/layout": "^18.0.2",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@syncfusion/ej2-angular-pivotview": "^27.1.48",
"angular-in-memory-web-api": "0.18.0",
"echarts": "^5.4.3",
"leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",
"moment": "^2.29.4",
"ng-dynamic-component": "^10.7.0",
"ngx-daterangepicker-material": "^6.0.4",
"ngx-echarts": "^18.0.0",
"ngx-skeleton-loader": "^9.0.0",
"ngx-translate-multi-http-loader": "^18.1.0",
"rxjs": "^7.8.1",
"uuid": "^9.0.0",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.7",
"@angular-eslint/builder": "^18.3.1",
"@angular-eslint/eslint-plugin": "^18.3.1",
"@angular-eslint/eslint-plugin-template": "^18.3.1",
"@angular-eslint/schematics": "^18.3.1",
"@angular-eslint/template-parser": "^18.3.1",
"@angular/cli": "^18.2.7",
"@angular/compiler-cli": "^18.2.7",
"@ngneat/spectator": "^19.0.0",
"@types/jest": "^29.5.13",
"@types/leaflet": "^1.9.12",
"@typescript-eslint/eslint-plugin": "^8.6.0",
"@typescript-eslint/parser": "^8.6.0",
"eslint": "^9.12.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"jest": "^29.7.0",
"jest-auto-spies": "^3.0.0",
"jest-preset-angular": "^14.2.4",
"jest-sonar": "^0.2.16",
"ng-mocks": "^14.13.1",
"ng-packagr": "^18.2.1",
"prettier": "^3.3.3",
"typescript": "~5.5.4"
}
}
You can try removing the angular line from the paths array, this might solve the problem.
“paths": {
“@angular/*": [
“node_modules/@angular/*”
],
“paths": {},