问题标签 [angular-aot]

将基于角度的应用程序 (angular-cli) 从运行良好的基于​​ JIT 的场景转换为基于 AOT 的场景。AOT-build 运行良好。

打开生成的网页时，我收到无法读取未定义错误的属性“无”。这些错误是由未定义的枚举引起的运行时

非常简化的例子（带有 2 个单独的文件）

action-type.enum.ts（单独文件中的枚举）

test.component.ts（单独文件中的组件）

eActionType 虽然被导入，但在 test.component.ts 中不可用。

可能的解决方案 1 - 同一文件中的枚举（不可取）

测试组件.ts

如果枚举在同一个文件中声明，它将在运行时正常工作。但这是不可取的，因为与可以导入多个位置的外部文件中的枚举相比，它会失去可维护性。

可能的解决方案 2 - 具有静态属性的类而不是枚举（也不可取）

action-type.enum.ts（单独文件中的枚举）

test.component.ts（单独文件中的组件）

也没有真正漂亮的解决方案，但至少在所有情况下都必须更改前枚举的声明，而不是消费者代码。

如何强制在外部文件中声明的正确枚举在运行时在其他位置可访问？

我有一个项目，其中几个前端共享一个公共库。

这些项目的模块依赖项由 npm 管理。

因此，在我拥有的每个项目的 package.json 中：

我使用“mylib”有两个目的：

• 分享一些课程；
• 共享共同的依赖关系（主要是角度）

到目前为止，我使用的是 npm 3.3.12，并且在运行之后npm install，mylib 的角度依赖项位于我的顶级项目的 node_modules 目录下。

所以，我有例如

现在，使用 npm 5.4.2，我有：

这在我的构建过程中导致了很多问题。它需要额外配置打字稿，通过添加如下指令：

在 tsconfig.json

当您必须对 AOT、汇总等进行类似配置时，这变得非常烦人......

我尝试使用 npm dedupe 来简化这一点。由于项目有很多依赖项，因此仅其中一个项目就需要超过 1000 万个：

有没有一种标准的、有效的方法可以像以前一样扁平化依赖关系？npm dedupe 可以完成这项工作，但需要花费大量时间，因此它不是一个可接受的替代方案。

我有一个来自后端的随机标记，应该在运行时使用 JiT 编译。此标记中使用的每个组件都已使用 AoT 预编译（添加到 entryComponents 块），因此在运行时具有组件工厂。当 JiT 编译提供的标记时，它会忽略现有的组件工厂并重新编译每个内部组件。
有什么方法可以将组件的 AoT 预编译工厂提供给 JiT 编译器，以仅使用动态模板编译一个动态组件？

应该编译的标记看起来像这样

任意嵌套（常规标记可以包含 1500-2000 个 DOM 节点）

ps 我正在使用这种方式通过 AoT 获取 JiT https://github.com/angular/angular/issues/15510#issuecomment-294301758然后就

我正在尝试在我的 Angular 项目上运行 AOT 编译，但是当我运行命令时

我收到以下错误：

我如何知道错误在哪个文件中以及错误是什么？

使用安装演示项目并按照此处的说明运行 node_modules/.bin/ngc -p tsconfig-aot.json 时出现以下错误：

我完全按照说明操作并且知道 AoT 文件在那里：

如果需要，这里是 Package.json 文件：

为什么ngc命令找不到文件？这是版本控制的问题吗？有已知的错误吗？谷歌没有向我透露任何信息。

此代码在使用提前编译的开发模式下失败。

如何注入控制台？

我一直致力于创建一个包含多个 Angular 和 NodeJS 项目的项目（所有 Typescript）。那部分进展顺利，但我认为如果我的源文件夹下有一个库文件夹，我的所有 Typescript 项目都可以共享项目模块，Typescript 接口，NgModules 等，那就太好了。但是，当我编译作为生产源，ModuleFactory 对实际模型的引用无法正确转换为我的“lib”NgModules。

我创建了一个演示并将其上传到我的 GitHub 作为示例： https ://github.com/ItsBaneDude/broken-external-links

我已将编译脚本作为 npm 脚本包含在

我忘了放 JiT 服务脚本，这样你就可以自动看到它在浏览器中运行，但我的意思是你可以ng serve --dev做到这一点。

那么，会发生什么：你尝试为生产而构建npm run build-aot，它说

真可惜。我想知道为什么。

运行 AoT 编译 npm run compile-aot...它“工作”...

好的，所以 AoT 素材在src/project-ng/aot. 如果我进入.../aot/app/app.module.ngfactory.ts，我会在第 10 行看到我的应用程序模块的导入语句。

import * as i1 from '../../app/app.module';

好的，很酷，它一直正确地返回../../app/app.module并成功解决。

但是，如果我再次进入 AoT 文件夹，除了在我的lib文件夹中，to ...aot/lib/modules/test/test.module.ngfactory.ts，我在第 10 行再次看到它，尝试导入我的 TestModule，但从./test.module

import * as i1 from './test.module';

但是，正如我们所知的理性的、具有自我意识和计算机意识的人类，它应该更像../../../../../lib/modules/test/test.module.

是的

公平地说，我最近才开始 Angular 开发，所以如果其中一些对我来说似乎很模糊，那可能是因为我很烂。但我希望吸得更少！如果有人愿意帮助我，我将非常感谢您借用的专业知识。

在我的应用程序中，一个配置对象从窗口注入到 Angular 应用程序。为此，我按照以下思路开发了一些东西：

代码

代表配置的模型

创建一个 InjectionToken

然后在 AppModule 中提供

最后将其注入组件中

AOT 编译

这很好用，但是现在我一直在尝试使用 AOT 编译来构建应用程序。当我使用 AOT 运行应用程序时，appConfig总是null. 我猜这与我注入可能与 AOT 不兼容的配置的方式有关。有没有办法让它与 AOT 一起工作？

我在 github https://github.com/angular/angular/issues/19154上找到了这个帖子，但是我不明白“改用工厂”是什么意思。

• 角度：4.4.4
• 网络包：3.8.1

更新

我已经像这样更新了 AppModule：

解决方案

我已经像这样更新了 AppModule：

我在useFactory回调中调用函数而不是传递函数。

我刚刚将我的 Angular 应用程序升级到版本 5，它运行良好。然而，一旦我升级了其他一些东西（比如@angular/cdk、@angular/material、typescript），我必须修复升级带来的一堆错误。ng serve当我运行或ng build --prod（JIT 和 AOT 构建）时，一切似乎都非常好——终端中没有任何错误，并且应用程序构建成功。然后应用程序localhost:4200按预期运行，但应用程序似乎没有引导，浏览器控制台中根本没有打印任何内容。

我可以做些什么来解决问题？我没有任何错误要调查，我觉得我只需要猜测出了什么问题。

有什么建议么？

直到最近几天，甜甜圈图一直对我有用。我不知道发生了什么变化，但由于某种原因，实际的甜甜圈在 AOT 构建后并没有出现，而是在开发模式下出现。我看到了 html 中的差异，但不知道为什么它们不同。我在甜甜圈中间绘制的图例和填充文本百分比仍然显示，它只是不可见的甜甜圈。我验证了传入的数据是完全相同的。超级诡异。不知道为什么突然就变了。这是工作和非工作 html 的图像。

在职的：

不工作：（在 AOT 构建之后）

注意工作的甜甜圈有一个 iframe，而不可见的甜甜圈没有。