In Angular2 RC4 how do I add components to the precompile array?

Question

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?

Answer 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}.

Answer 2

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

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

Answer 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.

Answer 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.

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