angular2-routing

I write Angular2 app with router like /main /item . App have a lot of filter tables/trees/combobox. I want in /main page open bootstrap modal window (for example call @component modalFilterWindow) and switch content in this window like router. I can do it like <first-filter-content ngIf="currentFilter=='first'"> <second-filter-content ngIf="currentFilter=='second'"> .... but it can be made more beautiful ...modal window <router-outlet></router-outlet> and switch in modalFilterWindow content by routes, dont change state of main component. So one component must have own router, not affecting

i have serious problem with angular 2 (RC1) router. This code works: <a [routerLink]="['/anythingEvenNotExistingRoute']"></a> <router-outlet></router-outlet> This doesn't: //<a [routerLink]="['/anything']"></a> <-- without this line in html template <router-outlet></router-outlet> ...so it looks like angular router needs atleast one routerLink in html template.. thats pretty strange.. This is currently a bug present in the Angular 2 RC Router https://github.com/angular/angular/issues/8409 . As mentioned in the GitHub issue, to get around it you can either inject the router into AppComponent or

I am trying to set up authentication for my Angular 2 app with the new router. Someone suggested to try the following: constructor (private _router: Router) {} ngOnInit(){ this._router.subscribe( next => { if (!userIsLoggedInOrWhatever) { this._router.navigate(['Login']); } } ) } This problem however is that this results in the typescript error (app.component.ts(47,22): error TS2339: Property 'subscribe' does not exist on type 'Router'. This is strange because the documentation clearly shows that a Router object does have this function. I am able to call other functions like router.navigate(['

Used to have, with deprecated router, a few components that routed to the same component: Some Component import {Component, Injector} from 'angular2/core'; import {IDataServiceSome} from './IDataServiceSome'; import {RouteData} from 'angular2/router'; @Component({ selector: 'Some', templateUrl: './Some.html' }) export class Some { Model; DataService: IDataServiceVendor; constructor(routeData: RouteData, injector: Injector) { var dataServiceToken = routeData.get('DataServiceToken'); this.DataService = injector.get(dataServiceToken); this.Model = DataService.getSomeModel(); } } IDataServiceSome

This question already has an answer here: how to change page title in angular2 router 13 answers I'm working my way through the Angular 2 documentation on routing . I have a sample application which shows two components which are routed and hooked up to navigation links. Here is a Plunker demonstrating the behaviour. It's built using Angular 2 in Typescript. Here is the main 'app.component.ts' code: import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; import

In the angular docs FAQ section it states, "Unlike providers of the modules loaded at launch, providers of lazy-loaded modules are module-scoped." link Does 'module-scoped' here mean just the module or does it extend to include all components belonging to that module? The reason I ask is because I have a lazy-loaded module with 2 components that belong to it. I register a service in the module but for some reason each component is getting a different instance of that service. What do I need to change in order to provide LazyModuleService in my lazy-loaded module and have that service scoped to

I have created a new app using ng new but when I try to configure a module to load using lazy loading I keep getting an error that the module cannot be found. EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module' package.json "dependencies": { "@angular/common": "2.0.0-rc.7", "@angular/compiler": "2.0.0-rc.7", "@angular/core": "2.0.0-rc.7", "@angular/forms": "2.0.0-rc.7", "@angular/http": "2.0.0-rc.7", "@angular/platform-browser": "2.0.0-rc.7", "@angular/platform-browser-dynamic": "2.0.0-rc.7", "@angular/router": "3.0.0-rc.3", "core-js": "^2.4.1", "rxjs": "5.0.0

I've implemented a CanDeactivate guard to avoid user leave the page during the upload and it works. The problem is that my message is always a default message (in dutch because of the browser language) and, even setting a message myself, still show the same default confirm window. I would like to write my own message (actually I have a modal that I want to show, but first I would like to see working just with my simple message) Any ideas what could it be? Am I missing something? Thanks in advance! here's the code Guard. import { Injectable, ViewContainerRef } from '@angular/core'; import {

I repeatedly run into a situation where I'd like to access a child component existing on the other side of a router outlet rather than a selector: Like: <router-outlet></router-outlet> NOT: <selector-name></selector-name> This conflicts with the ViewChild functionality as I know it, yet it seems like my component should be able to see and interact with what's inside that router-outlet just as easily as with what's inside a selector-tag. For instance I tried this: export class RequestItemCatsComp { @ViewChild('child') child: RequestItemsComp; ***etc...*** ngAfterViewInit() { if (this.child) //

This question already has an answer here: Changing the default name of “router-link-active” class by writing a custom directive that adds new class 2 answers Given a routing link: <li [routerLink]="['Main']"><a>Main page</a></li> The framework automatically assigns the class router-link-active when the path matches the route named "Main". What if I wanted to give it a custom class (possibly without injecting Location or any other service in the controller)? AFAIK this isn't supported directly. As a workaround you could add a directive that checks if the class router-link-active is set and