Angular 11:组件和指令未在Lazy Loaded模块中重新识别

Question

我想拆分我的angular项目，在主模块中加载Website部分，在懒惰加载模块中加载应用程序部分。虽然以前一切都正常，但现在我在组件和指令方面遇到了很多未知的错误：

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

   错误：projects/nine-gold-tools/src/app/layouts/app-lalayout.component.html:42:13-错误NG8001:"应用下载侧边栏"不是已知元素：

2. 未识别的指令：错误：projects/nine-gold-tools/src/app/layouts/app-lalayout.component.html:58:53-Error

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

   58<div下拉菜单autoClose="真"；[dropup]＝"；真"；placement="；顶部"；触发器＝"；悬停">

3. 库元素(来自NineGoldLibModule(

   错误：projects/nine-gold-tools/src/app/ramlConverter/raml-converter-page/raml-converter page.component.html:41:21-错误NG8001:"lib file input"不是已知元素：

4. 最后是子页面的路由器出口

   错误：projects/nine-gold-tools/src/app/layouts/app-lalayout.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' }
]},

至：

｛路径："app"，loadChildren:"./application/tools app.module.ts"｝，

在tools-app.module.ts中，我声明所有组件(从应用程序模块中删除声明(，并只进行以下导入：

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

NineGoldLibModule是在app-module.ts 中导入的工作空间库

最后是我的工具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 { }

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

Answer 1

在Gaurang Dhorda的评论中提出一些问题后，我查看了错误，第一个错误是关于FontAwesome标记(<fa-icon>(。我在LazyLoaded模块中包含了FontAwesome包，构建完成了。

---

我遇到了另一个问题，我的解决方案可能会帮助一些人，所以它是：

当导航到Lazy Load路由时，我一直收到BrowserModule已加载错误。我发现BrowserAnimationsModule不能多次加载，但它在Library模块中是必需的，Library模块也为LazyLoaded模块加载。为了防止两次加载BrowserAnimationsModule，我在Library模块中添加了以下代码：

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

也许我不需要这个if语句。

现在一切正常。