我创建了一个位于我的应用程序工作区之外的 Angular-Library。结果是我有两个不同的工作空间。
我的第一个方法是构建我的库并将 /dist 文件夹与我的应用程序链接。这对于 ngserve 来说效果不太好，但无论如何我在渲染我的库组件模板时遇到了问题。
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'bindingStartIndex' of null
TypeError: Cannot read property 'bindingStartIndex' of null
[...]
在进行第一次研究时，我发现了这个 github 问题 post
基本上给定的解决方案是将我的库public-api.ts中的路径添加到我的tsconfig.json中，该路径可以导入到我的应用程序源中。 像这样：
"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 文件。使用我的应用程序中的组件或从我的库中注入服务运行良好。
测试.组件
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() {
}
}
应用程序-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"
}
我也遇到了同样的问题，解决方法如下
我将 “preserveSymlinks” 属性插入到 angular.json 文件的“选项”中，如下所示
"projects.project-name.architect.build.options.preserveSymlinks": true
然后我将其添加到tsconfig.json文件
paths: {
"@angular/*": [
"./node_modules/@angular/*"
],
}
我希望我能帮助别人。
如果您引用当前工作文件夹之外的组件文件路径，或者基本上如果您添加组件的语法和结构已关闭，也可能会发生这种情况。有时，如果您不小心，编辑的帮助是没有帮助的。
如果在引用当前工作文件夹之外的组件文件路径后发生这种情况，请务必查看：
https://github.com/angular/angular/issues/35586#issuecomment-630774572