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?

Sanket · Accepted Answer · 2016-08-06 08:04:54Z

0

Try adding below line in your main AppComponent-

  precompile: [Page1Component, Page2Component .... ]

See if this helps.

answered Aug 6, 2016 at 8:04

Sanket

20.2k10 gold badges74 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adi99 Over a year ago

Thanks! adding precompile line goes away warning but on first loading of application I always see PageNotFound component. Am I missing any configuration?

Sanket Over a year ago

You can set default route like this- { path: '', redirectTo: '/page1', pathMatch: 'full' } This will load your page1 by default.

Community · Accepted Answer · 2017-05-23 12:32:29Z

0

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.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Aug 6, 2016 at 8:04

Jack Guy

8,5538 gold badges61 silver badges88 bronze badges

1 Comment

Adi99 Over a year ago

Thanks! adding precompile line goes away warning but on first loading of application I always see PageNotFound component. Am I missing any configuration?

Collectives™ on Stack Overflow

How to handle precompile array warning using simple router in angular2

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related