Angular库构建错误:TypeError:无法读取属性' type'为null

时间:2018-05-26 02:40:23

标签: angular angular-aot

在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>)

已经解决了这个问题,我发布这篇文章是为了帮助其他人解决这个问题。

6 个答案:

答案 0 :(得分:3)

知道此线程有点旧,但这可能会帮助遇到此问题的人。

我/我的Angular 9库遇到了相同的问题,该问题围绕一些Angular Material组件包装,而我的库和消耗我的库的应用程序都在使用Ivy。

添加fullTemplateTypeCheck并将其设置为false可以抑制该错误,但是不利的一面是它可以抑制可能会出现的其他错误。

https://github.com/ng-packagr/ng-packagr/issues/1087

示例tsconfig.lib.json

"angularCompilerOptions": {
        "fullTemplateTypeCheck": false,
},

答案 1 :(得分:2)

更新

似乎我对这个问题的诊断是不正确的(现在已经很久了,我记不清楚我是如何修理它的)。 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 {}

答案 2 :(得分:1)

我通过安装@ angular / cdk 8.0.0版本来解决它。

当我安装8.2.3时,由于构建会报告错误为Cannot read property 'type' of null

npm i @angular/cdk@8.0.0并解决了

答案 3 :(得分:0)

我的问题是在<projectRoot>/tsconfig.json上(您可以在#24143(comment)上查看)

基本上,我必须从tsconfig.json中删除路径,例如:

  "library-b": [
    "dist/library-b"
  ],
  "library-b/*": [
    "dist/library-b/*"
  ]

答案 4 :(得分:0)

我以相同的错误消息到达此页面,但在开发Angular库时使用yarn link通过 not 解决了此问题。

这是因为默认库文件已在tsconfig.json文件中解析。所以在我的项目中angular生成了这个:

// tsconfig.json
...
    "paths": {
      "lib-core": [
        "dist/lib-core"
      ],
      "lib-core/*": [
        "dist/lib-core/*"
      ],

然后我在开发库包和应用程序包(使用库)时仅运行2个终端

  1. ng build --project=lib-core --watch在后​​台
  2. ng serve --project=my-app用于开发我的应用

所以我不需要yarn link,也不会收到该错误消息!

答案 5 :(得分:0)

在开发使用另一个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开发工具,则可能不需要。