I am currently working on a project that includes an admin page (check the file structure below). I am trying to set up a child route named 'createuser' for the admin page (localhost:4200/admin/createuser). Despite my attempts, I encountered an error stating 'Cannot find primary outlet to load 'CreateComponent'.' To address this issue, I included a router-outlet in my admin component html. While this fixed the routing problem, it caused the HTML content from the admin page to display on the 'createuser' page. How can I prevent this overlap? Did I overlook something in my configuration?
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);
https://i.sstatic.net/DsiUT.png https://i.sstatic.net/o3zwP.jpg