In current version of ng-cli, the generation of route is not possible. but ng g comopnent will be enough
New file for defining the routes- app.routes.ts
Locate it in src/app root folder
import { provideRouter, RouterConfig } from '@angular/router';
import { HomeRouteComponent } from './routes/home-route';
...
const routes: RouterConfig = [
{ path: '', component: HomeRouteComponent },
{ path: 'events/:slug', component: EventRouteComponent }
...
];
export const appRouterProviders = [
provideRouter(routes)
];
Add it to app bootstrap under main.ts
So the app will recognise the routes configured
bootstrap(AppComponent, [
...
appRouterProviders,
...
]);
placeholder element that will show the route component inside.
open app.component.html
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<a [routerLink]="['/events/' + event.slug]">{{event.title}}</a>
Using in template:
bootstrap(AppComponent, [
...
provide(PLATFORM_DIRECTIVES,
{
useValue: [ROUTER_DIRECTIVES],
multi: true
})
...
]);
import { ROUTER_DIRECTIVES } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
ngOnInit() {
this.route.params
.map(params => params['id'])
.subscribe((id) => {
console.log(id)
});
}
constructor(private route: ActivatedRoute)