问题标签 [angular-compiler]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1001 浏览

angular - Angular:库升级到 Angular9,演示应用程序的 ngcc 构建错误

我正在维护一个由 Angular Cli 生成的 Angular 库。在工作空间内有一个库和一个演示应用程序,这是从 angular-cli 创建的所有 Angular 库的标准架构。

目前我正在将我的库升级到 Angular 9 的新版本。

我将自动升级灵魂与ng update. 修复了一些迁移问题后(某些 API 已弃用)。该库可以成功构建。

但是我被以库作为依赖项的演示应用程序的构建阻止了。我有ngcc错误。经过一些在线研究,我知道了背景:https ://angular.io/guide/ivy#maintaining-library-compatibility ;Angular 9 的库构建失败

即使我了解ngcc我们现在需要它是什么以及为什么需要它,我仍然无法修复构建错误。

在我的库中,我也有以下模块:

这两个模块都在fotRoot方法中调用从其他模块导入的函数,如下所示:

这个函数只ModuleWithProvidersforRoot方法返回一个。我这里把函数抽象出来,因为这两个模块这部分的逻辑是一样的。

正如我所提到的,库本身已成功构建(基于 google Angular 团队的文档,Library 仍在使用旧的 View Eigine 而不是 Ivy 编译器)。但是演示应用程序无法构建并出现以下错误:

基于 google Angular 团队的文档:demo-app use Ivy compiler,这就是为什么ngcc来这里的原因。

我调整了DIYModuleWithProviders一段时间的类型,但无法解决。基于链接https://angular.io/guide/migration-module-with-providers,在 Angualr 9 中, ModuleWithProviders必须具有泛型类型。所以将其更改为ModuleWithProviders<any>,但它不起作用。

https://github.com/500tech/angular-tree-component/issues/721。有什么想法吗?

0 投票
1 回答
271 浏览

angular - 错误错误:未捕获(在承诺中):错误:未加载运行时编译器错误:未加载运行时编译器

我正在尝试使用 ng build --prod 来使用 AOT 编译。我不知道我做错了什么。

项目网址 - https://github.com/nishant1596/sampleAOT

请帮助,在此先感谢

0 投票
1 回答
1542 浏览

angular - 如何编译运行时生成的 Angular8 代码?

我在运行时创建 Angular 代码,特别是,我使用 SVG 库来创建包含 Angular 代码指令的矢量图形,(click)='myMethod()'这些指令反过来又调用我在 SVG 封闭组件中静态定义的方法。在运行时生成,我需要编译创建的模板并将其添加到组件中。我当时在这篇非常麻烦的帖子的帮助下使用 Angular 3 实现了这样的代码。我尝试在 Angular 8 应用程序中复制旧代码:

现在失败了

ERROR 错误:在 Compiler._throwError (core.js:38932) 处未加载运行时编译器

一方面,我不知道为什么会发生该错误。我在互联网上找到的所有内容都是关于延迟模块加载中的关键函数语法。另一方面,我想知道,如果以后有五个 Angular 主要版本,还有其他方法可以做到这一点。我读过关于Portals的文章,但它似乎是关于动态加载静态模板,而不是动态生成的未编译模板。期待有人指出我正确的方向。

Post Scriptum:为可以在 AoT 模式下提供针对 Angular v9 的基本运行代码片段的人添加一个赏金。它必须包含一个运行时编译的模板(例如,来自一个字符串变量),该模板包含相关组件中的方法调用。

0 投票
26 回答
147733 浏览

angular - Angular 9 - NGCC 失败并出现未处理的异常

在将依赖项升级到 Angular 9(并执行必要的代码更改)后构建应用程序会引发错误:

编译@angular/animations:es2015 为esm2015 编译@angular/animations:es2015 为esm2015 编译@angular/core:es2015 为esm2015 编译@angular/core:es2015 为esm2015
编译@angular/core:es2015 为esm2015
错误:worker 错误#5:TypeError:无法读取 null 的属性“文件名”

然后它继续抛出以下错误:

编译 @angular/core : es2015 as esm2015 编译 @angular/compiler/testing : es2015 as esm2015 编译 @angular/core : es2015 as esm2015
错误: 试图用一个ngcc 备份文件,但它已经存在,因此不写入也不备份 node_modules/@angular/core/core.d.ts。

此错误可能是因为两个或多个入口点重叠,并且 ngcc 已被要求多次处理某些文件。
您应该检查此包中的其他入口点并设置一个配置以忽略您未使用的任何入口点。

编译 @angular/core : es2015 as esm2015 发生未处理的异常:NGCC 失败。

0 投票
2 回答
515 浏览

angular - 构建后配置角度生产文件

