角嵌套组件布线

Question

I'm trying to show nested components from different modules in angular and came up with idea to do so with auxiliary routing. (Although i'm not sure that's the best way to do so, and any thoughts on that would be very appriciated)

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingModule} from './landing/landing.module';
@NgModule({
  declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    LandingModule,
    AppRoutingModule
    ],
  providers: [],
  bootstrap: [AppComponent]
 })
export class AppModule { }

app-routing.moudle.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
    {path: '', redirectTo: '/start', pathMatch: 'full'},];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
 })
export class AppRoutingModule { }

landing.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-landing',
    template: `<app-landing-header></app-landing-header>
               <router-outlet name="login"></router-outlet>
               <app-landing-footer></app-landing-footer>`
})
export class LandingComponent {
}

landing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule} from '@angular/router';
import { LandingComponent } from './landing.component';
import { LandingHeaderComponent } from './landing-header/landing-header.component';    
import { LoginComponent } from './login/login.component';    
const routes: Routes = [
    {path: 'start', component: LandingComponent,
        children: [
            {   path: 'login',
                outlet: 'login',
                component: LoginComponent}
        ]},
]

@NgModule({
  imports: [
    CommonModule,
      RouterModule.forChild(routes)
  ],
  declarations: [LandingComponent,
      LandingHeaderComponent,          
      LoginComponent,
      ],
    exports: [
        RouterModule
    ]
})
export class LandingModule { }

When navigating to /start it shows corresponding component and landing-header working. But when navigating to /start(login:login) I get error

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'

Answer 1

I think that you have the same issues as https://github.com/angular/angular/issues/18271

According to that thread, named outlets doesn't work properly as child routes.