We have a few template files with their components. They also have their routes defined and called like:
<a routerLink="/Path-with-component"> Open page with component </a>
We also have plain and static .html files which strictly doesn't need any logic as such. So, we're calling them like:
<a href="Static-page.html">Open static page</a>
They always go through the router and the file is not called from the physical path.
So, we need them to not go through the Angular 2 router. How do we do this?
Ideally it should not go through router, unless you have defined a wild char route.
{ path: '**', component: <some component>}
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>
<hr />
<a routerLink="/home" >Home</a>
<a href='test.html' >Static page</a>
<hr />
<router-outlet></router-outlet>
`
})
class AppComponent { name = 'Angular'; }
@Component({
template: `<h1>Home</h1>
`
})
class HomeComponent { }
const appRoutes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
];
@NgModule({
imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ],
declarations: [ AppComponent, HomeComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Check this Plunker
Hope this helps!!