延迟加载找不到我的组件的声明

Question

我正在尝试在我的应用程序路由模块中应用延迟加载，但是当我从 app.module.ts 中排除 "Dashboard Module" 时，我的组件 "DialogConfirmacaoExclusao" 被警告它不是任何 ngModule.

我试试：

我的应用路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  {path: 'dash', loadChildren: 'src/app/components/dashboard/dashboard.module#DashboardModule'}
];

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

在我的 app.module 中，我导入了我的 appRoutingModule e 从导入列表中排除了 DashboardModule：

import { AppRoutingModule } from './app.routing.module';

我的仪表板路由模块：

const dashboardRoutes: Routes = [
    {path: 'dash', component: DashboardComponent, canActivate: [AuthGuard],
    children: [
    { path: '', component: BemvindoComponent, pathMatch: 'full' },
    { path: 'home', component: BemvindoComponent, pathMatch: 'full' },
    { path: 'custofixo', component: CustofixoComponent, pathMatch: 'full' },
    { path: 'custoextra', component: CustoextraComponent, pathMatch: 'full'},
    { path: 'custovariavel', component: CustovariavelComponent, pathMatch: 'full'},
    { path: 'listagemcustofixo', component: CustoMensalFixo, pathMatch: 'full'},
    { path: 'operador', component: OperadorComponent, pathMatch: 'full', canActivate: [CadOperadorGuard]},
    { path: 'produtos', component: ProdutoComponent, pathMatch: 'full'},
    { path: 'tipoprodutos', component: TipoprodutoComponent, pathMatch: 'full'},
    { path: 'meuperfil', component: MeuperfilComponent, pathMatch: 'full'},
    { path: 'confestoque', component: ConfEstoqueComponent, pathMatch: 'full'},
    { path: 'confprecificacao', component: ConfPrecificacao, pathMatch: 'full'},
    { path: 'monitoramento', component: MonitoramentoComponent, pathMatch: 'full'},
    { path: 'listagemcustovariavel', component: CustoMensalVariavel, pathMatch: 'full'},
    { path: 'listagemcustoextra', component: CustoExtraMensal, pathMatch: 'full'},
    { path: 'produtoscalculados', component: ProdutosCalculadosComponent, pathMatch: 'full'},
  ]}
];

@NgModule({
    imports: [RouterModule.forRoot(dashboardRoutes)],
    exports: [RouterModule]
})

export class DashboardAppRouting {}

我的仪表板模块声明并导出组件 "DialogConfirmacaoExclusao":

import { DialogConfirmacaoExclusao } from '../dialogexclusao/dialog-exclusao.component';
  exports:[
    DialogConfirmacaoExclusao
]

...

  declarations: [DialogConfirmacaoExclusao]

但我收到：

Uncaught Error: Component DialogConfirmacaoExclusao is not part of any NgModule or the module has not been imported into your module.

@编辑：

我的app.module.ts:

//Importação de módulos angular
import { FormsModule } from '@angular/forms';
import { MyMaterialDesignModule } from '../app.materialdesign.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { NgxMaskModule } from 'ngx-mask';
//Importação de módulos do sistema
import { LoadingModule } from './components/loading/loading.module';
import { DialogEdicaoMovimentacaoModule } from './components/dashboard/dialogedicaomovimentacao/dialog-edicao.module';
import { AppRoutingModule } from './app.routing.module';
import { DashboardModule } from './components/dashboard/dashboard.module';
import { LoginComponent } from './components/login/login.component';
import { CustoextraModule } from './components/dashboard/custoextra/custoextra.module';
import { CustovariavelModule } from './components/dashboard/custovariavel/custovariavel.module';
import { OperadorModule } from './components/dashboard/operador/operador.module';
import { TipoProdutoModule } from './components/dashboard/tipoproduto/tipoproduto.module';
import { ProdutoModule } from './components/dashboard/produto/produto.module';
import { LoginModule } from './components/login/login.module';
import { BemVindoModule } from './components/dashboard/bemvindo/bemvindo.module';
import { CustoFixoModule } from './components/dashboard/custofixo/custofixo.module';
import { MeuPerfilModule } from './components/dashboard/meuperfil/meuperfil.module';
import { DialogsModule } from './components/dashboard/dialogedicaolistagemcustos/dialog-edicao.module';
import { ConfEstoqueModule } from './components/dashboard/confestoque/confestoque.module';
import { ConfPrecificacaoModule } from './components/dashboard/confprecificacao/confprecificacao.module';
import { MonitoramentoModule } from './components/dashboard/monitoramento/monitoramento.module';
import { CustoExtraModule } from './components/dashboard/customensalextra/customensalextra.module';
import { SearchPipeModule } from './pipes/searchpipe/searchpipe.module';
import { ProdutosCalculadosModule } from './components/dashboard/produtoscalculados/produtoscalculados.module';
import { DialogEsqueceuSenhaModule } from './components/login/dialogesqueceusenha/dialog-esqueceu-senha.module';
import { CallBackRecuperacaoSenhaModule } from './components/login/callbackrecuperacaosenha/callbackrecuperacaosenha.module';
import { CustoMensalFixoModule } from './components/dashboard/customensalfixo/customensalfixocomponent';
import { CustoMensalVariavelModule } from './components/dashboard/customensalvariavel/customensalvariavel.module';


