Angular 11：延迟加载模块中无法识别组件和指令答案

【问题标题】：Angular 11: Components and Directives not regognized inside Lazy Loaded ModuleAngular 11：延迟加载模块中无法识别组件和指令
【发布时间】：2021-07-21 16:12:12
【问题描述】：

我想拆分我的 Angular 项目以在主模块中加载网站部分，在延迟加载模块中加载应用程序部分。虽然之前一切正常，但现在我收到很多关于未知组件和指令的错误：

来自同一应用程序的组件<app-downloads-sidebar></app-downloads-sidebar>：

错误：projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:42:13 - 错误 NG8001：“app-downloads-sidebar”不是已知元素：
指令无法识别：错误：projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:58:53 - 错误

NG8002：无法绑定到“dropup”，因为它不是“div”的已知属性。

58
库元素（来自 NineGoldLibModule）

错误：projects/nine-gold-tools/src/app/application/ramlConverter/raml-converter-page/raml-converter-page.component.html:41:21 - 错误 NG8001: 'lib-file-input ' 不是已知元素：
最后是子页面的路由器出口

错误：projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:93:9 - 错误 NG8001：'router-outlet' 不是已知元素：

在应用程序路由中我从：

{ path: 'app', component: AppLayoutComponent, canActivate: [NewAuthGuard], children: [
    { path: 'downloads', component: DownloadsPageComponent, canActivate: [NewAuthGuard] },
    { path: 'raml-converter', component: RamlConverterPageComponent, canActivate: [NewAuthGuard] },
    { path: 'json-converter', component: JsonConverterPageComponent, canActivate: [NewAuthGuard] },
    { path: '', redirectTo: 'raml-converter', pathMatch: 'full' }
  ]},

到：

{ path: 'app', loadChildren: './application/tools-app.module.ts' },

在 tools-app.module.ts 中我声明了所有组件（从 app 模块中删除了声明）并且只做这些导入：

declarations: [
    DownloadsPageComponent,
    DownloadsSidebarComponent,
    AppLayoutComponent,
    RamlConverterPageComponent,
    RamlConverterSidebarComponent,
    JsonConverterSidebarComponent,
    JsonConverterPageComponent,
  ],
  imports: [
    CommonModule,
    NineGoldLibModule,
    ToolsAppRoutingModule
]

NineGoldLibModule 也是在 app-module.ts 中导入的工作区库

最后是我的 tools-app-routing.module.ts：

const routes: Routes = [
  { path: '', component: AppLayoutComponent, canActivate: [NewAuthGuard], children: [
    { path: 'downloads', component: DownloadsPageComponent, canActivate: [NewAuthGuard] },
    { path: 'raml-converter', component: RamlConverterPageComponent, canActivate: [NewAuthGuard] },
    { path: 'json-converter', component: JsonConverterPageComponent, canActivate: [NewAuthGuard] },
    { path: '', redirectTo: 'raml-converter', pathMatch: 'full' }
  ]}
];

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

我在网上找不到任何有效的解决方案。

【问题讨论】：

{ path: 'app', loadChildren: './application/tools-app.module.ts' } 延迟加载语法不正确
@GaurangDhorda，应该是什么？
{ path: 'app', loadChildren: () => import('./application/tools-app.module').then(m => m.ToolsAppModule) }
这个错误出现在哪一行？并且在 loadChildren 的 import('') 中仔细检查路径是否正确
是的。谢谢。您的 cmets 将我引导至解决方案。我认为模板中的第一个错误就像多米诺骨牌效应。对我来说仍然很奇怪，为什么我需要再次在lazyLoaded模块中加载那个外部库。

【解决方案1】：

在 Gaurang Dhorda 向 cmets 提出一些问题后，我查看了错误，第一个错误是关于 FontAwesome 标签 (<fa-icon>) 我已将 FontAwesome 包包含在 LazyLoaded 模块中，并且构建通过了。

我遇到了另一个问题，我的解决方案可能会对某人有所帮助，所以这里是：

导航到延迟加载路线时，我不断收到 BrowserModule 已加载错误。我发现 BrowserAnimationsModule 不能多次加载，但在库模块中是必需的，并且对于 LazyLoaded 模块也加载了库模块。为了防止两次加载 BrowserAnimationsModule，我在 Library 模块中添加了这段代码：

export class NineGoldLibModule {
  constructor (@Optional() @SkipSelf() parentModule: BrowserAnimationsModule) {
    if (parentModule) {
    // skip
    }
  }
}

可能我不需要这个 if 语句。

现在一切正常。

【讨论】：

为了防止这种情况您可以将BrowserAnimationsModule 从库模块中删除到app.module.ts，因此您只有一个BrowserAnimationModule 的导入。但是，BrowserModule 用于 app.module.ts，所有子模块都必须导入 CommonModule。 HttpClientModule 也只需要在 app.module.ts 中导入一次。如果我们在子模块中重新导入 HttpClientModule ，则会创建新实例，并且您的应用程序有两个 HttpClient 实例，最终根拦截器无法工作。
material.angular.io/guide/getting-started angular material 也这样做，并且在 app.module.ts 中只导入一次 BrowserAnimationModule