问题标签 [angular-ivy]

我目前正在开发的 Angular 应用程序有几个必须动态创建组件模板的地方，例如支持绑定内容中翻译词序的差异。目前，这需要大约 500MB 的@angular/compiler包。

据我所知，新的 Ivy 视图引擎有可能解决这个问题，而不会造成任何臃肿。我看到@angular/core现在公开了增量 DOM 交互的所有方法，例如ɵɵdefineComponent,ɵɵelementStart和ɵɵelementEnd. 但是，我担心其中使用时髦的theta (ɵ) 字符暗示了一个内部 API，我没有看到它的文档。这是供公众消费的吗？或者，是否会公开某种友好的构建器 API 来包装它？

在项目中升级到 Angular RC.3 并切换到 Ivy 后，我收到以下错误：

错误：dialog不是已知元素：1. 如果dialog是 Angular 组件，则验证它是该模块的一部分。2. 允许任何元素添加NO_ERRORS_SCHEMA到@NgModule.schemas这个组件中。

确实，我使用<dialog>-element有这样的标记：

即使浏览器覆盖率不是 100% dialog仍然是一个有效的 HTML 元素。

他们错过了支持它吗？这是 Anglaur 或 Ivy 中的错误吗？当我也在组件中使用时，我可以只使用dialog-elementNO_ERRORS_SCHEMA吗？^*

_{^*我实际上不想激活。}

在 IVY 之前，我们可以根据这个很棒的SO 答案触发像这样的更改检测：

现在的问题是，我们如何在 Ivy 中实现这一点？

在开发模式下运行时，ng在控制台中输入会显示：

但我不确定如何使用它来检测根元素的变化？

解决方法

通过在给定组件中注入ChangeDetectorRef，我可以执行以下操作（其中 $0 是开发工具中先前选择的元素）：

但这不是针对根组件的吗？

错误描述 我正在使用 Angular 的新 IVY 编译器，以及新的延迟加载功能（这里使用 ivy 进行延迟加载教程：https ://www.debugbear.com/blog/lazy-loading-angular-components-without-路由器）

当延迟加载模块并将组件实例添加到我的应用程序时，ng-select 不会出现在组件中，并且我在控制台中收到此错误：

