问题标签 [angular2-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 回答
2537 浏览

angular - 带有 templateUrl 的 angular2 动态组件的“无法读取 url”错误

试图从这里修改灵魂。它工作正常,但是如果你在组件中将模板更改为 templateUrl,它应该动态加载,你会得到一个错误:“没有提供 ResourceLoader 实现。无法读取 url ...”。

plunker上的实时示例。任何想法如何解决这一问题?

0 投票
1 回答
83 浏览

angular - 遇到动态声明时,compiler-cli 抛出错误

所以我来到了一个相当大的项目,这个项目的开发理念是,随着 Angular 升级到完整的 2.0 版本,它应该启用 AoT 编译,最后我从 Angular 获取所有 API 并准备好去做,或者看起来是这样。 ..

首先,项目在带有 Angular 2 和 Typescript 2.0.2 的 JiT 模式下运行得非常好,但在 AoT 中却不是这样。

经过大量研究后,我发现问题在于我的声明/提供者/入口组件列表是动态聚合的 - 这就是当应用程序拆分为许多子模块时发生的情况,每个子模块都可以向这些列表中添加一些内容,如这个需要。当我尝试做类似的事情时: @NgModule({ declarations:[ configuration.declarations ] }) 我收到Error encountered resolving symbol values statically.

如果我在 JiT 模式下输出聚合值并在此处手动插入所有这些条目的静态列表configuration.declarations,它会突然开始工作。

所以最大的问题是 - 什么鬼?!为什么它不起作用以及如何克服这个问题?

就像手动制作具有单个文件中列出的所有子组件需求的大型应用程序一样,会大大破坏良好的代码设计,我最好不要相信已经证明非常擅长制作合理的编码布局的 Angular 团队会暗示这是唯一的选择。

0 投票
1 回答
1253 浏览

angular - angular2中的递归动态模板编译

我的一些工作基于此处描述的相同问题:

使用 Angular 2.0 编译动态组件的动态模板

如何使用/创建动态模板来使用 Angular 2.0 编译动态组件?

可以在此处找到上述问题中描述的工作 plunker 。

如果动态细节试图创建另一个在模板中使用动态细节的动态视图,则会出现问题。如果我尝试这样做,我会得到以下异常:

'dynamic-detail' 不是已知元素: 1. 如果 'dynamic-detail' 是 Angular 组件,则验证它是该模块的一部分。

这很容易通过更改 plunker 中的逻辑来创建输出“ <dynamic-detail></dynamic-detail>”的动态模板来重现。

在文件“ app/dynamic/template.builder.ts ”中,我更改了以下代码:

当发生这种情况时,我遇到了上面的异常。显然,当它以递归方式完成时,编译器并不熟悉动态细节。

我试图将 DynamicDetail 添加到不同模块中的导入中,但没有任何运气。也许这不是解决方案的一部分。

0 投票
1 回答
371 浏览

angular - Angular 2 编译器 (ngc) 是否适用于 Typescript 定义文件?

构建面向 Windows 10 UWP 的 Ionic 2 应用程序。在我的代码中,我直接访问 winrt API,就像这样

var localStorage = Windows.Storage.ApplicationData.current.localStorage;

使用 tsc 编译可以,但是当我使用 ngc 编译应用程序时,它会引发错误Cannot find namespace 'Windows'

显然,Angular AOT 不会知道有关 winrt Api 的任何信息,因为它不在 UWP 的上下文中运行,但我认为这就是 Typescript 定义文件的用途。

但是我该如何解决这个问题?我认为也许包括 Typescript 定义文件可以解决这个问题,但 Typescript 编译得很好。

这是我的项目 typings.json 文件

0 投票
1 回答
777 浏览

angular - Angular2 SystemJs,使用 Gulp 提前编译

任何人都可以指导如何使用 Gulp 提前编译使用 SystemJs 的 Angular2 项目。我的意思是自动化https://angular.io/docs/ts/latest/cookbook/aot-compiler.html中提到的所有步骤

即生成 NgFactories、Treeshaking 和捆绑?

0 投票
1 回答
1193 浏览

angular - Typescript 2.1 与 Angular 2 编译器相结合,无法编译项目文件(无输出)

使用以下打字稿和角度编译器配置:

tsconfig.json

/compiled 目录仅包含 /node_modules/@angular,而缺少所需 ngfactory 文件的 /app 目录。编译以静默方式结束,没有错误也没有输出。

它适用于 Typescript 2.0,但我想在针对 es5 时使用 2.1 来支持 async/await,从而消除使用 babel 的额外编译步骤。

[编辑]

这只发生在Typescript 2.1.0-dev.20160907和之后,也就是实现异步/等待支持的时候。我猜这是该版本中发生的变化之一ngc;2.1.0-dev.20160906 仍然有效。

[编辑2]

如果有人尝试使用ngctypescript 2.1,如果它适合你,你能留下简短的评论吗?这至少会告诉我问题是否与我的配置有关。

0 投票
1 回答
7081 浏览

angular - Angular 2 提前编译中的未知编译器选项“angularCompilerOptions”

我正在尝试在这个Angular 2 项目中使用AOT编译器。执行命令时出现错误:不是函数:。如何解决这个问题?TypeError: this.compiler.compileModules"node_modules/.bin/ngc" -p tsconfig-aot.json

重现步骤:

  1. 克隆这个仓库:https ://github.com/AngularClass/angular2-webpack-starter

  2. 安装编译器-cli(2.1.2 版): npm install @angular/compiler-cli --save

  3. 从中删除src/app/+detail目录和detail路由器src/app/app.routes.ts(我这样做是因为"node_modules/.bin/ngc" -p tsconfig-aot.json输出错误can't resolve module src/app/+detail/index.ts from src/app/+detail/index.ts:)

  4. 创建tsconfig-aot.json

    {“compilerOptions”:{“target”:“es5”,“module”:“es2015”,“moduleResolution”:“node”,“sourceMap”:true,“emitDecoratorMetadata”:true,“experimentalDecorators”:true,“removeComments “:假,“noImplicitAny”:真,“suppressImplicitAnyIndexErrors”:真},
    “angularCompilerOptions”:{“genDir”:“aot”,“skipMetadataEmit”:真}}

  5. "node_modules/.bin/ngc" -p tsconfig-aot.json

0 投票
1 回答
1375 浏览

angular - Angular 2 内化(ng-xi18n 工具)无需代码编译

我使用ng-xi18n工具创建 i18n 文件。当我执行"./node_modules/.bin/ng-xi18n"messages.xlf 文件时创建。问题是所有代码都被编译了。js、js.map、metadata.json 文件已创建,我不需要它们。在没有 js、js.map 和 metadta.json 文件的情况下创建messages.xlf?

这是我的 tsconfig.json:

0 投票
5 回答
68622 浏览

angular - 在angular2中动态加载HTML模板

我创建了一个angular-cli包含AppComponent的项目,如下所示:

app.component.html作为

因此,当我用它构建它时,ng build会生成一些类似./dist/main.bundle.js的文件,其中的一些代码内容如下 -

这意味着,在构建时,compiler/bundle-er 正在读取 html 文件并将它们连接到生成的 js 文件中。

但在我的情况下,html 也是动态的,并且是从服务器端驱动的。可以说,我的模板文件不是 html,而是app.component.jsp,并且完全驻留在某个不同的服务器或文件夹上。

此外,该 JSP 文件有时会返回<h1>Good Morning, {{title}}</h1> ,有时<h1>Good Afternoon, {{title}}</h1>取决于当前服务器时间。

如何实现这个功能?

我的理解是,我需要定义某种加载器函数说:loadDynamicTemplate(template_url)

并且需要在组件装饰器模板属性上使用该加载器功能。在这种情况下,当生成 main.bundle.JS 时,它也会使用该函数。所以在运行时 Angular 会调用这个函数并通过 ajax 加载 HTML 并使用它。

更新 1

在这里,我发现了 SystemJS 和 Webpack 之间的一些区别。我还发现如果我们可以使用 SystemJS,我们可以在运行时加载 HTML 文件。所以我相信这个问题可以通过 SystemJS 配置来解决。但是为此,另一个问题开始发挥作用,尽管我相信这可能是一个单独的问题。所以我在这里发布了一个新问题来解决它。

可能如果这个问题得到解决,我会尝试使用 SystemJS,如果有帮助,然后在此处发布解决方案。

0 投票
1 回答
2470 浏览

angular - Angular 2:点击动态模板(动态组件)内的函数/方法

按照下面的例子:

如何使用/创建动态模板来使用 Angular 2.0 编译动态组件?

我开发了自己的模板生成器,它直接从变量中获取 HTML 内容。这是: http ://plnkr.co/edit/2Sv1vp?p=preview

现在,我的问题是......如果模板内容必须与组件交互,例如与点击时执行的功能......我该怎么做?

这是我的 app.component.ts

当我尝试点击“Sono il secondo template”时,它应该执行printSomething()函数,但我得到了这个错误: