In Angular2 RC4 how do I add components to the pre

问题:

I just updated my Angular2 project to RC4 and the router is now sending out this warning message in the console when I open my application:

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.

I've tried to figure out what exactly I need to do to fix this but since documentation is sparse I can't find an answer. What is this precompile array and where can I find it or how do I add it?

回答1:

In newer router versions this shouldn't be necessary anymore.

<= RC.4

It's just an additional parameter to the @Component() or @Directive() decorator:

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

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

/**
* Defines the components that should be precompiled as well when
* this component is defined. For each components listed here,
* Angular will create a {@link ComponentFactory ComponentFactory} and store it in the
* {@link ComponentFactoryResolver ComponentFactoryResolver}.

回答2:

There is no need to define in directives. Use code below

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

回答3:

If you upgrade your "@angular/router": "3.0.0-beta.1" to "@angular/router": "3.0.0-beta.2" .then warning will be solve.

回答4:

As I've observed that if I've defined the component with the 'redirectTo' in route configuration then the component must be defined 'precompile' at the root app too.

回答5:

You have to add your component to the a precompile array on the meatadata of your app component in order to get rid of that message.

@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{}