Question

我正在尝试在我的应用程序路由模块中应用延迟加载，但是当我从app.module.ts中排除“仪表板模块”时，会警告我的组件“ 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，并从导入列表中排除了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]

但是我收到：

未捕获的错误：组件DialogConfirmacaoExclusao不属于任何组件 NgModule或模块尚未导入到模块中。

@编辑：

我的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，但现在我收到：“仪表板组件不属于任何ngmodule ...”，但没有任何意义，但是如果我在app模块中声明，我将失去执行从我的懒加载中，对吧？

Answer 1

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

imports: [RouterModule.forChild(dashboardRoutes)],

和

imports:[RouterModule.forRoot(appRoutes)],

Link to Angular Docs

Answer 2

您必须分别在AppRoutingModule的DashbooardRoutingModule中更改/交换RouterModule的forChild和forRoot函数。在AppRoutingModule中，路由器应与forRoot一起导入。您的应用程序中只能有一个forRoot，并且必须将其用于您的主要路由定义：

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

DashboardRoutingModule必须将RouterModule与forChild函数一起使用。每个包含子路由的延迟加载模块都必须使用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：“ ./”

实际上，问题出在打字稿配置上。

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

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

3 个答案: