Why routing works only for first imported ponent after AppComponent (example code below: routing works only for "PageNonFound")? Also, I noticed error after adding routing to my project

Error

Error in ./AppComponent class AppComponent - 
inline template:13:42 caused by: 
Cannot read property 'split' of undefined

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './appponent';
import { PageNotFoundComponent } from './page-not-found/page-not-foundponent';
import { HomeComponent } from './home/homeponent';

const appRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', ponent: PageNotFoundComponent },
  { path: 'home', ponent: HomeComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Appponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css']
})
export class AppComponent {
  title = 'testing';
}

Appponent.html

<nav class="nav navbar navbar-custom navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" [routerLink]="['/home']">Test</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li><a [routerLink]="['/home']" [routerLinkActive]="active">Home</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

Vers:

angular-cli: 1.0.0-beta.28.3
node: 6.9.4
os: darwin x64
@angular/mon: 2.4.9
@angular/piler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/piler-cli: 2.4.9

Why routing works only for first imported ponent after AppComponent (example code below: routing works only for "PageNonFound")? Also, I noticed error after adding routing to my project

Error

Error in ./AppComponent class AppComponent - 
inline template:13:42 caused by: 
Cannot read property 'split' of undefined

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.ponent';
import { PageNotFoundComponent } from './page-not-found/page-not-found.ponent';
import { HomeComponent } from './home/home.ponent';

const appRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', ponent: PageNotFoundComponent },
  { path: 'home', ponent: HomeComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.ponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent {
  title = 'testing';
}

App.ponent.html

<nav class="nav navbar navbar-custom navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" [routerLink]="['/home']">Test</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li><a [routerLink]="['/home']" [routerLinkActive]="active">Home</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

Vers:

angular-cli: 1.0.0-beta.28.3
node: 6.9.4
os: darwin x64
@angular/mon: 2.4.9
@angular/piler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/piler-cli: 2.4.9

• javascript
• angularjs
• angular
• typescript
• url-routing

• share your app.ponent.html – elmiomar Commented Mar 5, 2017 at 23:06
• @Omarllias done – Evan Bor Commented Mar 5, 2017 at 23:10

1 Answer 1

use routerLinkActive="active"

or

[routerLinkActive]="['active']"

and change order of routes

const appRoutes: Routes = [
  { path: 'home', ponent: HomeComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', ponent: PageNotFoundComponent }, 
];