angular2-routing

Error I am implemented nested routing in my app. when application loads its shows login screen after login its redirect to admin page where further child routes exist like user, product, api etc. now when I navigate to admin it byddefault loads user screen but further <routeLinks> not working and its shows this error. Error: Uncaught (in promise): Error: Cannot match any routes: 'product' After Click Product it shows this Code main.ts import { bootstrap } from '@angular/platform-browser-dynamic'; import { APP_ROUTER_PROVIDERS } from '../app/app.routes'; import { AppComponent } from '../app/app

I've started to write a new angular 2 project and I found that I installed 2 angular router: "@angular/router": "2.0.0-rc.1" , "@angular/router-deprecated": "2.0.0-rc.1" , I didn't find in the angular site how to use the new router. For example, what component do I need to import. So my questions are: Should I use the router-deprecated ? Is there any good doc for how to use the new router? Here is how to use the Angular 2 Router (RC1), compared to the beta (deprecated) one: Routes replaces RouteConfig . Inside your config there is a new syntax: {path: '/path', component: MyPathComponent}

I'm trying to show the navigation bar, once the user successfully do. For example: How To Change "showMenu" property in "AppComponent" inside the "LoginComponent"? Important: I am using routes. app.ts: @Component({ selector: 'app', template: `<div *ngIf="showMenu"> <fnd-menu-nav></fnd-menu-nav> </div> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES, MenuNavComponent] }) @RouteConfig([ { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true }, { path: '/welcome', name: 'Welcome', component: WelcomeComponent } ]) export class AppComponent { public

My scenario is as follows. I have a menu, with multiple options. Each menu should be shown depending on user permissions (already solved), most menu items are encapsulated as modules, and most of the modules are lazy loaded, so when a user clicks a menu item the first time, it loads (up to here everything works well), now my requirement is, in order to give a better user experience, I need to show activity indicator after user clicks a menu item while the lazy loaded module is loading. Up to this, I tried using canActive, canLoad, canActivateChild interfaces from Angular Router but with no

In Angular 1.x I can do the following to create a link which does basically nothing: <a href="">My Link</a> But the same tag navigates to the app base in Angular 2. What is the equivalent of that in Angular 2? Edit: It looks like a bug in the Angular 2 Router and now there is an open issue on github about that. I am looking for an out of the box solution or a confirmation that there won't be any. Emiel Koning If you have Angular 5 or above, just change <a href="" (click)="passTheSalt()">Click me</a> into <a [routerLink]="" (click)="passTheSalt()">Click me</a> A link will be displayed with a

In this exaple project with JWT authentication we se how to allow only authenticated users to some route: import { RouterConfig } from '@angular/router'; import { Home } from './home'; import { Login } from './login'; import { Signup } from './signup'; import { AuthGuard } from './common/auth.guard'; export const routes: RouterConfig = [ { path: '', component: Login }, { path: 'login', component: Login }, { path: 'signup', component: Signup }, { path: 'home', component: Home, canActivate: [AuthGuard] }, { path: '**', component: Login }, ]; I would like make step further and also indicate what

My routing in the angular2 apps works well. But i am going to make some routeLink based on this : Here is my routing: const routes: RouterConfig = [ { path:'home' , component: FormComponent }, { path:'about', component: AboutComponent }, { path:'**' , component: FormComponent } ]; And here is the links that i made: <ul class="nav navbar-nav item"> <li> <a routerLink='/home' routerLinkActive="active">Home</a> </li> <li> <a routerLink='/about' routerLinkActive="active">About this</a> </li> </ul> I expect that, when i click on them it navigates to the respected component, but they do not perform

app |-plugins |-plugin1 |-config.json |-plugin1.module.ts |-plugin1.component.ts |-plugin2 |-config.json |-plugin2.module.ts |-plugin2.component.ts As you can see above, I have "app/plugins" folder, which contains plugins. Each plugin will contain one "config.json" file which will tell some configuration including - { path: "feature1", moduleFile: "feature1.module", moduleClassName: "Feature1Module" } So what I want is, before application bootstrap it will scan the "app/plugins" folder and load all plugin configurations, and lazily register all module routes. For above example the route will

I know I can pass a parameter to routerLink for routes such as /user/:id by writing [routerLink]="['/user', user.id]" but what about routes such as this one: /user/:id/details Is there a way to set this parameter or should I consider a different URL scheme? Wojciech Kwiatek In your particular example you'd do the following routerLink : [routerLink]="['user', user.id, 'details']" To do so in a controller, you can inject Router and use: router.navigate(['user', user.id, 'details']); More info in the Angular docs Link Parameters Array section of Routing & Navigation Rıdvan Maybe it is really late