问题标签 [angular-compiler-cli]

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 回答
488 浏览

angular - 在 Angular 2 中动态加载组件需要 Traceur?

我的代码应该根据客户名称和设置加载一个组件,两者都是从后端作为字符串接收的。

我尝试使用编译器编译模块然后获取组件工厂,但是在尝试编译时,角度似乎需要我没有安装或引用的Traceur 。Angular 2 文档根本没有提到它。
Traceur 对模块的运行时编译是强制性的,还是我做错了什么?

  • Traceur 显然不在 /customers/zd/march/traceur,但为什么需要它呢?

代码(仅为动态加载部分,为简洁起见):
调用的失败结果compiler.compileModuleAndAllComponentsAsync(module)

正在加载的模块:

package.json,以防我遗漏/误用了一些角度参考:

system.js 加载器,以防我在这里遗漏一些东西:

tsconfig,以防问题在于应如何定义 typescript 编译器:

0 投票
1 回答
790 浏览

angular - AOT - 未找到加载错误 app.module.ngfactory

我正在尝试将 AOT 集成到我的 Angular 项目中,所以我按照Angular.io进行操作,运行以下命令后,AOT 文件夹和文件成功生成,没有错误:

但是当我在浏览器中运行应用程序时,我在控制台中收到以下错误:

我确信我的 AOT 文件夹中有 app.module.ngfactory。

这是我的 package.json 文件

这是 tsconfig-aot.josn :

0 投票
0 回答
1087 浏览

performance - Angular 4 启动性能

我们已经编译了 Angular 4 项目并与汇总捆绑在一起,并且没有延迟加载。在启动期间编写脚本大约需要 3 秒。我需要减少这个时间。我发现了启动时间少于 1 秒的 Angular 4 应用程序示例:http ://www.syntaxsuccess.com/bundling-demo-rollup#/demo/spreadsheet 。所以我相信可以减少我们的启动时间。下面是我们应用程序的跟踪。 痕迹

一些函数调用是可疑的:build、compileComponent 和 _compileTemplate。这是aot编译,仍在启动时构建和编译。我没有找到任何有用的信息。欢迎任何关于它如何发生或为什么它是正确的建议。

也欢迎任何有关如何改善启动加载时间的建议。

UPD

下面的来源选项卡 在此处输入图像描述

tsconfig-rollup.json

tsconfig.json

}

0 投票
1 回答
144 浏览

angular - 在 Angular4 库上运行 ngc 时,TsickleCompilerHost 出错

我目前正在以Angular Package Format描述的格式导出 Angular 4 组件库。为了简化这一点,我使用这个 Yeoman 生成器生成了一个默认设置。一开始一切都很完美,我可以生成一个可以导入另一个 Angular 应用程序的工作库。然后我在获取所有最新更改后更新了我们的库文件并尝试生成一个新包。但是,这次构建失败了,出现了一个错误,我无法链接到我获取的更改之一。

消息:

有人能指出什么会导致这个错误,以便我知道我应该寻找什么吗?

0 投票
2 回答
2325 浏览

angular - Angular AOT Compiler - TypeError: this.compiler.analyzeModulesAsync is not a function

I'm trying to follow the ahead of time (AOT) compiler instructions here:

https://angular.io/guide/aot-compiler

The project I'm working on has been developed using the quickstart seed, as described here:

https://angular.io/guide/setup

The project has been working fine without using the AOT compiler, but when I try to follow the instructions to get the AOT compiler working, I get the following error (this is on Windows 8):

My package.json file looks like this:

When I check what version of @angular/compiler I have installed, I get 4.2.2, which appears to be the most current version:

Viewing source on Github, I see that there is a function called analyzeModulesAsync in angular/packages/compiler/src/aot/compiler.ts:

https://github.com/angular/angular/blob/master/packages/compiler/src/aot/compiler.ts

However, when I do a grep on my node_modules folder for analyzeModulesAsync, I only see calls to that function. I don't see a definition for it. In fact, the class definition in the compiler.d.ts appears to have several differences from the compiler.ts file on Github.

I've tried "reinstalling" by deleting the entire node_modules folder and re-running npm install, and the error message is the same.

I do see a somewhat similar question here: Angular AOT failing at compilation (something with angular/compiler-cli), but I don't know enough about npm versioning to know what could be out of whack, or how to fix it.

Any ideas on whether I botched some instructions somewhere, or there is something deeper at work?

SOLUTION

The problem was with the mismatched versions of @angular/compiler-cli and @angular/platform-server in package.json. Once I changed those to "~4.0.0" to match the rest of the angular modules, deleted the node_modules folder and re-ran npm install, the compiler worked.

My working theory is that, because I cloned the quickstart two weeks ago, and ran this command: npm install @angular/compiler-cli @angular/platform-server --save from the tutorial yesterday, that's what lead to the version mismatch.

0 投票
1 回答
1982 浏览

angular - *.ngsummary.json 的目的是什么

我刚刚了解AOTngc。运行后ngc我看到很多*.ngsummary.json(在src文件夹中,在文件旁边*.ts)。

它们是干什么用的?

0 投票
0 回答
344 浏览

angular - Angular 2/4 编译使用 AoT 错误 - extendStatics

我有一个正在尝试使用 AoT 编译的应用程序。当我构建应用程序时,我收到以下错误:

C:\test\node_modules\@angular\compiler-cli\src\diagnostics\expression_diagnostics.js:14

扩展静态(d,b);

^ TypeError:对象原型可能只是一个对象或空:未定义

我知道有些东西适用于 JIT 编译但不适用于 AoT,所以我怀疑我的代码中可能有一些东西可能不适用于 AoT。请问知道这个错误的原因是什么吗?

Angular 和 TypeScript 版本

  • 角度版本:4.0.1
  • 角度编译器 CLI:4.2.5
  • 打字稿:2.3.4
0 投票
0 回答
53 浏览

angular - Angular2 编译器将模块“x”转换为“x/index”

我很难理解为什么@angular编译器会更改我的模块名称:

指令.ts

tsconfig.aot.json

然后我@angular/compiler使用clias运行ngc -p tsconfig.aot.json。我得到这个结果没有任何意义。

指令.js

有谁知道为什么会发生这种情况,或者如何解决这个问题。这使得无法Rollup解析这些模块。

角度编译器:v4.2.4

Angular 编译器-cli:v4.1.3

0 投票
1 回答
486 浏览

angular - Angular 编译器输出包含未定义 this 的脚本

我正在为 Angular 开发一个小型 npm 包,它基本上是一个指令,可以在您放置的元素上进行拖动/移动。我昨天确实设法发布了它(甚至认为这需要一段时间,因为这是我第一次将 angular 包发布到 npm)。我用来ngc编译 Angular 的代码。用于捆绑的汇总和用于缩小的 unglify。

现在,我想修复我发现的几个错误。我修复了它们,运行了编译器,运行了汇总等。但是汇总一直向我显示@angular/core未定义的内容,因此它将其视为外部依赖项,并且 - 我无法解决的问题 -this is undefined在我的两个文件中(https: //github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined)。无论如何,模块已经构建,我能够发布并使用它。问题是,当我尝试ng build --prod --aot使用包含该软件包的应用程序时,它会大喊:

我猜这是因为我上面写的警告。所以我试图修复它们,但没有成功。我至少能够通过添加到文件中来修复@angular/core警告,但仍然存在。我还意识到我编译的文件与昨天的不同。exports: ['@angular/core']rollup.config.jsthis is undefined

在几次提交之前编译的文件等:

今天编译的文件:

看起来装饰器的创建方式不同,我真的不知道我是否更改了tsconfig.json文件或任何其他配置文件中的任何内容。

我正在执行构建模块的步骤是:

  1. node_modules/.bin/ngc -p tsconfig.json
  2. node_modules/.bin/rollup -c
  3. node_modules/.bin/uglify ... (that's a long one)

我的文件结构是:

...我正在将输出编译到dist/应用程序根目录中的目录中。

包.json

tsconfig.json

rollup.config.js

如果有人阅读了所有内容并知道可能导致问题的原因,我将不胜感激。谢谢你。

0 投票
1 回答
134 浏览

angular - 如何处理 AOT 编译失败的 npm 包

我是 Web 开发的完全新手,现在我面临一个我不知道如何处理的问题。

我在我的 Web 应用程序中使用名为@uniprank/ngx-file-uploader( https://www.npmjs.com/package/@uniprank/ngx-file-uploader ) 的 npm 包。使用 JIT 编译进行编译时,它可以正常工作。但是,现在想把我的应用程序转为生产模式,所以我尝试了AOT编译,结果发现了一个问题。当我尝试使用 Angular 编译器编译我的应用程序时,这个包会中断,如下所示:https ://angular.io/guide/aot-compiler 。显示的消息如下:

在包的 Github 存储库的问题之一(https://github.com/uniprank/ngx-file-uploader/issues/3)中,我注意到这可能是包本身的问题。

在这一点上,我完全迷失了。我知道这是一个非常笼统的问题,但我不知道如何处理这个问题。我应该处理包装本身吗?如果是这样,我是否必须创建一个新的 npm 包以将其添加到package.json我的应用程序中并在执行命令时将其包含在我的应用程序中npm install

任何帮助,将不胜感激。谢谢。