Angular：无法在延迟加载的模块组件中定义路由器出口：答案

【问题标题】：Angular: Cant define router outlet in lazy loaded module component:Angular：无法在延迟加载的模块组件中定义路由器出口：
【发布时间】：2020-08-24 12:14:22
【问题描述】：

我想制作包含 3 个组件的延迟加载模块。主要是Auth组件（以及signIn和signOut组件）。所以我进行了延迟加载并延迟加载了我的模块，但我无法在我的身份验证组件中定义路由器出口标签以使子路由工作。

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthorizationModule} from './authorization/authorization.module';

const routes: Routes = [
  {path: 'auth', loadChildren: () => AuthorizationModule}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {SignUpComponent} from './sign-up/sign-up.component';
import {SignInComponent} from './sign-in/sign-in.component';
import {AuthComponent} from './auth/auth.component';


const routes: Routes = [
  {
    path: '', component: AuthComponent, children: [
      {path: 'signIn', component: SignInComponent},
      {path: 'signUp', component: SignUpComponent}
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class AuthRoutingModule {
}

【问题讨论】：

“我无法定义路由器出口标签”是什么意思？
当我尝试在我的 auth.component.html 中添加时，编译器说“router-outlet”不是已知元素：
您的 AuthRoutingModule 模块是否作为导入添加到 AuthorizationModule 模块中？ AuthComponent 是否被声明到 AuthorizationModule 模块中？
请在 AuthorizationModule 中导入您的 AuthRoutingModule。
我已经导入了

标签： angular routes

【解决方案1】：

在您的AuthorizationModule 中导入AuthRoutingModule

@NgModule({
  
  imports: [
    AuthRoutingModule // Add this statement
  ]
})
export class AuthorizationModule{ }

【讨论】：

你在 AppModule 中做过同样的事情吗（添加 AppRoutingModule ）
stackblitz.com/edit/github-ercsb8-eqz5vu 请使用这个 stackblitz 来回答。很少有错误 1. 您需要在 auth 模块中声明 auth 组件 2. 由于您在 auth 组件中使用了 router-outlet，因此您需要在路由中提供默认 URL 或在 auth 组件中保留一些基于路由的按钮 3. 路由器应用程序 routing.ts 中的模块导入可以以更好的方式完成请查看我已修复所有这些问题的 stackblitz
注释 auth routing.ts 中的第 12 行并尝试点击 auth/signin 或 auth/signup url
我解决了这个问题。我忘记在我的 AuthRouting 中导入 AuthComponent，很抱歉，非常感谢。
您能否点赞并将其标记为已解决.. 编码愉快

【解决方案2】：

您没有在AppRoutingModule 中提供您正在使用的 Angular 版本

const routes: Routes = [ {
           path: 'auth', 
           loadChildren:  () => import('./path/to/your/auth/module/ts/file').then((m: AuthModule) => m.AuthModule)
       }
];

【讨论】：

我解决了这个问题。我忘记在我的 AuthRouting 中导入 AuthComponent，很抱歉，非常感谢。