Search code examples
angularangular2-cli

Angular 2 CLI route not displaying content of HTML

I created a new project with the Angular2 CLI, and also added a route called item. Now I try to reach the html page by calling the url http://localhost:4200/item

but it only displays the standard: app is working! text, instead off the content of the item page. I also tried http://localhost:4200/#item Same result.

I did not change any code, except in the item.component.html.

Any idea what I am doing wrong, should I maybe not use the CLI while it is in alpha ?

Thanks

Solution

  • It's a bit problematic to use the CLI especially with the new Router as it is both actively developed atm.

    The CLI is (atm) not able to handle the automatic routing creation properly. For now I use a workaround:

    Update your package.json to use the router version

    "@angular/router": "3.0.0-alpha.3"

    import the ROUTER_DIRECTIVES to your parent.component.ts like

    parent.component.ts

    import {ROUTER_DIRECTIVES} from '@angular/router';

    Where parent.component.ts of course is your most global app component. Don't forget to insert the ROUTER_DIRECTIVES to your directives array in the parent.component.ts to have the 

    <router-outlet></router-outlet>

    tag available.

    Then in the main.ts, import the provideRouter and RouterConfig to manually add it to the bootstraping like:

    //other imports
import {provideRouter, RouterConfig} from '@angular/router'; 
import {HomeComponent} from './app/+home/home.component';
import {LoginComponent} from './app/+login/login.component';

bootstrap(parent.component.ts, provideRouter([
    {path: '/home', component: HomeComponent},
    {path: '/login', component: LoginComponent},
])`

    I know it's kinda ugly but it worked for me and I couldn't find a way to use the native routing functionality but that might (hopefully) change while angular2 and the CLI is beeing further improved.