Question

我正在尝试在我的应用程序中应用延迟加载，但是我收到了：

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

custofixo.module.ts：

import { DialogConfirmacaoExclusaoModule } from './../../dialogexclusao/dialog-confirmacao-exclusao.module';
//Importação de módulos angular
import { MyMaterialDesignModule } from '../../../app.materialdesign.module';
import { MatMenuModule } from '@angular/material/menu';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgxCurrencyModule } from "ngx-currency";
import { ReactiveFormsModule } from '@angular/forms';
import { LoadingModule } from '../../loading/loading.module';
import { NgxMaskModule } from 'ngx-mask'
import { MostraToastService } from '../../../services/mostratoast.service';
import { CustoFixoRoutingModule } from './custofixo.routing.module';
//Importação de componentes do módulo
import { CustofixoComponent } from './custofixo.component';
import { MatTooltipModule } from '@angular/material';
import { CustosService } from '../../../services/custos.service';
import { DialogConfirmacaoExclusao } from '../../dialogexclusao/dialog-exclusao.component';
import { AuthService } from '../../../services/auth.service';
import { svgInfoManModule } from '../../svgInfoMan/svgInfoMan.module';

@NgModule({
  imports: [
    CustoFixoRoutingModule,
    CommonModule,
    FormsModule,
    LoadingModule,
    MyMaterialDesignModule,
    HttpClientModule,
    MatMenuModule,
    MatTooltipModule,
    ReactiveFormsModule,
    DialogConfirmacaoExclusaoModule,
    NgxCurrencyModule,
    NgxMaskModule,
    svgInfoManModule,
  ],
  exports:[
    CustofixoComponent
  ],
  declarations: [CustofixoComponent],
  entryComponents:[DialogConfirmacaoExclusao],
  providers:[
    CustosService,
    MostraToastService,
    AuthService
  ]
})

export class CustoFixoModule { }

custofixo.routing.ts：该错误在此文件中生成。我不知道为什么我的路由找不到我的组件。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustofixoComponent } from './custofixo.component';




    const custoFixoRoutes: Routes = [
        {
            path: '', component: CustofixoComponent
        }
];

@NgModule({
    imports: [RouterModule.forChild(custoFixoRoutes)],
    exports: [RouterModule]
})

export class CustoFixoRoutingModule {}

在我的根路径中：

const dashboardRoutes: Routes = [
    {path: 'dash', component: DashboardComponent, canActivate: [AuthGuard],
    children: [
    { path: '', loadChildren: 'src/app/components/dashboard/bemvindo/bemvindo.module#BemVindoModule' },
    { path: 'home', loadChildren: 'src/app/components/dashboard/bemvindo/bemvindo.module#BemVindoModule' },
    { path: 'custofixo', loadChildren: 'src/app/components/dashboard/custofixo/custofixo.module#CustoFixoModule' }

bemvindomodule运作良好，但是我的custoFixoModule具有类似的代码，无法正常工作。

重新启动ng服务器仍然无法正常工作

Answer 1

您不能将延迟加载的模块导入另一个模块。您可以将组件移至共享模块，然后将该模块导入延迟加载的模块中

AppModule
SharedModule
LazyLoadedModule1 - SharedModule
LazyLoadedModule2 - SharedModule
LazyLoadedModule3 - SharedModule

Answer 2

似乎您没有在任何地方声明组件CustofixoComponent。您需要将其添加到CustoFixoModule的声明数组中。

Answer 3

有两种解决方法

尝试破坏serve并重新运行，因为有时cli无法检测到文件

OR

imports: [
    CommonModule,
    FormsModule,
    LoadingModule,
    MyMaterialDesignModule,
    CustoFixoRoutingModule, <--- here
    HttpClientModule,
    MatMenuModule,
    MatTooltipModule,
    ReactiveFormsModule,
    DialogConfirmacaoExclusaoModule,
    NgxCurrencyModule,
    NgxMaskModule,
    svgInfoManModule,
  ]

我读过某个地方，在构建有角度的应用程序时会考虑该顺序

Answer 4

请检查引发错误的更新后的custofixo.routing.ts文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustofixoComponent } from './custofixo.component';
const custoFixoRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full', // <-- Add pathMatch and check again
    component: CustofixoComponent
  }
];
@NgModule({
  imports: [RouterModule.forChild(custoFixoRoutes)],
  exports: [RouterModule]
})
export class CustoFixoRoutingModule { }

有关更多详细信息，请检查here

我的路由模块找不到我的组件

4 个答案:

OR