问题标签 [angular-compiler]

我正在观看Angular Compiler 4.0-TOBIAS BOSCH并且在视频的 1:30 突然有人说AST is transformed into typescript code if we use AOT compilation or javascript code if we use JIT compilation。编译过程中的视频快照。现在我非常困惑引擎盖下到底发生了什么？(.ts) 是否首先由 typescript 编译器转译为 js，然后 angular 编译器发挥作用，还是 angular 编译器完成这项工作，然后 typescript 编译器发挥作用？我经历了这个角度编译器“编译”了什么？ 但显然我的疑问还不清楚？谁能帮我解决这个问题？

目前我正在使用以下版本：

在使用ng-packagr ( )将我自己的库与一些组件打包后"ng-packagr": "^1.6.0"，我将在我的应用程序上创建的文件添加到 node_modules 文件夹中，但是当我尝试使用ng serveor运行应用程序时ng serve --aot=false，出现此错误：

TypeError 中的错误：无法读取未定义的属性“成员”： 出现错误的图像

创建的库上的版本和使用该库的应用程序是相同的，并且似乎与打字稿版本有关。

我还尝试将库与其他 typescript 版本（如 2.4.2）打包（该版本对于 angular 5 最稳定）并使用该版本运行应用程序，但它不起作用。

这是我要打包的库中的 package.json：

这是使用该库的应用程序中的 package.json：

提前致谢。

我有来自后端的 HTML 元素字符串，元素上有自定义指令。

例如：

我想将其呈现为 HTML，所以customDirective请参与其中。

我在没有 -aot(just ng serve)的情况下使用了几个解决方案

但是 -aot( ng serve -aot) 或生产构建 ( ng build -prod)没有任何效果

1. 使用 [innerHTML] 指令

正确呈现 HTML 字符串，但这从元素中清除了指令。

2.动态加载组件

我尝试了这个解释清楚的解决方案 这在没有 -aot的情况下工作

但是当我使用 -aot （或在生产版本中）运行时出现此错误：

“没有找到 RuntimeComponentModule 的 NgModulele 元数据”

3.动态加载不同的组件

我尝试了另一个解决方案 这也可以在没有 -aot 的情况下工作

但是当我使用 -aot （或在生产版本中）运行时出现此错误：

未加载运行时编译器

4.尝试解决#3中的错误

为了解决这个问题，我以这种方式加载了编译器并用它来创建一个组件。

这在没有 -aot 的情况下也有效

使用 -aot（或在生产构建中）运行时出现此错误：

已创建具有不同配置的平台。请先销毁它。

任何人遇到类似的问题，请在这里帮助。

我也经历了动态组件加载器 ，但它只将数据动态传递给已经定义的组件。

在这里，我希望使用动态模板为我从后端获取的字符串动态创建组件。

我正在使用 rollupjs 编译我的第一个角度库，我需要你的帮助:)

目前我有这样的结构：

我的 component1.scss 看起来像这样

我的 variables.sccs 看起来像：

我的 rollup.config.js 看起来像：

但是当我执行我得到这个错误：

我尝试从node-sass添加导入器，但老实说，我不知道如何使用它将所有内容编译到 css 中，然后将其注入到我的 js 中（我实际上可以使用 rollup-plugin-angular 将 scss 注入到我的模板中，但是我不知道如何编译scss）

任何帮助、提示或建议将不胜感激:)

因为我想@angular/service-worker在生产模式下加载我的 only，所以我在我的 webpack 配置中添加了以下内容：

但是，如果我尝试将其用作

然后它在开发模式下按预期工作（即，如果我与它相等，'dev'则使用它而不是其他方式），但在生产模式下，服务工作者永远不会加载，并且没有编译时或运行时错误。此外，如果我将其记录到控制台，则该值true符合预期，如果我设置了enabled:true.

我在我的 webpack 配置中使用它

I have a question regarding angular-tree-control usage, why {{node.label}} in below code is not binding successfully... For example, i have a custom node template like below:

Here the {{node.label}} binding is not working, how can i make it binding.

I have created a simple plnkr to make it clear:

https://plnkr.co/edit/WdnJhmuZtibU0AyiDU3s?p=preview

Question:

In plnkr 'scripts.js' line 8, why {{node.label}} is not binding well.

I have used angular-tree-control a lot in our project, in some scenarios we want have some dynamic percentage value in front of the node icon. That's why i need the binding here.

我正在研究一个网格组件，该组件具有将显示为按钮的操作数组

当我尝试这个时，我收到以下错误

考虑以下模板：

连同这个 TS 级：

既不name也不doLogin()存在。它仍然可以编译并运行而没有错误。只有当我尝试单击按钮时，才会收到错误消息doLogin is not a function in the browser's console。

我知道，这种行为（运行时错误）主要是由 Javascript 设计的。不过，我希望在编译时显示尽可能多的错误。使用 Typescript 完成了大部分工作。

但是，属性绑定似乎没有在编译时进行评估。在我看来，Angular-Compiler 应该能够做到这一点。我尝试将fulltemplatetypecheck设置为 true，但这似乎没有奏效。ng serve用,ng build和尝试过ng build --prod。

有没有办法在编译时检测不存在的属性绑定？如果不是，这是预期的行为吗？

我正在使用 Angular 5.2.0、Typescript 2.5.3 和 Angular CLI 1.6.4

在从 webpack2 迁移到webpack4以及从 Angular4迁移到Angular5的过程中，我遇到了 webpack 编译的奇怪错误（./node_modules/.bin/webpack-cli）：

无法解析模块 @angular/core 中的错误

调试 webpack ( node --inspect-brk ./node_modules/.bin/webpack-cli) 得到错误堆栈跟踪：

但不幸的是，它仍然没有给出提示。

这是package.json 依赖项。

在 angular repo上报告了这个问题。

我正在尝试加载从后端收到的 HTML 模板。此模板包括自定义管道，并且应填充从不同 Web 服务接收的数据。这是当前如何设置的示例。

理想情况下，我希望接收模板并将其设置在 person-info.component.ts 中，因为我在该组件中拥有该 HTML 的所有必要代码。我开始遵循此处解释的过程https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e并提出以下内容。

人员信息.component.ts

这是收到的 HTML 代码片段

个人信息.component.html

不幸的是，我在尝试这种方法时遇到了问题。主要是绑定Angular语法。我收到如下错误。

我目前在 Angular 4

我试图完成的总体目标是能够根据用户可能拥有的特定安全角色呈现内容。从我所做的研究来看，这似乎是最好的方法，但如果另一种方法更适合这种情况（即使它在较新版本的 Angular 上），请随时告诉我。