Question

我正在尝试在Angular 9下的Web应用程序中实现延迟加载。

它已经启动并正在运行，但是捆绑包太大，无法首次加载。

因此，当我尝试执行延迟加载组件时，我所有的绑定都停止工作。

我收到该错误：

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个子部分。

但是，一旦我在辅助路由模块上移动页面，这些绑定就无法使用。

因此CLI表示我无法在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 Tutorial，但是现在，我得到了以下错误：

     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';

此后，我重新导入了该组件，并且看起来一切正常，但是在我的一篇很长的文章开始时，我遇到了与绑定有关的错误：

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中声明的，不会这样做。我需要该页面上的那些组件，也需要网站的主页甚至其他页面上的那些组件。

从我可以从左右收集的数据来看，似乎无法将数据从组件绑定到延迟加载的组件。如果有人可以确认？

欢呼

角延迟加载组件和绑定

0 个答案: