CODEWITHSUNDEEP
routesangularbootstrappingangular2-routing
m41n88
m41n88

Reputation: 5

Angular 2 auto-rooting to homepage on App-start

I am currently developing an App with Anuglar 2 and am trying to have it route to my homepage when the app is started.

I have a main.html and a main.ts file that are loaded on their own and have various nested views (if that is the right name for those) that can be loaded in, home is one of them.

The code at this point looks something like this:

import {[...], Router} from 'angular2/router';

[...]

@Component({ 
  selector: 'main', 
  bindings: [Router] 
})
@View({
  directives: [[...] Router],
  templateUrl: '[...]/main.html'
})

export class mainApp {

 private router;

 constructor(router: Router)
  {
     router.navigateByUrl('/home');
  }         
}

bootstrap(mainApp, [[...}, Router]);

[...] indicates some other code that should not matter for the issue itself.

Now with the code present, starting the App tosses the following error:

Cannot resolve all parameters for function Router(registry, parent, hostComponent) {(?, ?, ?). Make sure they all have valid type or annotations.

How can I fix it and get the routing/auto-navigation to work?

Late edit: Had some talks with teammates in the project about updating to angular 2 alpha 45... turns out that was actually the reason behind the issue. whole thing is working fine now with what I had to begin with (and some adjustments to what is imported).

Upvotes: 0

Views: 1845

Answers (3)

bug5layer
bug5layer

Reputation: 239

Create separeta routing module file(e.g. app-routing.module.ts) with next code:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Upvotes: 0

Jon Miles
Jon Miles

Reputation: 9893

You should use useAsDefault: true to set your default routing, like this:

@RouteConfig([
    { path: '/home', component: Home, as: 'Home', useAsDefault: true },
    { path: '/other', component: Other, as: 'Other }
])

On startup, assuming a requested path of '/' the app will launch your home component.

Upvotes: 1

r-park
r-park

Reputation: 21

To automatically redirect you can use redirectTo like this:

@RouteConfig([
    { path: '/', redirectTo: '/home' }
    { path: '/home', component: Home, as: 'Home' }
])

Check out this plunk: http://plnkr.co/edit/j45sVHrLPNSEHFss0HUE?p=preview

Upvotes: 1

Related Questions