我有一个 Angular 9 项目,它是应用程序套件安装程序 [Wix 安装程序] 的一部分。Angular 应用程序使用的设置之一是 API 的地址,它从某个可配置的地址获取数据。我知道我可以拥有许多角度环境文件,并且只需使用以下命令:

或者

这意味着对于每个潜在的 API 地址,我都需要进行新的构建并在命令之上运行。如何克服上述情况并在构建后配置输出二进制文件?

假设没有明确的方法来实现构建后的配置,我可以对生成的 main*.js 文件中的 API 地址进行“简单字符串替换”吗?会不会有什么副作用?

0 投票
2 回答
380 浏览

angular - Angular 配置或编译 JSON 资产

是否可以在 Angular 中或通过custom-webpack插件的帮助在将 JSON 资产复制到资产文件夹之前对其进行转换。我有一个 JSON 文件,我想先在其中转换一些值,然后再将其放入资产文件夹。我曾尝试使用,CopyWebpackPlugin但它似乎不适用于资产。

我想要做的是从 .json 中获取一个 JSON,src在编译期间替换该 JSON 中的一些值,然后将其放入dist/<...>/assets.

0 投票
0 回答
856 浏览

angular - 如何在 Angular 10 中使用文件替换

我正在做一个项目,据我所知;运行“ng run build --prod”时,文件替换不起作用。

这很重要,因为我想在将应用程序投入生产时删除 NgRx 开发工具。否则运行缓慢

![在此处输入图像描述

奇怪的是,如果我运行另一个自定义构建配置(“debug-without-devtools”),它实际上可以工作。

在此处输入图像描述

我可以通过在使用应用程序时尝试访问开发工具来证明它有效。

这就是我正在使用的:

任何帮助表示赞赏

谢谢

安德鲁

0 投票
1 回答
2907 浏览

angular - 如何让倒数计时器在 Angular 10 中工作

我正在尝试创建一个 Angular-Nativescript 共享应用程序,该应用程序在计时器达到零时执行某些功能。我还希望在更改结束值时重新启动/重置计时器。

在 Angular 9 中,此功能与angular-countdown-timer包一起使用。

但是,自从升级到 Angular 10 后,我无法解决ModuleWithProviders需要一些泛型类型的问题。

我也尝试过使用angular8-countdown-timer,它在页面加载时设置最终值但之后不起作用(即使组件中的最终值正在更改)。

我还尝试了一些较旧的软件包,例如ngx-countdown-timer,但没有任何乐趣,因为它们通常会违反ModuleWithProviders限制。

我试过使用ModuleWithProviders<any>ModuleWithProviders<unknown>正如我在类似帖子中看到的那样,但编译器只是在我面前笑了。

任何上述任何帮助,甚至是联系作者的方式都将不胜感激。

0 投票
2 回答
866 浏览

angular - Angular 中动态编译的延迟加载动态路由导致“不安全评估”错误

在应用内容安全策略后,在 Angular 应用程序的 index.html 文件中,应用程序给出了“unsafe-eval”控制台错误,如下所示 -

当我尝试动态构建模块时,使用Compiler类中的compileModuleAsync()方法会导致此错误。

如果我不使用内容安全策略,那么应用程序可以正常工作并且不会给出这样的控制台错误。以下是政策详情——

根据调用堆栈的观察,Angular Framework 的以下函数部分使用new Function()表达式并导致安全问题 -

这是我试图构建用 loadChildren 编写的配置的 routes.json -

以下是构建模块的代码 -

另外,我正在为这个编译器使用 JitCompilerFactory -

如果有任何其他细节,请告诉我。任何建议都会非常有帮助。

以下是 stackblitz 的链接,此问题可重现 https://stackblitz.com/github/HimanshuGoel/unsafe-eval-issue?file=src%2Findex.html

在此处输入图像描述

如果我删除此 CSP,它会正确渲染 -

在此处输入图像描述

0 投票
1 回答
224 浏览

angular - Angular 环境文件没有及时交换

我正在使用 Angular 9,查看引擎编译器。

我有 2 个文件用于存储环境值:

环境.ts

environment.prod.ts

这是我的angular.json配置的一部分,它在为生产环境构建应用程序时将 environment.ts 与 environment.prod.ts 交换:

如果第三方服务应该或不应该在开发人员模式下运行,我正在使用环境变量来配置它。但是,在生产中(使用 --prod 标志构建时),它无法正常工作。经过一番调查,我们发现第三方服务是从environment.ts而不是从environment.prod.ts获取价值。

这是进行配置的app.module.ts的精简版本:

后来在运行时测试 Angulartics2 第三方服务确实收到了错误的值:

为什么在AppModule's 的@NgModule装饰器函数中接收到错误的环境值,但是 - 在AppModule's中的正确环境值constructor和稍后在运行时执行的服务?是否在编译器交换环境文件之前执行@NgModule()装饰器函数?AppModule