Question

我有一个要移植到Ionic 4的Ionic 3应用程序，现在我想对页面（组件）使用延迟加载。因此，我将应用程序分为功能模块。

虽然我的大多数服务都将在单个Core共享模块中（由root提供），但在某些情况下，我只有Services只能由一个人使用Page的模块，所以我想将服务包含在功能模块中。

根据我的阅读，使用providedIn是提供服务的“新方法”。

所以，我最初有以下内容...

    // home.module.ts
    import { HomePage } from './home.page';
    import { HomeRoutingModule } from './home-routing.module';

    @NgModule({
      imports: [
        CommonModule,
        TranslateModule.forChild(),
        FormsModule,
        IonicModule,
        HomeRoutingModule
      ],
      providers: [],  // <--- note no providers
      declarations: [HomePage, HomeRoutingModule.components]
    })
    export class HomePageModule {}

    // home-routing.module.ts
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { HomePage } from './home.page';

    const routes: Routes = [
      { path: '', component: HomePage }
    ];
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class HomeRoutingModule {
      static components = [HomePage];
    }

在服务中，我使用了providedIn

    import { HomePageModule } from '../home.module';

    @Injectable({
      providedIn: HomePageModule
    })
    export class AvailablePagesService {
    ...

如果我按原样运行，则找不到该服务...

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> AvailablePagesService]: 
      StaticInjectorError(Platform: core)[HomePage -> AvailablePagesService]: 
        NullInjectorError: No provider for AvailablePagesService!
    Error: StaticInjectorError(AppModule)[HomePage -> AvailablePagesService]: 
      StaticInjectorError(Platform: core)[HomePage -> AvailablePagesService]: 
        NullInjectorError: No provider for AvailablePagesService!
        at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)

因此我将服务添加到Modiles提供程序数组中...

我在home.module.ts中添加。.

 providers: [AvailablePagesService],

现在，这给了我一个循环依赖警告（3次）

    WARNING in Circular dependency detected:
    [ng] src\app\home\home-routing.module.ts -> src\app\home\home.page.ts -> src\app\home\services\available-pages.service.ts -> src\app\home\home.module.ts -> src\app\home\home-routing.module.ts

然后我尝试了以下..

 providers: [HomePageModule],

现在我再次遇到相同的喷油器错误（找不到服务）

我对我该怎么做感到很困惑？

任何帮助将不胜感激！

预先感谢

Answer 1

发生这种情况是因为您的进口商品有一个圆圈（<-符号取决于）：

HOTFIX_LIST

当webpack尝试解析导入时，它会遇到无限包嵌入的问题。您的最佳方法是：
routing <- component <- service <- module <- routing
module <- component && service && routing
component <- service
routing<- component

在 module.ts

中

service <- (nothing)

在 available-pages.service.ts

import { AvailablePagesService } from './available-pages.service.ts';
import { PageComponent } from './home.page';

...
@NgModule({
      declarations: [HomePage, ...]
      imports: [RouterModule.forChild(routes)],
      providers: [AvailablePagesService ]
})

在 home.page

@Injectable()
export class AvailablePagesService {
...

在Angular 6 / Ionic 4功能模块中提供服务时的循环依赖关系

1 个答案: