1

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

jona jürgen
  • 1,789
  • 4
  • 22
  • 31

1 Answers1

1

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.

Mr.Moe
  • 507
  • 1
  • 5
  • 19
  • Tanks for your input, I tried to set up a project by hand following the angular2 quick start guide. I also tried to add the new router, but I get this error when I run npm start: node_modules/@angular/router/utils/tree.d.ts(7,27): error TS1110: Type expected. – jona jürgen Jun 15 '16 at 20:46
  • 1
    @jonajürgen as they released the RC2 of angular I need to dig into that stuff before I can provide information on that. If the workaround helped / worked for you I would appreciate an answer acceptance so others can use it too. I'll propably will try out the newest changes of angular 2 rather soon and will come back with more information as soon as I got them. – Mr.Moe Jun 16 '16 at 09:27