0

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

  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 <div dropdown autoClose="true" [dropup]="true" placement="top" triggers="hover">

  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, 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 中，我声明了所有组件（从 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: '', 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 { }

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

4

1 回答 1

0

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

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

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

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

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

现在一切正常。

于 2021-04-29T06:34:59.227 回答