Angular ленивая загрузка компонентов и привязок - PullRequest
Новая
       67

Angular ленивая загрузка компонентов и привязок

0 голосов
/ 07 мая 2020

Я пытаюсь реализовать отложенную загрузку в моем веб-приложении под Angular 9.

Оно уже запущено, но пакет слишком велик для первой загрузки.

Итак, когда Я пытаюсь выполнить ленивую загрузку компонентов, все мои привязки перестают работать.

Я получаю эту ошибку: 

ERROR in src/app/modules/vitrine/func-view/func-view.component.ts:22:14 - error NG6007: The Component 'FuncViewComponent' is declared by more than one NgModule.

22 export class FuncViewComponent implements OnInit {
                ~~~~~~~~~~~~~~~~~

  src/app/vitrine.module.ts:8:18
    8   declarations: [FuncViewComponent]
                       ~~~~~~~~~~~~~~~~~
    'FuncViewComponent' is listed in the declarations of the NgModule 'VitrineModule'.
  src/app/app.module.ts:83:5
    83     FuncViewComponent,
           ~~~~~~~~~~~~~~~~~
    'FuncViewComponent' is listed in the declarations of the NgModule 'AppModule'.
src/app/vitrine.module.ts:8:18 - error NG6001: The class 'FuncViewComponent' is listed in the declarations of the NgModule 'VitrineModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

8   declarations: [FuncViewComponent]
                   ~~~~~~~~~~~~~~~~~

  src/app/modules/vitrine/func-view/func-view.component.ts:22:14
    22 export class FuncViewComponent implements OnInit {
                    ~~~~~~~~~~~~~~~~~
    'FuncViewComponent' is declared here.
src/app/app.module.ts:83:5 - error NG6001: The class 'FuncViewComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove 
it from the NgModule's declarations, or add an appropriate Angular decorator.

83     FuncViewComponent,
       ~~~~~~~~~~~~~~~~~

  src/app/modules/vitrine/func-view/func-view.component.ts:22:14
    22 export class FuncViewComponent implements OnInit {
                    ~~~~~~~~~~~~~~~~~
    'FuncViewComponent' is declared here. "

или ту, когда удаляю объявление в app.module. ts 

   ERROR in src/app/modules/vitrine/func-view/func-view.component.ts:22:14 - error NG6007: The Component 'FuncViewComponent' is declared by more than one NgModule.

22 export class FuncViewComponent implements OnInit {
                ~~~~~~~~~~~~~~~~~

  src/app/vitrine.module.ts:8:18
    8   declarations: [FuncViewComponent]
                       ~~~~~~~~~~~~~~~~~
    'FuncViewComponent' is listed in the declarations of the NgModule 'VitrineModule'.
  src/app/app.module.ts:83:5
    83     FuncViewComponent,
           ~~~~~~~~~~~~~~~~~
    'FuncViewComponent' is listed in the declarations of the NgModule 'AppModule'.
src/app/vitrine.module.ts:8:18 - error NG6001: The class 'FuncViewComponent' is listed in the declarations of the NgModule 'VitrineModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

8   declarations: [FuncViewComponent]
                   ~~~~~~~~~~~~~~~~~

  src/app/modules/vitrine/func-view/func-view.component.ts:22:14
    22 export class FuncViewComponent implements OnInit {
                    ~~~~~~~~~~~~~~~~~
    'FuncViewComponent' is declared here.

Мое приложение - это главная страница, которая содержит 3 подраздела, которые сами по себе являются компонентами, которые повторно используются на других страницах (те, которые я хочу загружать лениво). И я передаю данные из firebase в эти 3 подсекции через привязки.

Но эти привязки не работают, когда я перемещаю страницы во вторичном модуле маршрутизации.

Итак, интерфейс командной строки говорит, что я не может объявить компоненты как в NgModule (основном, так и в ленивом), но эти привязки используются главной страницей (что, очевидно, не должно загружаться с ленивой). Как я могу решить эту проблему?

Это app-routing.module.ts 

  export const appRouteList: Routes = [
{
    path: 'votre-logiciel-de-secrétariat', component: MainViewComponent, data: {
        title: 'Votre Logiciel de Secrétariat'
    }
},
{
    path: 'les-fonctionnalites-du-logiciel', loadChildren: () => import('./vitrine.module').then(m => m.VitrineModule)
},
{
    path: 'application-mobile-tempora', component: AppmobileComponent, data: {
        title: 'Application Mobile Tempora'
    }
},

Это мой vitrine-routing.module.ts 

    import { NgModule } from "@angular/core";
    import { RouterModule, Routes } from "@angular/router";
    import { FuncViewComponent } from './modules/vitrine/func-view/func-view.component';


    const routes: Routes = [
{
    path: 'les-fonctionnalites-du-logiciel', component: FuncViewComponent, data: {
      title: 'La solution logiciel pour les centres d\'appels et les structures médicales'
    }
  }
    ];

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

и здесь vitrine.module.ts 

   import { NgModule } from "@angular/core";
   import { VitrineRoutingModule } from './vitrine-routing.module';
   import { FuncViewComponent } from './modules/vitrine/func-view/func-view.component';

   @NgModule({
imports: [VitrineRoutingModule],
declarations: [FuncViewComponent]
   })
   export class VitrineModule { }

Я попытался изменить путь в app-routing-module на 

      path: 'les-fonctionnalites-du-logiciel', loadChildren: () => import('./vitrine-routing.module').then(m => m.VitrineRoutingModule)

Таким образом, компилятор не вернет ошибку , но моя страница не загружается.

Итак, я последовал шаг за шагом (или так я думал: p) Angular Учебник, но теперь я получаю следующую ошибку: 

     ERROR in src/app/modules/vitrine/func-view/func-view-routing.module.ts:3:35 - error TS2307: Cannot find module './modules/vitrine/func-view/func-view.component'.

     3 import { FuncViewComponent } from './modules/vitrine/func-view/func-view.component';
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   src/app/modules/vitrine/func-view/func-view.module.ts:2:10 - error TS2305: Module '"C:/site-angular-tempora/site-tempora/src/app/modules/vitrine/func-view/func-view-routing.module"' has no exported 
  member 'FuncViewRoutingModule'.

  2 import { FuncViewRoutingModule } from './func-view-routing.module';

После этого я переделал импорт компонента, и, похоже, go хорошо, но я получаю эту ошибку, связанную с привязками, о которых я говорю в начале моего довольно длинного сообщения: 

43             <app-net-gain [netGain]="netGain"></app-net-gain>
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/modules/vitrine/func-view/func-view.component.ts:19:16
    19   templateUrl: './func-view.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component FuncViewComponent.
src/app/modules/vitrine/func-view/func-view.component.html:43:27 - error NG8002: Can't bind to 'netGain' since it isn't a known property of 'app-net-gain'.
1. If 'app-net-gain' is an Angular component and it has 'netGain' input, then verify that it is part of this module.
2. If 'app-net-gain' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

43             <app-net-gain [netGain]="netGain"></app-net-gain>
                             ~~~~~~~~~~~~~~~~~~~

  src/app/modules/vitrine/func-view/func-view.component.ts:19:16
    19   templateUrl: './func-view.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component FuncViewComponent.

И если я объявлю эти компоненты в этом модуле, он скажет, что они объявлены в 2 NgModule, и этого не будет. Мне нужны эти компоненты на этой странице, но также на главной странице и даже на некоторых других страницах веб-сайта.

Из того, что я мог собрать слева и справа, кажется, что вы не можете привязать данные из компонент для отложенной загрузки. Если кто-нибудь может подтвердить?

Ура

...