如何在没有组件的情况下从 Angular 9+ 中的延迟加载模块动态注入服务?

Jas*_* K. 5 lazy-loading angular-services angular angular-injector

我正在尝试从组件内的延迟加载模块访问服务实例。该模块没有任何可用于基于构造函数的注入的组件。Angular 文档没有帮助,我在 Medium 和类似网站上找到的所有各种教程都不适用。

以下是执行服务延迟加载的组件的代码。

await import ('./lazy.module')
  .then(module => module.LazyModule)
  .then(module => {return module;})
  .then(module => this.compiler.compileModuleAsync(module))
  .then(factory => {
    let module = factory.create(this.injector);
    this.lazyService = module.injector.get(LazyService);
  });
Run Code Online (Sandbox Code Playgroud)

问题在于,在当前组件中包含 LazyService 将无法达到延迟加载的目的,并且 get() 方法似乎需要一个类型,这种方法只会产生先有鸡还是先有蛋的问题。我将 InjectionToken 作为另一种选择,但它需要一个通用定义,再次需要导入 LazyService。

谁能解释一下延迟服务加载应该如何完成?

Jas*_* K. 0

我最终找到了一种方法,它似乎可以解决 Angular 的缺陷,而不是基本的 Angular 功能。

这个想法是在模块定义中添加对服务的引用。就我而言,我将服务引用存储在添加到模块定义中的名为“entrySet”的静态变量中。“lazyService”变量只是添加到想要延迟加载服务的组件中的“any”类型的变量。

因此,这里是之前发布的用于检索服务的代码的更新:

    await import( './lazy.module' )
        .then( module => module.LazyModule )
        .then( module => {
            this.lazyService = module.entrySet.lazyService;
            return module;
        })
        .then( module => this.compiler.compileModuleAsync( module ) )
        .then( factory => {
            let module = factory.create( this.injector );
            this.lazyService = module.injector.get( this.lazyService );
        });
Run Code Online (Sandbox Code Playgroud)

下面的导出块中是使服务可用的 LazyModule 的相关代码:

@NgModule({
    bootstrap: [],
    declarations: []
    imports:
    [
        CommonModule,
    ],
    providers:
    [
        LazyService 
    ]
})
export class SnapshotManagerModule
{
    static entrySet = {
        lazyService: LazyService
    };  
}
Run Code Online (Sandbox Code Playgroud)

我在本文内容的帮助下解决了这个问题(https://medium.com/@ebrehault_25985/angular-9-makes-lazy-loading-without-routing-so-easy-18774092ed34