标签: angular-ivy

使用 angular 9 和它的新编译引擎 IVY，我的 CI 构建时间大幅增加。这当然是因为ngcc它在许多模块上运行。

例如

Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

...

我以为ngcc缓存在编译的库node_modules，但我的node_modules缓存在我的CI工作，还有编的现象发生，所以这是不可能的。

我应该缓存什么路径以避免ngcc在每次构建时重新编译所有模块？

任何人都可以清楚地解释为什么在 IVY 编译器中，不再需要入口组件 API 了吗？。换句话说，内部发生了什么变化，以便 Angular 突然不需要提醒您要动态创建组件

最近我在安装 npm 包（使用 node-gyp）时遇到问题。我尝试将节点的次要版本从版本16.13.0升级到16.13.1，并将我的角度cli从13.0.2升级到13.2.0。一旦我得到要安装的包，我就生成了一个带有ng g library new-library. 我不知道到底是什么破坏了它，但现在每当我尝试构建库时，它都会产生错误。我尝试ng build my-lib得到以下错误。

\xe2\x9c\x96 Compiling with Angular sources in Ivy partial compilation mode.\nTransform failed with 1 error:\nerror: Invalid version: "15.2-15.3"\n

我尝试恢复节点和角度 cli 的版本，但它没有解决问题。我什至将代码恢复到原始状态，现在出现错误。这是我的环境有问题吗？我该如何解决这个问题？

我在 4 下创建了一个 Angular 应用程序。我已经从一个版本迁移到另一个版本，目前是最新的版本 9。我正在审查我的测试。我有一个登录组件，我有 3 个工作测试，现在都失败了。它现在返回以下内容：

LoginComponent should be created ...
Failed: unreachable
Error: unreachable
    at injectableDefOrInjectorDefFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:17302:1)
    at providerToFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:17402:1)
    at providerToRecord (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:17349:1)
    at R3Injector.processProvider (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:17165:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:17144:1
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1400:1
    at Array.forEach (<anonymous>)
    at deepForEach (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1400:1)
    at R3Injector.processInjectorType (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:17140:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:16881:1

Jasmine测试如下：

// File: login.component.spec.ts
import { async, ComponentFixture, TestBed, inject, fakeAsync, tick } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule, NgForm } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { of, throwError } from 'rxjs'; …

我正在按照 update.angular.io 上的更新指南（+ 运行 npm update）将我的项目从 Angular 8 更新到 9 并尝试使用ng serve我编译网站时出现以下错误：

ERROR in Failed to compile entry-point angular-font-awesome (es2015 as esm2015) due to compilation errors:
node_modules/angular-font-awesome/dist/angular-font-awesome.js:3968:26 - error NG1010: Value at position 0 in the NgModule.imports of AngularFontAwesomeModule is not a reference: [object Object]

3968                 imports: [CommonModule],

任何帮助表示赞赏。

更新

我的ng version输出：

   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / ? \ | '_ \ …

在我的 Angular 9 应用程序中，我有一个抽象类：

export abstract class MyAbstractComponent {
  constructor(
    protected readonly cd: ChangeDetectorRef,
  ) {
    super();
  }

  // ...
}

和一个扩展它的组件：

@Component({
  // ...
})
export class MyConcreteComponent extends MyAbstractComponent {
  // ...
}

一切正常，除了测试，我收到以下错误：

错误：此构造函数与 Angular 依赖注入不兼容，因为它在参数列表索引 0 处的依赖项无效。如果依赖类型是像字符串这样的原始类型，或者此类的祖先缺少 Angular 装饰器，就会发生这种情况。

请检查 1) 索引 0 处参数的类型是否正确，以及 2) 是否为此类及其祖先定义了正确的 Angular 装饰器。

我有一个需要通过 npm 分发的库。Angular 10 的建议似乎仍然是这样的库应该在禁用 IVY 的情况下编译，但 Angular CLI 将确保该库仍然与启用 IVY 的应用程序兼容。

使用我的库，如果我使用 IVY 构建它，它会按预期工作。然而，如果我在构建时禁用 IVY，当我导入库时，我会收到以下错误：

node_modules/@me/my-module/lib/my-module.module.d.ts:1:22 中的错误 - 错误 NG6002：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类。

这可能意味着声明 MeMYModule 的库 (@me/my-module) 没有被 ngcc 正确处理，或者与 Angular Ivy 不兼容。检查是否有更新版本的库可用，如果有则更新。还可以考虑与库的作者核对以查看该库是否与 Ivy 兼容。

我错过了什么吗？我发现了很多类似的问题，但似乎没有一个解决方案有效。

我在我的机器上使用 angular 11.2，我想运行一个 angular 12 项目。从 git 克隆后，我运行了以下命令。

1. npm install
2. ng serve

但是我遇到了以下错误并且无法运行该项目。我读了这个问题，但它对我不起作用。

Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\Users\thimira_p\Desktop\itrd\epic-itrda-web\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Error: ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\Users\thimira_p\Desktop\itrd\epic-itrda-web\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Error: (webpack)-dev-server/client?http://0.0.0.0:0&sockPath=/sockjs-node
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\Users\thimira_p\Desktop\itrd\epic-itrda-web\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

如何解决这个问题？

这个奇怪的错误，我不记得在常春藤之前看到过，在使用最新的 Angular 9 CLI 创建的新应用程序的设置中弹出。看起来这可能是 Ivy 的错误？任何关于如何修复的想法将不胜感激。

ng 测试的错误结果

Error: This constructor was not compatible with Dependency Injection.
    at Module.??invalidFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:14150:1)
    at Object.Router_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm5/router.js:4404:67)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11425:1)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11247:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:787:1)
    at ??inject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:792:1)
    at Object.AuthService_Factory [as factory] (ng:///AuthService/?fac.js:5:39)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11425:1)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11247:1)
    at NgModuleRef$1.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NgModuleRef$1.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:24218:1)

Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/shared/components/header/header.component.spec.ts:25:23)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:396:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)

app.component.ts

import { Component, HostBinding } from '@angular/core';
import { AuthService, …

我已将我的应用程序更新到 9 版本。一切都很好，但我在将 strictTemplates 设置为 true 时遇到了问题。例如这段代码

loaded$: Observable<boolean>
[loaded]="loaded$ | async"
@Input() loaded!: boolean;

我有错误类型 'boolean | null' 不能分配给类型 'boolean'。

这修复了错误

@Input() loaded!: boolean | null;

但是我看不到有人acn解释我的意思，好吗？