Angular library build error: TypeError: Cannot read property 'type' of null
Angular library build error: TypeError: Cannot read property 'type' of null
在 Angular v6 中,当我尝试构建我的库时,我 运行 变成了一个极其非描述性的 BUILD ERROR Cannot read property 'type' of null
BUILD ERROR
Cannot read property 'type' of null
TypeError: Cannot read property 'type' of null
at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15378:27
at Array.forEach (<anonymous>)
at removeSummaryDuplicates (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15377:11)
at TemplateParser.tryParseHtml (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14806:34)
at TemplateParser.tryParse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14799:21)
at TemplateParser.parse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14780:27)
at AotCompiler._parseTemplate (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20483:43)
at AotCompiler._createTypeCheckBlock (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20250:23)
at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20220:27
at Array.forEach (<anonymous>)
我已经解决了这个问题,我正在做这个 post 来帮助其他人 运行 解决这个问题。
更新
看来我对这个问题的诊断是不正确的(时间太久了我记不清我是如何修复它的了)。 Check out this issue in the Angular repo 听起来像是正确的诊断,
原回答:
所以经过大量的调试,我弄明白了:
我的自定义库,我们称之为库 A,将另一个自定义库,库 B,导入库 A 的 NgModule
。图书馆 B 从它的主要 NgModule
导出了几个组件和模块。问题是,虽然库 B 从它的 NgModule
导出组件和模块,但我 未能 也通过 javascript/typescript 导出这些组件和模块。解决方案是确保通过我在 NgModule
.
中导出的打字稿导出任何组件/模块
示例问题代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibraryBComponent } from './library-b.component';
@NgModule({
imports: [CommonModule],
declarations: [LibraryBComponent],
exports: [LibraryBComponent],
})
export class LibraryBModule {}
解决方案代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibraryBComponent } from './library-b.component';
export { LibraryBComponent } // <-- addition
@NgModule({
imports: [CommonModule],
declarations: [LibraryBComponent],
exports: [LibraryBComponent],
})
export class LibraryBModule {}
我的问题是 <projectRoot>/tsconfig.json
(您可以在 #24143(comment) 上查看)
基本上我必须从 tsconfig.json
中删除路径,例如:
"library-b": [
"dist/library-b"
],
"library-b/*": [
"dist/library-b/*"
]
我到达此页面时出现了相同的错误消息,但在开发 Angular 库时通过 not 使用 yarn link
解决了这个问题。
这是因为默认库文件已经在 tsconfig.json
文件中解析。所以在我的项目中 angular 生成了这个:
// tsconfig.json
...
"paths": {
"lib-core": [
"dist/lib-core"
],
"lib-core/*": [
"dist/lib-core/*"
],
然后我在开发库包和应用程序包(使用库)时只 运行 2 个终端
ng build --project=lib-core --watch
在后台
ng serve --project=my-app
用于开发我的应用程序
所以我不需要 yarn link
而且我没有收到错误消息!
在开发使用另一个 Angular 库的 Angular 库时,我遇到了同样的问题。
建议先升级相关依赖版本,看看是否能解决问题:
// initial versions (did not work)
"@angular-devkit/build-angular": "~0.13.0",
"@angular-devkit/build-ng-packagr": "~0.13.0",
"@angular/cli": "~7.3.1",
"@angular/compiler-cli": "~7.2.0",
// updated versions (works!)
"@angular-devkit/build-angular": "~0.13.8",
"@angular-devkit/build-ng-packagr": "~0.13.8",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.14",
这对我有用。
我怀疑 John 提出的解决方案也能正常工作(因为我没有重新导出使用的传递库),如果您使用的是旧版本的 Angular 库开发工具,则需要它。但是,如果您只是升级 Angular lib 开发工具,则可能不需要它。
知道这个帖子有点旧,但这可能会帮助遇到这个问题的人。
我 was/am 与我的 Angular 9 库有同样的问题,它环绕着一些 Angular Material 组件,我的库和使用我的库的应用程序都使用 Ivy。
添加 fullTemplateTypeCheck 并将其设置为 false 可以抑制错误,但不利的一面是它可能会抑制您可能遇到的其他错误。
https://github.com/ng-packagr/ng-packagr/issues/1087
示例tsconfig.lib.json
"angularCompilerOptions": {
"fullTemplateTypeCheck": false,
},
我通过安装@angular/cdk 8.0.0 版本来解决它。
当我安装8.2.3时,as build会报错Cannot read property 'type' of null
,
npm i @angular/cdk@8.0.0
它解决了
在 Angular v6 中,当我尝试构建我的库时,我 运行 变成了一个极其非描述性的 BUILD ERROR Cannot read property 'type' of null
BUILD ERROR
Cannot read property 'type' of null
TypeError: Cannot read property 'type' of null
at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15378:27
at Array.forEach (<anonymous>)
at removeSummaryDuplicates (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:15377:11)
at TemplateParser.tryParseHtml (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14806:34)
at TemplateParser.tryParse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14799:21)
at TemplateParser.parse (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:14780:27)
at AotCompiler._parseTemplate (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20483:43)
at AotCompiler._createTypeCheckBlock (/Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20250:23)
at /Users/John/apps/tests/service-work/node_modules/@angular/compiler/bundles/compiler.umd.js:20220:27
at Array.forEach (<anonymous>)
我已经解决了这个问题,我正在做这个 post 来帮助其他人 运行 解决这个问题。
更新
看来我对这个问题的诊断是不正确的(时间太久了我记不清我是如何修复它的了)。 Check out this issue in the Angular repo 听起来像是正确的诊断,
原回答:
所以经过大量的调试,我弄明白了:
我的自定义库,我们称之为库 A,将另一个自定义库,库 B,导入库 A 的 NgModule
。图书馆 B 从它的主要 NgModule
导出了几个组件和模块。问题是,虽然库 B 从它的 NgModule
导出组件和模块,但我 未能 也通过 javascript/typescript 导出这些组件和模块。解决方案是确保通过我在 NgModule
.
示例问题代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibraryBComponent } from './library-b.component';
@NgModule({
imports: [CommonModule],
declarations: [LibraryBComponent],
exports: [LibraryBComponent],
})
export class LibraryBModule {}
解决方案代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibraryBComponent } from './library-b.component';
export { LibraryBComponent } // <-- addition
@NgModule({
imports: [CommonModule],
declarations: [LibraryBComponent],
exports: [LibraryBComponent],
})
export class LibraryBModule {}
我的问题是 <projectRoot>/tsconfig.json
(您可以在 #24143(comment) 上查看)
基本上我必须从 tsconfig.json
中删除路径,例如:
"library-b": [
"dist/library-b"
],
"library-b/*": [
"dist/library-b/*"
]
我到达此页面时出现了相同的错误消息,但在开发 Angular 库时通过 not 使用 yarn link
解决了这个问题。
这是因为默认库文件已经在 tsconfig.json
文件中解析。所以在我的项目中 angular 生成了这个:
// tsconfig.json
...
"paths": {
"lib-core": [
"dist/lib-core"
],
"lib-core/*": [
"dist/lib-core/*"
],
然后我在开发库包和应用程序包(使用库)时只 运行 2 个终端
ng build --project=lib-core --watch
在后台ng serve --project=my-app
用于开发我的应用程序
所以我不需要 yarn link
而且我没有收到错误消息!
在开发使用另一个 Angular 库的 Angular 库时,我遇到了同样的问题。
建议先升级相关依赖版本,看看是否能解决问题:
// initial versions (did not work)
"@angular-devkit/build-angular": "~0.13.0",
"@angular-devkit/build-ng-packagr": "~0.13.0",
"@angular/cli": "~7.3.1",
"@angular/compiler-cli": "~7.2.0",
// updated versions (works!)
"@angular-devkit/build-angular": "~0.13.8",
"@angular-devkit/build-ng-packagr": "~0.13.8",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.14",
这对我有用。
我怀疑 John 提出的解决方案也能正常工作(因为我没有重新导出使用的传递库),如果您使用的是旧版本的 Angular 库开发工具,则需要它。但是,如果您只是升级 Angular lib 开发工具,则可能不需要它。
知道这个帖子有点旧,但这可能会帮助遇到这个问题的人。
我 was/am 与我的 Angular 9 库有同样的问题,它环绕着一些 Angular Material 组件,我的库和使用我的库的应用程序都使用 Ivy。
添加 fullTemplateTypeCheck 并将其设置为 false 可以抑制错误,但不利的一面是它可能会抑制您可能遇到的其他错误。
https://github.com/ng-packagr/ng-packagr/issues/1087
示例tsconfig.lib.json
"angularCompilerOptions": {
"fullTemplateTypeCheck": false,
},
我通过安装@angular/cdk 8.0.0 版本来解决它。
当我安装8.2.3时,as build会报错Cannot read property 'type' of null
,
npm i @angular/cdk@8.0.0
它解决了