从不同工作空间渲染组件时使用库时，Angular 10无法读取null的属性'bindingStartIndex'

编程问答 2022-06-12

问题描述

我创建了一个Angular-Library，它位于App-Workspace之外。结果是我有两个不同的工作区。

我的第一个方法是构建我的媒体库，并将 / dist 文件夹与我的App链接。 ng serve效果不佳，但是无论如何我在渲染我的Library-Component-Templates时都有问题。

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

做我的第一个研究后，我发现这个github问题post

基本上，给定的解决方案是从tsconfig.json中的库 public-api.ts 添加我的路径，该路径可以导入到我的App源码中。 像这样：

    "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"]
  }

在渲染模板时，仍然存在相同的问题。

因为我的最后一种方法就是直接从我的app.module.ts中直接导入我的lib-Component 

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

结果是一样的。呈现模板时，我仍然遇到相同的错误。目前，这种方法确实使我感到困惑。我的意思是我只是从另一个位置导入了一个.ts文件。使用我的应用程序中的组件或我的库中的注入服务都可以正常工作。

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
            },"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","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","scripts": [],"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"
}

解决方法

我遇到了同样的问题，解决方法如下

我在 angular.json 文件的“options”中插入了 “preserveSymlinks” 属性，如下所示

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

然后我将它添加到 tsconfig.json 文件

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

我希望我帮助了某人。

,

幸运的是，我解决了我的问题，但不幸的是，我并不真正地知道如何解决。昨天我删除了我应用程序中的所有node_module。也许这可以解决我的问题。

,

如果您引用了当前工作文件夹之外的组件文件路径，或者基本上如果您添加组件的语法和结构已关闭，也会发生这种情况。有时，如果您不小心，编辑的帮助将无济于事。

angularangularangular-ivyangular-libraryangular-moduletypescripttypescripttypescript