How to create a child route in angular 2?

Question

I Have a project with with admin page(See the file structure below). I need to create a child route called 'createuser' to admin page (localhost:4200/admin/createuser). I tried few methods but it shows an error(Cannot find primary outlet to load 'CreateComponent'). So, I added router-outlet to my admin component html. Now, the routing code works but the html from admin page is showing in the 'createuser' page. How to avoid that? Or Have I missed something?

admin.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'admin',
    templateUrl: 'admin.component.html'
})

export class AdminComponent implements OnInit
{
    constructor(){}
    ngOnInit(){}
}

admin.component.html

<router-outlet></router-outlet>
<div class="logo" style="background-color: #fbc111">
    <img src="../../../assets/lbtrackerlogo.png" style="width: 250px;padding: 15px">
    <button class="btn btn-default" routerLink="create" style="position: absolute;top:25px;left: 80%">Create Agency</button>
</div>

create.component.html

<h1>Create Component</h1>

create.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from 'angularfire2';
import { Router } from '@angular/router';
import { UUIDService } from '../../../services/uuid.service';

@Component({
    moduleId: module.id,
    selector: 'create',
    templateUrl: 'create.component.html'
})
export class CreateComponent implements OnInit
{
    constructor() { }

    ngOnInit()
    {
        console.log("In Create component");
    }
}

app.routing.ts

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

import { LoginComponent } from './components/login/login.component';
import { AdminComponent } from './components/admin/admin.component';
import { CreateComponent } from './components/admin/create/create.component';

import { AuthGuard } from './auth.service';

const appRoutes: Routes = [
    {
        path: '',
        component: LoginComponent
    },
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthGuard],
        data: { roles: ['admin'] },
        children: [
            {
                path: 'create',
                component: CreateComponent
            }
        ]
    }
];

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

Answer 1

Just add another child route inside your AdminComponent which will be a default route. Than copy your AdminComponent's logic, styles and view into the created child route and it should work fine.

When you define a child route it's working kind-of like in HTML. You have your parent that has some content and then by adding the child you're not deleting the parent's content - you're just adding the child's content to it's parent.

So you're routes should look like:

Admin - /admin - redirects to AdminDefaultController by default
    AdminDefaultController - /admin/dashborad 
    AdminCreateController - /admin/create

Answer 2

Your <router-outlet> should be inside your app.component.html file to avoid that kind of behavior.

You might be forgetting to add CreateComponent to your app.module.ts. Make sure you have CreateComponent inside your module declarations.