angular - 单例服务不适用于延迟加载的模块

Question

我最近将我的单个 AppModule 拆分为多个模块，现在我正尝试延迟加载一个模块并使其使用共享模块中的单例服务。

我按照提到的步骤 in the docs (以及 in this tutorial )并创建了一个提供单例服务的共享 CoreModule。但是，当其中一个共享模块的服务试图注入(inject)任何单例服务时，将抛出以下异常:

EXCEPTION: Uncaught (in promise): Error: No provider for HttpClientService!
Error: No provider for HttpClientService!
    at NoProviderError.BaseError [as constructor] (http://localhost:5000/lib/angular/@angular/core/bundles/core.umd.js:1105:38)

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        AppRoutingModule
    ]
})
export class AppModule { }

app-routing.module.ts

export const routes: Routes = [
    {
        path: "mailgroups",
        loadChildren: "app/mailgroup/mailgroup.module#MailGroupModule"  // <-- lazy loading the module
    }
];

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

core.module.ts(共享模块)

export class CoreModule {
    constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
        if (parentModule) {
            throw new Error("CoreModule is already loaded. Import it in the AppModule only!");
        }
    }

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: CoreModule,
            providers: [
                HttpClientService,  // <-- singleton service 1
                UserService         // <-- singleton service 2
            ]
        };
    }
}

mailgroup.module.ts(延迟加载模块)

@NgModule({
    imports: [
        MailGroupRoutingModule
    ]
})
export class MailGroupModule { }

有趣的是，当我将共享模块 CoreModule 导入延迟加载模块 MailGroupModule 时，我没有得到任何异常(尽管 在构造函数中抛出 new Error(...))，因为 parentModule 参数始终为 null。

我在这里遗漏了什么明显的东西吗？ (省略了我认为不必要的声明)

Answer 1

经过数小时的“随机”编程，同时拔掉我的头发，我的努力得到了返回。问题出在错误配置的 system.config.js 中。

将 SystemJS 配置与 the systemjs.config.web.js used in the docs 进行比较时，我注意到在我的文件中配置应用程序文件夹和引导应用程序的文件路径的方式存在细微差别。

✘ 之前(错误配置的 SystemJS)

System.config({
    paths: { ... },
    map: {
        app: '/app',                // <-- This line (incorrect)
        ...
    },
    packages: {
        app: {
            main: '/main.js'        // <-- And this line (incorrect)
            defaultExtension: 'js'
        }
    }
})

请注意 app: '/app' 中的前导斜线和 main: '/main.js' 中的相对路径。

✔ 之后(正确的 SystemJS 配置)
(更改为 app: 'app' 和 main: './main.js')

System.config({
    paths: { ... },
    map: {
        app: 'app',                 // <-- This line (correct)
        ...
    },
    packages: {
        app: {
            main: './main.js'       // <-- And this line (correct)
            defaultExtension: 'js'
        }
    }
})

因此，这两个细微的修复让世界变得完全不同!

现在，同样地，尝试将共享模块 CoreModule 导入除 AppModule 之外的任何其他位置，也会导致抛出异常，正如预期的那样。