CODEWITHSUNDEEP
angularangular-routing
gsiradze
gsiradze

Reputation: 4733

children route not working

I'm trying to learn angular2 and doing sample app.

I want to make that when i click on service1 it must display some list and when i click to one of them i want to redirect into child route to edit that name.

When I'm clicking to service1 it throws that error:

enter image description here

and of course after that nothing works

here's my app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppHomeComponent } from './app.home-component';

import { ServicesComponent } from './service1/services.component';
import { Service2Component } from './service2/service2.component';
import { ServiceDetailComponent } from './service1/service-detail.component';

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'apphomecomponent',
        pathMatch: 'full'
    },
    {
        path: 'apphomecomponent',
        component: AppHomeComponent
    },
    {
        path: 'service1',
        component: ServicesComponent,
        children: [
            {
                path: '',
                component: ServicesComponent
            },
            {
                path: 'service1/:id',
                component: ServiceDetailComponent
            }

        ]
    },

    {
        path: 'service2',
        component: Service2Component
    }
];

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

service-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ServicesService } from './services.service';
import { ActivatedRoute } from '@angular/router';


@Component({
    selector: 'service-detail',
    template: '{{service.name}}'
})

export class ServiceDetailComponent implements OnInit {
    sub: any;
    service: any;


    constructor(private servicesService: ServicesService, private route: ActivatedRoute) {

    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            let id = +params['id'];
            this.service = this.servicesService.getServiceById(id);
        });
    }
}

and services.component.ts

import { Component, OnInit } from '@angular/core';
import { ServicesService } from './services.service';
import { Service } from './service';
import { Route } from '@angular/router';


@Component({
    selector: 'services',
    templateUrl: 'app/service1/services.html',
    providers: [ServicesService]
})

export class ServicesComponent implements OnInit {
    services: Service[];

    constructor(private servicesService: ServicesService) {

    }

    ngOnInit() {
        this.services = this.servicesService.getServices();
    }
}

What's wrong? or where can I find solution?

services.html looks:

<ul>
    <li *ngFor="let service of services">
        <a [routerLink]="['/service', service.id]">{{service.name}}</a>
    </li>
    <router-outlet></router-outlet>
</ul>

my folder structure is:

enter image description here

Upvotes: 0

Views: 1428

Answers (1)

micronyks
micronyks

Reputation: 55443

Error says It can not find primary outlet to load servicescomponent. It means you are missing with <router-outlet>.

Where you display list of items, below that just put <router-outlet></router-outlet> and it will start working as it requires to load servicescomponent through router.

also change routes to below,

{
    path: 'service1',
    component: ServicesComponent,
    children: [
        {
            path: ':id',
            component: ServiceDetailComponent
        }

    ]
},

You need to also change,

<a [routerLink]="['/service', service.id]">{{service.name}}</a>

to

<a [routerLink]="['/service1', service.id]">{{service.name}}</a>

Upvotes: 1

Related Questions