I've developed a simple application with Angular 2 RC5. All it does is render a search page and allow you to click on a record to edit it. Simple stuff. I generated the app using the latest version of Angular CLI from its master branch. Since this version doesn't support routing, I had to create my own using the router guide.
Unfortunately, when the initial page loads, I see the following error in my console.
Error: Cannot match any routes: '''
Here's what my app.routes.ts
file looks like:
import { Routes, RouterModule } from '@angular/router';
import { SearchComponent } from "./search/index";
import { EditComponent } from "./edit/index";
import { AppComponent } from "./app.component";
const appRoutes: Routes = [
{ path: 'search', component: SearchComponent },
{ path: 'edit/:id', component: EditComponent }
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes);
It's then referenced in app.module.ts
as follows:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http'
import { routing, appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';
import { SearchComponent } from './search/search.component';
import { EditComponent } from './edit/edit.component';
@NgModule({
declarations: [
AppComponent,
SearchComponent,
EditComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
providers: [appRoutingProviders],
entryComponents: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
I tried adding a path for '' in app.routing.ts
, but this causes my page to render the AppComponent
twice:
const appRoutes: Routes = [
{ path: 'search', component: SearchComponent },
{ path: 'edit/:id', component: EditComponent },
{ path: '', component: AppComponent }
];
In index.html
, there is HTML to load the AppComponent
:
<app-root>Loading...</app-root>
And in app.component.html
, I have a router-outlet to load the pages.
<!-- Routed views go here -->
<router-outlet></router-outlet>
SearchComponent
, it works, but all my references to the search route fail. I suppose I could update them, but it seems wrong. Kamil: I want to see theAppComponent
like I did with Angular 2 RC1. I have<a routerLink="/search" routerLinkActive="active">Search</a>
in app.component.html to get to the search component.