core.js:6354 ERROR NullInjectorError: R3InjectorError(AppModule)[InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model -> InjectionToken ng-select-selection-model]: NullInjectorError: No provider for InjectionToken ng-select-selection-model! at NullInjector.get (http://localhost:4200/vendor.js:8736:27) at R3Injector.get (http://localhost:4200/vendor.js:24378:33) at R3Injector.get (http://localhost:4200/vendor.js:24378:33) at R3Injector.get (http://localhost:4200/vendor.js:24378:33) at NgModuleRef$1.get (http://localhost:4200/vendor.js:40184:33) at Object.get (http://localhost:4200/vendor.js:38095:35) at getOrCreateInjectable (http://localhost:4200/vendor.js:12876:39) at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:28245:12) at NodeInjectorFactory.NgSelectComponent_Factory [as factory] (http://localhost:4200/lazy-lazy-module.js:4143:398) at getNodeInjectable (http://localhost:4200/vendor.js:13021:44)

可重现的示例 请参阅https://github.com/boltex/ivy-lazyload-test以获得暴露此错误的最小存储库。

重现 1. 克隆示例 repo git clone https://github.com/boltex/ivy-lazyload-test 2. 运行npm install以获取所有依赖项 3. 运行ng serve

预期行为 使用 ng serve 在本地尝试此操作时，当程序在浏览器中加载时，请按“延迟加载模块并在下面添加组件实例”按钮。（这会将一些组件实例添加到应用程序中）该组件应该有一个 ng-select 。它没有，并且控制台中出现了前面提到的错误。

注意 忽略控制台中的第一个错误：Uncaught TypeError: ng.probe is not a function 这是使用 Angular 9 时出现的正常错误，因为如果 window.ng 存在，augury 假定 angular dev 模式处于活动状态，但 ivy 不导出马上试探。

这是一个屏幕截图

我当前的设置 - 操作系统：[windows 10] - 浏览器 [chrome] - 版本 [78.0.3904.108（官方构建）（64 位）]

感谢您对这个问题的时间和关注！

我想摆脱我的应用程序中的区域。我正在考虑触发更改检测的几个选项：

1. 通过在模板中使用的属性的每次更新时在组件中调用this.changeDetectorRef.detectChanges()/来手动触发更改检测。ΘmarkDirty(this)像这样的东西：

2. PushPipe像这样。该管道与内置管道非常相似，AsyncPipe但ChangeDetectorRef#markForChanges它调用的是ChangeDetectorRef#detectChanges. 考虑到即将发布的 Ivy，我应该准备好调用ΘmarkDirty(this)wherethis是对组件实例的引用。我可以通过注入ViewRef的context属性获取对组件实例的引用，但该属性是私有的，依赖私有 API 是个坏主意。是否有任何官方方法可以在此组件模板中使用的管道中获取组件实例引用？

3. ReactiveComponent像这样。这种方法强制从父类继承一些基本功能。我希望人们ngOnDestroy$在子类中覆盖而忘记调用super.ngOnDestroy$(). 我们不能强制对生命周期钩子方法进行适当的覆盖，对吧？

4. @observed像这样的装饰器。这种方法严重依赖于Θ- 前缀的函数和属性，这些函数和属性可能会发生变化。此外，它感觉有点hacky，所以在生产中使用它太冒险了，对吧？

您更喜欢哪种方法？我错过了更好的选择吗？

目前我正在将一个项目更新到 Angular 9。不幸的是，我无法使用 IVY 构建它。错误信息是

无法将类型实体 ɵngcc14.ɵu 解析为符号中的错误

在没有禁用 IVY 的情况下，项目可以正常构建和服务。我认为，这是由外部库引起的。我想知道是否有可能将其他日志记录或调试信息打印到控制台，或者是否有任何日志文件以确定这些依赖项中的哪些导致错误。你有什么主意吗？

我的依赖是

谢谢和欢呼！

在过去的几个小时里，我一直在筛选各种文章，但我不明白为什么 Angular 8 和 Ivy 会给我一个曲线球。

考虑以下目录：

媒体库将是我想在仪表板上呈现的组件。

在没有 Ivy 引擎的 Angular 7 中，这将是一项简单的任务，但是，我无法让它与 Ivy 一起工作。

在 media-library.module.ts 我有（为简洁起见删除了代码）：

然后在 app.module.ts 中，我导入了这个模块（为简洁起见，删除了代码）：

添加到 app.component.html 可以很好地呈现这一点，因为我将模块的导入添加到 app.module.ts，假设 Angular 8 Ivy 仍然可以看到全局导入，我想如果我将 HTML 块移动到dashboard.component.html，它仍然可以工作吗？不是机会。

然后我将它从 app.module.ts 中删除并将其添加到dashboard.module.ts 希望在我真正需要的地方导入模块可以工作？不是机会。

我什至将 MediaLibraryComponent 作为声明直接添加到dashboard.module.ts 中，希望它能接收到它。依然没有。

我很确定这与常春藤有关，我只是不知道是什么？我已经阅读了文档，寻找可能影响 entryComponents 的任何重大更改，但是，我现在拥有的一切仍然有效。

有没有其他人遇到过这个问题，现在如何解决？

我正在尝试创建一个角度库项目，但我在控制台中收到此错误

我创建了一个新的 Angular 项目，ng new --enable-ivy然后添加了一个带有ng g library my-lib. 我的图书馆有一个带有模块（如下）的辅助端点，因此导入将是import { MyLibModule } from 'my-lib/secondary';

我使用ng build my-lib它构建它，所有构建都很好，我使用链接将库包含在演示应用程序中，在我运行的库的 dist 文件夹和我运行yarn link的根演示应用程序文件夹中yarn link my-lib，然后在导入中包含模块这AppModule

但是，当我运行yarn start或ng serve一切正常但我在控制台中收到上述错误时，在浏览器中调试它会显示ngModuleDef我的库模块中的属性不存在，有谁知道为什么会发生这种情况？

注意：如果我关闭 Ivy，这不是问题，但随着 ng9 即将推出，这不是一个真正可行的解决方案，我想知道我在库中做错了什么（如果有的话）

输出自ng version

更新

• 此问题的已打开问题https://github.com/angular/angular/issues/34721

介绍

在 Angular 中，服务是使用装饰器提供的@Injectable。

抽象@Injectable

在 Ivy 之前，可以为@Injectable（例如用于动态配置提供者、增强服务类）构建抽象。

以下片段显示了如何@Injectable包装的示例。

启用 Ivy 时，使用装饰器InjectableEnhanced（见上文）不起作用。以下代码被截断会导致运行时错误。

运行时错误

使用 angular/cli 编译服务@InjectableEnhanced有效，但浏览器中显示以下错误。相应的项目可以在https://github.com/GregOnNet/ng-9-inject.git找到。

也许，Angular 编译器做了一些代码转换，但不能再在其他装饰器中解析 @Injectable。查看角度存储库，可以在injectable.ts（参见：https ://github.com/angular/angular/blob/master/packages/core/src/di/injectable.ts#L14 ）。

问题

还有一种抽象@Injectable的方法吗？

复制库

https://github.com/GregOnNet/ng-9-inject.git

我在 Angular 8 上有一个新项目，我正在使用 Ivy，问题是当我更改 HTML 或 CSS 中的任何内容并保存更改时，应用程序崩溃。然后我重置了ng serve一切正常运行。仅更改 TS 文件不会导致错误。

进行上述更改时遇到的主要错误是“ngIf 不是 ng-container 的已知属性”

这是我的 package.json：

我的 ts 配置：

我的 angular.json：