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?

Günter Zöchbauer · Accepted Answer · 2016-08-30T19:29:21.767

22

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

edited Aug 30 '16 at 19:29

answered Jul 01 '16 at 11:42

Günter Zöchbauer

623,577
216
2,003
1,567

That seems to be working, but to make sure I got this right, if this is my app component: `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: '', directives: [ROUTER_DIRECTIVES], precompile: [FrontpageComponent] }) export class AppComponent{}` I need to import and add every component that I route to in the array? – Jeeveegee Jul 01 '16 at 11:55
I can't claim that I fully understand this topic even though I read https://docs.google.com/document/d/1VRNljdv-6QDY4_I0xx3DHd-IZ19QlthheMLdGGKAAzM/edit#heading=h.s4bm1zs9qwi7 ;-) – Günter Zöchbauer Jul 01 '16 at 12:03
1

That doc helped explain it, I understand a bit better now. Thanks. – Jeeveegee Jul 01 '16 at 12:09
7

I was seeing this in 3.0.0-beta.1, but after upgrading to 3.0.0-beta.2 I don't see any warning in the console log. – Naveed Ahmed Jul 04 '16 at 23:07
1

@NaveedAhmed same here. Is `precompile`ing still an appropriate entry to include in a component decorator? – marked-down Jul 18 '16 at 23:41
I can't believe how badly designed this is. If Angular 2 can warn you that you should be doing something: WHY CAN'T IT DO IT ITSELF? Now I have dependencies all over the place that Angular 2 ALREADY knows. What a dreck – Jochen Bedersdorfer Aug 08 '16 at 01:26
This is work in progress and will change with the introduction of modules with the next updates. There are several similar requests and I'm sure they will do something about it but only after 2.0 release. – Günter Zöchbauer Aug 08 '16 at 05:40

score 3 · Answer 2 · answered Jul 14 '16 at 09:10

3

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

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

answered Jul 14 '16 at 09:10

AMRESH PANDEY

195
1
10

score 2 · Answer 3 · answered Aug 12 '16 at 06:06

2

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

answered Aug 12 '16 at 06:06

Sunil Kumar K K

79
1
1

score 0 · Answer 4 · answered Jul 05 '16 at 02:36

0

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.

answered Jul 05 '16 at 02:36

th-Kate

1

score 0 · Answer 5 · answered Aug 11 '16 at 14:43

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

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

5 Answers5

Linked