@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    CallBackRecuperacaoSenhaModule,
    CustoMensalFixoModule,
    DialogEdicaoMovimentacaoModule,
    DialogEsqueceuSenhaModule,
    DialogsModule,
    ProdutosCalculadosModule,
    CustoExtraModule,
    SearchPipeModule,
    ConfPrecificacaoModule,
    CustoFixoModule,
    MonitoramentoModule,
    LoadingModule,
    CustoFixoModule,
    TipoProdutoModule,
    ProdutoModule,
    MeuPerfilModule,
    OperadorModule,
    CustovariavelModule,
    CustoextraModule,
    BemVindoModule,
    CustoMensalVariavelModule,
    NgxMaskModule.forRoot(),
    FormsModule,
    BrowserAnimationsModule,
    MyMaterialDesignModule,
    MDBBootstrapModule.forRoot(),
    LoginModule,
    DashboardModule,
    AppRoutingModule,
    ConfEstoqueModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [LoginComponent],
})

export class AppModule { }

@编辑：

我在 app.module 中导入、声明和导出了 DialogConfirmacaoExclusao，但现在我收到："dashboard component is not part of any ngmodule..." 但没有意义，但如果我在应用程序模块中声明，我将失去延迟加载的性能，对吧？

Answer 1

您应该检查路由模块中 .forRoot 与 .forChild 的用法。当应用程序模块延迟加载仪表板模块时，它应该是相反的（至少我是这样成功模块化我的项目路由的）：

imports: [RouterModule.forChild(dashboardRoutes)],

和

imports:[RouterModule.forRoot(appRoutes)],

Link to Angular Docs

Answer 2

您必须change/swap RouterModule forChild 和forRoot 函数分别在AppRoutingModule 和DashbooardRoutingModule 中。在 AppRoutingModule 中，路由器应该使用 forRoot 导入。您的应用程序中只能有一个 forRoot，并且它必须用于您的主要路由定义：

@NgModule({
   imports:[RouterModule.forRoot(appRoutes)],
   exports: [RouterModule]
})
export class AppRoutingModule{}

DashboardRoutingModule 必须使用具有 forChild 功能的 RouterModule。每个包含子路由的惰性加载模块都必须用 forChild:

初始化

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

重要提示： 确保不要在 AppModule 中包含 DashboardModule。

另外别忘了将DashboardRouterModule导入DashboardModule，分别将AppRoutingModule导入AppModule

Answer 3

可能存在三种可能的解决方案：

a) 使用相对路径 loadChildren: './...

b) 使用以 loadChildren 开头的绝对路径：'src/app/...

c) tsconfig.app.json --> BaseUrl: "./"

其实是typescript配置的问题

在 NG 6 之前，CLI 生成的脚手架将 BaseUrl 设置在 tsconfig.app.json 中，它位于 /src 内。目前，它由位于 /src 外部的 tsconfig.json 设置，但继续指向 ./。因此，模块的 loadChildren 路径应该是相对路径或包含 src 文件夹。

延迟加载找不到我的组件的声明

Lazy loading don't find the declaration of my component

lazy-loading

angular