Angular 11：延迟加载模块中未识别组件和指令

问题描述

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

1. 来自同一应用程序的组件 <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”不是已知元素:

2. 无法识别指令： 错误：projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:58:53 - 错误

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

   58

3. 库元素（来自 NineGoldlibmodule）

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

4. 最后是子页面的路由器插座

   错误：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,{ path: 'json-converter',component: JsonConverterPageComponent,{ 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 中导入的工作区库

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

const routes: Routes = [
  { path: '',pathMatch: 'full' }
  ]}
];

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

我在网上找不到针对此问题的任何有效解决方案。

1 个答案:

答案 0 :(得分：0)

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

---

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

导航到延迟加载路由时，我不断收到 browserModule 已加载错误。 我发现 browserAnimationsModule 不能被多次加载，但它在库模块中是必需的，并且库模块也为 LazyLoaded 模块加载。为了防止两次加载 browserAnimationsModule，我在库模块中添加了以下代码：

export class NineGoldlibmodule {
  constructor (@Optional() @SkipSelf() parentModule: browserAnimationsModule) {
    if (parentModule) {
    // skip
    }
  }
}

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

现在一切正常。

解决方法

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

---

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

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

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

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

现在一切正常。