问题标签 [angular-aot]

我已经使用 Angular 4 创建了一个 Web 应用程序。在那之后，编译主包大小超过 700 KB。主包中有一个叫做$_gendir和应用程序的东西（在源地图资源管理器中看到它）。有人可以解释一下吗？

注意：当我使用 --no-aot 时，主包大小仅为 426 KB。

使用的命令： ng build --base-href /rising/ --aot --prod --build-optimizer --vendor-chunk=true --sourcemaps --named-chunks --output-hashing=false

我已经构建了一个自定义组件装饰器，如此处所述Inheritance of Angular 5 components with overrideing the decorator properties。

正在使用：

它在开发模式下完美运行，但是当我尝试构建它时，出现以下错误：

我尝试添加 CUSTOM_ELEMENTS_SCHEMA 和 NO_ERRORS_SCHEMA，但没有帮助。关于解决方案的任何想法？

我编写了一个带有一些服务的角度库，以便在不同的角度应用程序中使用它。在没有 --prod 的情况下一切正常，因此在 Angular 应用程序中没有 AOT 编译。

使用 ng-packagr 以及 cli 以及一些不同的 yeoman 生成器生成库每次都会产生相同的错误。此外，我尝试了不同的 ng 版本（5.xx、6.xx 和 7.xx）。但是在所有情况下，当我在应用程序的 app.module 中调用 LoggerModule.forRoot() 时，每次（使用 AOT）都会出现相同的错误：

我阅读了很多关于这个主题的文章，在 tsconfig 中尝试了不同的 angularCompilerOptions。还有其他想法吗？该模块在没有 AOT 的情况下工作正常（但这不是我们的选择）......

库的 NgModule：

应用程序的 NgModule：

在从 Angular 6 升级到 7 时，一切似乎都很好，除非我输出到 aot。我可以使用 cli 成功创建一个构建，并且我的一个延迟加载的模块可以工作，而其他的则不能，因为它会得到一个非常奇怪的异常。

在其中放置一个断点让我发现一个数组被传递到模块工厂而不是构造函数中。这就是打破aot的原因。罪魁祸首如下图

但是，我无法弄清楚这 5 个声明是如何被注入的，它们应该只被注入 ReactiveFormsModule，而不是它们自己。我只是简单地添加了它们并将它们导出到一个延迟加载的模块中，它们在 JIT 中运行良好。有人遇到类似问题或找到解决方案吗？代码片段示例将很快出现 - 因为我必须在公共项目中重现它。

我正在尝试使用与 JIT 编译完美配合但在使用 AOT 时引发错误的自定义组件动态填充表。

我也尝试在 ViewChildren() 装饰器上使用 forwardRef ，但它似乎没有任何效果。我的猜测是用于选择某些 DOM 元素的服务在那个时间点不可用。

有什么线索或建议吗？

错误：

代码：

模板：

如果您尝试在装饰器中进行调用，Angular AoT 编译器会抛出错误。

考虑以下代码：

如果您尝试使用 aot 标志 (--prod) 构建它：

编译器说：

有人可以从技术上解释为什么编译器不能支持吗？

PS：此代码在 JiT 模式下工作。

当我在 Angular 中进行 aot 构建时，出现错误“FormGroup”类型上不存在属性“第 1 节”。我添加了

在组件中我有

但是我收到错误“FormGroup”类型上不存在属性“第 1 节”。在 aot 构建中。但总的来说，它可以正常工作。

我正在尝试将特定于环境的变量传递给我自己的库。我正在通过 forRoot() 传递它。对于硬编码的值，我可以传递它，但对于环境值，当我将它传递给库时，它显示为未定义。

rootUrl 是在我在@NgModule 上放置断点时定义的，但是当我在库中放置断点时 rootURL 是未定义的。

我正在使用 Angular 5。我尝试用谷歌搜索问题，但找不到任何解决方案。

这是一个常见问题吗？传递此环境变量的另一种方法是什么？任何帮助表示赞赏:)

更新：我发现它为什么不能正常工作。它是用 --aot 构建的，所以当我调试时，我能够看到 rootUrl 的值，因为我在运行时检查它，但它在编译时将它传递给我的库（具有未定义的值）

我现在正在尝试这种可能的解决方案。如果有人有任何其他潜在的解决方案，我将不胜感激

解决方案：我的解决方案是将变量作为函数传递，因为环境变量是编译的。这是它必须在运行时执行它们。

我刚刚创建了如下函数并将引用传递给库

假设我们进行 API 调用并在 String 中获取一些 HTML DOM。内容以不带角度的 HTML 形式出现，因此我必须首先将其转换为我想要的 Angular，然后将其编译为 Angular。

示例 API 响应：

我正在对其进行转换以获取所有 Anchors<a href="x"></a>并将它们转换为具有输入和输出的角度组件，这些组件将被注入父容器并一起解析，例如：

angular-anchor包含一个 click 方法，该方法从这些组件外部但在 angular 内部（来自服务）执行代码。

通过[innerHTML]在父容器中使用，其中转换是由管道完成的，就像：

内部的 Angular 组件不会被加载，整个工作只是由管道转换中包含的 safeHTML 解析的原始 Angular。

为了解决这个问题，我使用了 ng-dynamic 库，但它已经过时并且与 AOT 编译不兼容。尽管如此，我还是设法将它与 JIT 编译一起使用，但这对生产不利，效率也低得多。

这种方法的示例，“parentDIV”是一个标准的 HTML 标记：

context包含新组件内部所需的所有依赖项，例如我在“angular-anchor”中使用的第三个服务

从这一点开始，我阅读了几篇关于Angular Elements或Dynamic Components Injector的文档，但我无法在我的应用程序中使用它。

使用我刚才提到的这些方法或任何其他方法来使用 AOT 提供的自定义角度组件有什么好的方法吗？

提前致谢。如果需要，请向我询问更多详细信息。

我已经使用 API 模块在 Angular 7 项目中设置了 AWS Amplify 以实现 GraphQL 功能。

使用 ng serve 服务时，一切似乎都有效。

但是，如果我使用 AOT 编译 - 例如对于生产构建，那么我不会收到任何编译错误，但在运行时我会看到以下错误

ERROR 错误：未捕获（承诺中）：ReferenceError：未定义 API

我已经隔离了这个问题，因为 AOT 是它发生的触发器，但不确定它是 Amplify 问题还是我在 Angular 方面做的一些愚蠢的事情。

我做错了什么，我该如何解决？