如何解决Angular 11:延迟加载模块中未识别组件和指令
我想拆分我的 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,{ 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 语句。
现在一切正常。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。