Laurens Wolf
Reputation: 39
Angular 2: router-outlet with multiplle components
Hey Everyone i have a question with Angular 2 routing:
i have this app component (working normally)
import {Component, provide, bootstrap} from 'angular2/angular2';
import {HTTP_PROVIDERS} from "angular2/http";
import {Factory} from './factory';
import {HallService} from './hall.service';
import {HallDetail} from './hall.detail';
import {
APP_BASE_HREF,
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
ROUTER_PRIMARY_COMPONENT,
HashLocationStrategy,
LocationStrategy,
RouteConfig,
} from "angular2/router";
import {FactoryList} from "./factory.list.component";
import {FactoryMap} from "./factory.map.component";
import {SettingsProperties} from "./settings-properties";
import {SettingsComponent} from "./settings.component";
import {Floors} from "./Component/floors";
import {RoomService} from "./service/room.service";
import {Campus} from "./Component/campus";
import {RoomDetail} from "./Component/room.detail";
import set = Reflect.set;
@Component({
selector: 'app',
directives: [ROUTER_DIRECTIVES],
template: `
<div id="nav">
<ul>
<li><a [router-link]="['/Factory']">Listview</a></li>
<li><a [router-link]="['/FactoryMap']">Mapview</a></li>
<li class="active"><a [router-link]="['/Settings']">Settings</a></li>
<li><a [router-link]="['/Floors']">floors</a></li>
</ul>
</div>
<router-outlet></router-outlet>`,
providers: [Factory, SettingsProperties]
})
@RouteConfig([
{path: "/", as: "Floors", component: Floors},
{path: "/factory", as: "Factory", component: FactoryList},
{path: "/floors", as: "Floors", component: Floors},
{path: "/roomDetail/:id", as: "RoomDetail", component: RoomDetail},
{path: "/factorymap", as: "FactoryMap", component: FactoryMap},
{path: "/hallDetail/:id", as: "HallDetail", component: HallDetail},
{path: "/settings", as: "Settings", component: SettingsComponent}
])
class AppComponent {
constructor() {
}
}
bootstrap(AppComponent, [
Factory,
HallService,
RoomService,
Campus,
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}),
provide(APP_BASE_HREF, {useValue: "/"}),
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
and then i have this Floors component
import {Component, Injectable, bootstrap,provide, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {HTTP_PROVIDERS} from "angular2/http";
import {Room} from "./room";
import {
APP_BASE_HREF,
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
ROUTER_PRIMARY_COMPONENT,
HashLocationStrategy,
LocationStrategy,
RouteConfig,
} from "angular2/router";
import {FloorList} from "./floor.list.component";
import {FloorMap} from "./floor.map.component";
import {RoomService} from "../service/room.service";
import {Router} from "angular2/router";
import {FactoryList} from "../factory.list.component";
@Component({
template: `
<div id="nav">
<ul>
<li>
<select>
<option *ngFor="#view of listViews "
(change)="onSelectView($event.target.value)">{{view}}
</option>
</select>
</li>
<li>
<select>
<option *ngFor="#floor of listFloors "
(change)="onSelectFloor($event.target.value)">{{floor}}
</option>
</select>
</li>
</ul>
</div>
<router-outlet></router-outlet>`,
providers: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})
@RouteConfig([
{path: "/floorList/:id", as: "FloorList", component: FloorList},
{path: "/floorMap/:id", as: "FloorMap", component: FloorMap},
])
export class Floors {
private listViews:string[] = ["MapView", "Listview"];
private listFloors:number[] = [1, 2, 3, 4];
private selectedView:string = "MapView";
private selectedFloor:number = 1;
router:Router;
constructor(router:Router) {
this.router = router;
this.setCorrectView();
};
onSelectFloor(floor:number) {
this.selectedFloor=floor;
}
onSelectView(view:string) {
this.selectedView=view;
this.setCorrectView();
}
listView(floor:number) {
this.router.navigate(['/FloorList', {id: floor}]);
}
mapView(floor:number) {
this.router.navigate(['/FloorMap', {id: floor}]);
}
setCorrectView() {
if (this.selectedView = "MapView") {
this.mapView(this.selectedFloor);
}
else if (this.selectedView = "Listview") {
this.listView(this.selectedFloor)
}
}
}
but this is giving an afwefull lot of error. i have tried many examples, adding extra things that are also in appComponent,...
Am i missing something here,
I want to accomplish that Floor is shown in appcomponent (working) And that FloorList anf FloorMap are shown in floors
I would really apreciete the help : here are the errors currently shown(sorry it is a lot):
EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).
angular2.dev.js:35358 EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).BrowserDomAdapter.logError @ angular2.dev.js:35358BrowserDomAdapter.logGroup @ angular2.dev.js:35369ExceptionHandler.call @ angular2.dev.js:12513(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 ORIGINAL EXCEPTION: Child routes are not allowed for "/". Use "..." on the parent's route path.BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12522(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12525(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 Error: Child routes are not allowed for "/". Use "..." on the parent's route path.
at new BaseException (http://localhost:60330/Factory/node_modules/angular2/bundles/angular2.dev.js:26880:21)
at assertTerminalComponent (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2263:17)
at RouteRegistry.config (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2002:11)
at http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2023:28
at Array.forEach (native)
at RouteRegistry.configFromComponent (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2022:23)
at new RootRouter (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2599:21)
at routerFactory (http://localhost:60330/Factory/node_modules/angular2/bundles/router.dev.js:2735:22)
at Injector._instantiate (http://localhost:60330/Factory/node_modules/angular2/bundles/angular2.dev.js:33616:19)
at Injector._instantiateProvider (http://localhost:60330/Factory/node_modules/angular2/bundles/angular2.dev.js:33546:21)BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12526(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 ERROR CONTEXT:BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12529(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 _Context {element: a, componentElement: app, injector: Injector}componentElement: appelement: ainjector: Injector__proto__: ObjectBrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12530(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35368 EXCEPTION: TypeError: Cannot read property 'location' of undefined
angular2.dev.js:35358 EXCEPTION: TypeError: Cannot read property 'location' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:35358BrowserDomAdapter.logGroup @ angular2.dev.js:35369ExceptionHandler.call @ angular2.dev.js:12513(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12515(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 TypeError: Cannot read property 'location' of undefined
at angular2.dev.js:39311
at Zone.run (angular2.dev.js:138)
at Zone.run (angular2.dev.js:16773)
at zoneBoundFn (angular2.dev.js:111)
at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
at lib$es6$promise$$internal$$publish (angular2.dev.js:1490)
at angular2.dev.js:219
at microtask (angular2.dev.js:16805)
at Zone.run (angular2.dev.js:138)BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12516(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35368 EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
angular2.dev.js:35358 EXCEPTION: TypeError: Cannot read property 'hostView' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:35358BrowserDomAdapter.logGroup @ angular2.dev.js:35369ExceptionHandler.call @ angular2.dev.js:12513(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12515(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:35358 TypeError: Cannot read property 'hostView' of undefined
at ApplicationRef_._loadComponent (angular2.dev.js:39565)
at tick (angular2.dev.js:39549)
at Zone.run (angular2.dev.js:138)
at Zone.run (angular2.dev.js:16773)
at zoneBoundFn (angular2.dev.js:111)
at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
at lib$es6$promise$$internal$$publish (angular2.dev.js:1490)
at angular2.dev.js:219
at microtask (angular2.dev.js:16805)BrowserDomAdapter.logError @ angular2.dev.js:35358ExceptionHandler.call @ angular2.dev.js:12516(anonymous function) @ angular2.dev.js:39433NgZone._notifyOnError @ angular2.dev.js:16850onError @ angular2.dev.js:16758run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:16805run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:16773zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
Upvotes: 0
Views: 467
Answers (1)
micronyks
Reputation: 55443
You have to make sure whenever you use @RouteConfig()... in any component, you also import and register ROUTER_PROVIDERS in that component.
...
import {ROUTER_PROVIDERS} from 'angular2/router';
providers:[CORE_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES]
...
NOTE: you are using very old version of angular2, please update yourself with latest version of Angular2 which doesnt require such import and registration.
Upvotes: 2
Related Questions
- Angular2: Multiple router-outlet in Child Componet
- How to use multiple router outlet in single component
- Angular2 multiple router-outlet in the same template
- angular: using the same <router-outlet> twice in one component
- Angular 8 Auxiliary Routes define second router outlet into Child Component
- Issue with the multiple child component with different router-outlet
- Load multiple component in the same router-outlet with angular2
- Angular2 nested router outlet
- Angular 2: multiple <router-outlet> for sub routes
- Angular 2 router-outlet within component template