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

Question

I recently split my single AppModule into multiple modules and now I am attempting to lazy-load a module and make it use singleton services from a shared module.

I followed the steps mentioned in the docs (as well as in this tutorial ) and created a shared CoreModule that provides singleton services. However, when one of the shared module's services is trying to inject any of the singleton services, the following exception is thrown:

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 (shared module)

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 (lazy loaded module)

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

What's interesting, is that when I import the shared module CoreModule to the lazy-loaded module MailGroupModule , I don't get any exception (despite the throw new Error(...) in the constructor), because the parentModule argument is always null .

Am I missing something obvious here? (left out declarations that I deemed unnecessary)

Answer 1

After many hours of programming "at random", while pulling my hair out, my efforts paid off. The issue was in a malconfigured system.config.js .

When comparing SystemJS configuration to the systemjs.config.web.js used in the docs , I noticed subtle differences in the way the app folder and the path to the file that bootstraps the app are configured in my file.

✘ Before (Malconfigured SystemJS)

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

Notice the leading slash in the app: '/app' and a relative path in main: '/main.js' .

✔ After (Correct SystemJS configuration)
(changed to app: 'app' and main: './main.js' )

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

So, these two subtle fixes made all the difference in the world!

Now, too, trying to import the shared module CoreModule anywhere else but AppModule , results in an exception being thrown, as expected.

Answer 2

according to best practice, the CoreModule is an extension to the AppModule. it shouldn't be a shared module. it should only be imported and used by the AppModule a shared module, should be called..... SharedModule