在 Angular2 RC4 中，如何将组件添加到预编译数组？答案

【问题标题】：In Angular2 RC4 how do I add components to the precompile array?在 Angular2 RC4 中，如何将组件添加到预编译数组？
【发布时间】：2016-07-01 11:40:32
【问题描述】：

我刚刚将我的 Angular2 项目更新为 RC4，当我打开我的应用程序时，路由器现在在控制台中发送此警告消息：

router.umd.js:2466 'FrontpageComponent' not found in precompile array.  To ensure all components referred to by the RouterConfig are compiled, you must add 'FrontpageComponent' to the 'precompile' array of your application component. This will be required in a future release of the router.

我试图弄清楚我究竟需要做什么来解决这个问题，但由于文档很少，我找不到答案。这个预编译数组是什么，我在哪里可以找到它或者如何添加它？

【问题讨论】：

标签： angular router

【解决方案1】：

在较新的路由器版本中，这不再是必需的了。

这只是@Component() 或@Directive() 装饰器的附加参数：

@Component({
  selector: '...',
  template: '...',
  directives: [FrontpageComponent],
  precompile: [FrontpageCmponent]
})

https://github.com/angular/angular/blob/6c5b653593eff19c5b9342b2cf0195aca49379cb/modules/%40angular/core/src/metadata/directives.ts#L968

/**
* 定义在
时也应该预编译的组件 * 此组件已定义。对于此处列出的每个组件，
* Angular 将创建一个 {@link ComponentFactory ComponentFactory} 并将其存储在
* {@link ComponentFactoryResolver ComponentFactoryResolver}。

【讨论】：

这似乎有效，但为了确保我做对了，如果这是我的应用程序组件：import { Component } from '@angular/core'; import { ROUTER_DIRECTIVES } from '@angular/router'; import { FrontpageComponent } from './components/frontpage/frontpage.component'; @Component({ moduleId: module.id, selector: 'app', template: '<router-outlet></router-outlet>', directives: [ROUTER_DIRECTIVES], precompile: [FrontpageComponent] }) export class AppComponent{} 我需要导入并添加我在数组中路由到的每个组件？
虽然我读过docs.google.com/document/d/… ;-)
那个文档帮助解释了它，我现在明白了一点。谢谢。
我在 3.0.0-beta.1 中看到了这一点，但升级到 3.0.0-beta.2 后，我在控制台日志中看不到任何警告。
@NaveedAhmed 在这里也一样。 precompileing 是否仍然适合包含在组件装饰器中？

【解决方案2】：

不需要在指令中定义。使用下面的代码

    @Component({
  selector: '...',
  template: '...',
  directives: [],
  precompile: [FrontpageCmponent]
})

【讨论】：

【解决方案3】：

如果您将 "@angular/router": "3.0.0-beta.1" 升级到 "@angular/router": "3.0.0-beta.2" 。那么警告将得到解决。

【讨论】：

【解决方案4】：

正如我所观察到的，如果我在路由配置中使用“redirectTo”定义了组件，那么该组件也必须在根应用程序中定义为“预编译”。

【讨论】：

【解决方案5】：

您必须将您的组件添加到应用组件的肉类数据上的预编译数组，才能消除该消息。

@Component({
selector:'my-app',    
template:`YOUR HTML
    <router-outlet></router-outlet>`
,styleUrls:['app/app.component.css']
,directives:[ROUTER_DIRECTIVES]
,providers:[YOURPROVIDERS]
,precompile:[YOURCOMPONENT]})
export class AppComponent{}

【讨论】：