angular2-routing

I am using angular 2.0 final. I am trying to change the location of the router-outlet in the main app.component.html. The template is updating fine display wise except, the first time I use router.navigate the component won't display in the new router-outlet, and there is no error. The second and every time after I use router.navigate it works properly. example template of app.component.html <div *ngIf="authenticated() == false"> <h1>not logged in</h1> <router-outlet> </router-outlet> </div> <div *ngIf="authenticated()"> <h1>logged in</h1> <router-outlet> </router-outlet> </div> I'd like to

When I run this unit test: it('can click profile link in template', () => { const landingPageLinkDe = linkDes[0]; const profileLinkDe = linkDes[1]; const aboutLinkDe = linkDes[2]; const findLinkDe = linkDes[3]; const addLinkDe = linkDes[4]; const registerLinkDe = linkDes[5]; const landingPageLinkFull = links[0]; const profileLinkFull = links[1]; const aboutLinkFull = links[2]; const findLinkFull = links[3]; const addLinkFull = links[4]; const registerLinkFull = links[5]; navFixture.detectChanges(); expect(profileLinkFull.navigatedTo) .toBeNull('link should not have navigated yet');

I am a beginner in Angular 4/ Angular 2. I am building an app which consists of 1) static html files( aboutus.html, pricing.html, contact us.html etc), with corresponding css, js files 2) single page application with complex functionality The first part #1 does not need Angular at all as it's completely static. After login a user comes to #2. From the Angular tutorials that I went through, it seems I need to combine #1 and #2 together and still have to create components etc out of #1, which I feel is unnecessary. Is there a way, I can build this project such that I can use the static html as

I have an app that is divided into a authenticated section (InternalRootComponent) and an anonymous section (ExternalRootComponent). Everything works fine when I navigate to the routes explicitly, but when I go to the root (/), I don't get redirected. Also, the AccountsComponent is loaded for some reason. app-routing.module.ts: export const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', component: ExternalRootComponent, children: [ { path: '', loadChildren: './login/login.module#LoginModule' } ] }, { path: 'membership', component:

Getting this error when trying to use nestet route in Angular 4: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null TypeError: Cannot read property 'component' of null at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (http://localhost:4200/vendor.bundle.js:77976:71) at http://localhost:4200/vendor.bundle.js:77954:19 at Array.forEach (native) at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (http://localhost:4200/vendor.bundle.js:77953:29) at PreActivation

I want to use ActivatedRoute to get route params in a service like I would do in a Component. However, when I inject the ActivatedRoute object in a Service it contains an empty params variable I've created a plunker that reproduces the behaviour: http://plnkr.co/edit/sckmDYnpIlZUbqqB3gli Note that the intention is to use the parameter in the service and not in the component, the way the plunker is set up is purely to demonstrate the issue. Component ( test is retrieved): export class Component implements OnInit { result: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this

I'm creating an authentication system in angular2 with the idea that if a user that is not authenticated tries to navigated to a "protected" url, the system will redirect the user to the login page putting in the url a query param called "next" that will help the login system redirect the user back to where he wanted to be in the first place. login?next=my-redirect-url To protect my components, I'm using the decorator @CanActivate(isUserAuthenticated) in all of them. The isUserAuthenticated function is something as follows: function isUserAuthenticated( prevInstr: ComponentInstruction,

I need to be able to mock the activated route parameters to be able to test my component. Here's my best attempt so far, but it doesn't work. { provide: ActivatedRoute, useValue: { params: [ { 'id': 1 } ] } }, The ActivatedRoute is used in the actual component like this: this.route.params.subscribe(params => { this.stateId = +params['id']; this.stateService.getState(this.stateId).then(state => { this.state = state; }); }); The error I get with my current attempt is simply: TypeError: undefined is not a constructor (evaluating 'this.route.params.subscribe') Any help would be greatly appreciated

I've defined some routes in my main.ts file: const routes: RouterConfig = [ { path: '', component: HomeComponent }, { path: '', redirectTo: 'home', terminal: true }, { path: 'dashboard', component: DashboardComponent, canActivate: [LoggedInGuard] }, { path: 'login', component: LoginComponent }, { path: 'about', component: AboutComponent } ]; After successful login I want my authenticated users can be able to use specific routes (e.g. dashboard ). And without login they cannot access dashboard but they can be able to visit about,home,login I've managed to restrict users traversing the dashboard