How to handle precompile array warning using simple router in angular2

Question

I am trying to create simple router based application in Angular2 using typescript. My Angular2 version is 2.0.0-rc.4 and router version is 3.0.0-beta.1

My Routes configuration follows-

App.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { PageNotFoundComponent } from './Shared/pageNotFound.component';
import { Page1Component } from './Pages/Page1/page1.component';
import { Page2Component } from './Pages/Page2/page2.component';

const routes: RouterConfig = [

  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component },
  { path: '**', component: PageNotFoundComponent }
];

export const appRouterProviders = [
  provideRouter(routes)
];

While running application using npm start command I receives one warning (not error). Please refer this screen shot for warning

How do I overcome this warning?

score 0 · Answer 1 · edited May 23 '17 at 12:32

This appears to be a gap in the Angular 2 router documentation. Hopefully it will catch up soon. In the mean time, as described in this answer, the latest release of Angular 2 adds a precompile option to the @Component decorator. As per the warning's request, add this to your app component.

@Component({
  selector: 'my-root-app-component',
  template: '...',
  precompile: [PageNotFoundComponent, PlusWhateverElseThrowsAWarning, Etc]
})

Angular 2 has always precompiled components (it's what allows it to be so magical!) but with the new router it's required that you specify which components should be precompiled. Presumably this is being done to optimize performance ensuring that only components that are absolutely necessary are precompiled on startup.

Thanks! adding precompile line goes away warning but on first loading of application I always see PageNotFound component. Am I missing any configuration? — Adi99, Aug 06 '16 at 09:24

score 0 · Accepted Answer · answered Aug 06 '16 at 08:04

0

Try adding below line in your main AppComponent-

  precompile: [Page1Component, Page2Component .... ]

See if this helps.

answered Aug 06 '16 at 08:04

Sanket

19,295
10
71
82

Thanks! adding precompile line goes away warning but on first loading of application I always see PageNotFound component. Am I missing any configuration? – Adi99 Aug 06 '16 at 09:24
You can set default route like this- `{ path: '', redirectTo: '/page1', pathMatch: 'full' }` This will load your page1 by default. – Sanket Aug 06 '16 at 09:32

How to handle precompile array warning using simple router in angular2

2 Answers2