Ленивая загрузка не находит объявление моего компонента - PullRequest
Новая
       36

Ленивая загрузка не находит объявление моего компонента

0 голосов
/ 19 октября 2018

Я пытаюсь применить отложенную загрузку в моем модуле маршрутизации приложений, но когда я исключаю «Модуль панели мониторинга» из 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]

Но я получаю:

Uncaught Error: Компонент DialogConfirmacaoExclusao не является частью какого-либо NgModule или модуль не был импортирован в ваш модуль.

@ Редактировать:

My 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 { }

@ Edit:

я импортировал, объявил и экспортировал DialogConfirmacaoExclusao в app.module, но теперь я получаю: «компонент панели не является частью любого ngmodule ...», ноне имеет смысла, но если я деКлэр в модуле приложения я теряю производительность из-за своей ленивой загрузки, верно?

Ответы [ 3 ]

0 голосов
/ 29 октября 2018

Вы должны изменить / поменять функции RouterModule forChild и forRoot в AppRoutingModule соответственно DashbooardRoutingModule.В 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 {}

ВАЖНО: Не забудьте включить DashboardModule в AppModule.

Также не забудьте импортировать DashboardRouterModule в DashboardModule, соответственно AppRoutingModule в AppModule

0 голосов
/ 31 октября 2018

Возможны три возможных решения:

a) Использование относительного пути loadChildren: './...

b) Использование абсолютного пути, начиная с loadChildren:'src / app /...

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

На самом деле проблема связана с настройкой машинописного текста.

До NG 6 скаффолд, сгенерированный CLI, установил BaseUrl в tsconfig.app.json, который находится внутри / src.В настоящее время он устанавливается tsconfig.json, расположенным вне / src, но продолжает указывать на ./.Из-за этого путь loadChildren к модулю должен быть относительным или включать папку src.

0 голосов
/ 27 октября 2018

Вы должны проверить использование .forRoot против .forChild в модулях маршрутизации.Поскольку модуль приложения лениво загружает модули панели мониторинга, все должно быть наоборот (по крайней мере, так я успешно выполнил модульную маршрутизацию своих проектов): 

imports: [RouterModule.forChild(dashboardRoutes)],

и 

imports:[RouterModule.forRoot(appRoutes)],

Ссылка на угловые документы

...