Menu
I have a simple App I have an issue when I try to navigate to a route. My main component:
@Component({
selector: 'my-app',
template: `
<ul class="my-app">
<li>
<a [routerLink]="['Login']">Login</a>
</li>
<li>
<a [routerLink]="['Projects']">Projects</a>
</li>
</ul>
<br>
<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
{
path: '/Login',
name: 'Login',
component: LoginFormComponent,
useAsDefault: false
},
{
path: '/Projects',
name: 'Projects',
component: ListProjectsComponent,
useAsDefault: true
}
])
export class AppComponent { ...
...
and I have a basic component
@Component({
selector: 'login-form',
template:
`
<button (click)="goToProjects()">Go To Projects!</button>
`,
directives: [ROUTER_DIRECTIVES],
providers: [LoginService, ROUTER_PROVIDERS]
})
export class LoginFormComponent implements OnInit {
...
goToProjects(){
let link = ['Projects',{}];
this.router.navigate(link);
}
..
}
I added the base Href to the main page 'index.html'
<head>
<base href="/">
</head>
When I click the button, the url in the address bar change but the view is not displayed, what may go wrong ?
727
I "accidentally" found this Answer for another question
bootstrap(
TestComponent,
[
ROUTER_PROVIDERS,
// must be listed after `ROUTER_PROVIDERS`
provide(LocationStrategy, { useClass: HashLocationStrategy }) // not interested in this just in the original answer
]
);
providers: [ROUTER_PROVIDERS] // <-- ** delete this line this is what worked!**
from LoginComponent
So, If Bootstrap class already declared "ROUTER_PROVIDERS" then I's required to remove them from every component, Some operation fails silently: navigation, or hashbang (as in the original answer) and maybe other things ..
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With