main.component.html
[...]
<a routerLink="/company-list">Open</a>
[...]
<main>
<router-outlet name="content"><router-outlet>
</main>
[...]
app.compoment.html
<router-outlet><router-outlet>
app.routing.module.ts
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Router } from "@angular/router";
import { Routes } from "@angular/router";
const ROUTES:Routes =[
{path:'principal', loadChildren: 'app/main/main.module#MainModule'}
]
@NgModule({
imports:[RouterModule.forRoot(ROUTES)],
exports: [RouterModule]
})
export class AppRoutingModule{}
main.routing.module.ts
import { Routes } from "@angular/router";
import { MainComponent } from "./main.component";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { CompanyListComponent } from "../company/company-list/company-list.component";
const MAIN_ROUTES: Routes = [
{path: '', component: MainComponent},
{path: 'company-list', component:CompanyListComponent, outlet: 'content'}
];
@NgModule({
imports:[RouterModule.forChild(MAIN_ROUTES)],
exports: [RouterModule]
})
export class MainRoutingModule{}
app.module.ts
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MainModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
main.module.ts
@NgModule({
declarations:[
MainComponent
],
imports:[
MaterializeModule,
MainRoutingModule,
CompanyModule
],
exports:[MainComponent]
})
export class MainModule{}
Now let's discuss the issue I'm facing.
When clicking on the company-list route, an error appears in the console:
Uncaught (in promise): Error: Can not match any routes. URL Segment: 'company-list' Error: Can not match any routes. URL Segment: 'company-list'
I have tried several solutions to resolve this but without success so far.
My goal is to render the ComponentListComponent inside the main tag of my MainComponent.
Any assistance would be appreciated.