角度/通用：DynamicFormValidationService 没有提供者

Question

我的问题是，自从我切换到 angular/universal 并将我的 AppModule 拆分为 ServerAppModule 和 BrowserAppMobile 后，没有提供来自第三方模块的服务。

在这种情况下，我试图包含 @ng2-dynamic-forms 包及其服务，但无论我如何安排导入服务 DynamicFormValidationService 都不会提供。

我已经尝试将 DynamicFormsCoreModule.forRoot() 导入直接放入 AppSharedModule 或两个 AppModule 类，但没有成功。

这是我设置模块结构的方法，在 CoreModule 和 SharedModule 之间拆分导入和服务。

ServerAppModule

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        ServerModule,
        // As explained here, animations module used document hence we need Noop animations module on server
        // https://github.com/angular/angular/issues/14784
        NoopAnimationsModule,
        AppModuleShared
    ]
})
export class AppModule { }

BrowserAppModule

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        AppModuleShared,
        BrowserAnimationsModule
    ],
    providers: [
        {
            provide: 'BASE_URL',
            useFactory: getBaseUrl
        }
    ]
})
export class AppModule {
}

SharedAppModule

@NgModule({
    imports: [
        BrowserModule,
        // our core modules
        CoreModule.forRoot(),
        SharedModule,
        // ngrx/store modules
        StoreModule.forRoot(appReducer),
        AppRoutingModule,
        StoreRouterConnectingModule,
        StoreDevtoolsModule.instrument({maxAge: 50})
    ],
    providers: [],
    exports: [
        SharedModule
    ],
    declarations: [
        HomeComponent
    ]
})
export class AppModuleShared {}

核心模块

@NgModule({
    imports: [
        AuthModule.forRoot(),
        Ng2BootstrapModule.forRoot(),
        DynamicFormsCoreModule.forRoot()
    ],
    exports: [],
    providers: []
})
export class CoreModule {
    // forRoot allows to override providers
    // https://angular.io/docs/ts/latest/guide/ngmodule.html#!#core-for-root
    public static forRoot(): ModuleWithProviders {
        return {
            ngModule: CoreModule,
            providers: [
                Title,
                UtilityService
            ]
        };
    }
    constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
        if (parentModule) {
            throw new Error('CoreModule is already loaded. Import it in the AppModule only');
        }
    }
}

共享模块

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule,
        LayoutModule,
        Ng2BootstrapModule,
        DynamicFormsCoreModule,
        DynamicFormsBootstrapUIModule,
        // No need to export as these modules don't expose any components/directive etc'
        HttpModule,
        HttpClientModule
    ],
    declarations: [
    ],
    exports: [
        // Modules
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule,
        LayoutModule,
        Ng2BootstrapModule,
        DynamicFormsCoreModule,
        DynamicFormsBootstrapUIModule
    ]

})
export class SharedModule {}

boot.browser.ts

if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {
        modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);

boot.server.ts

enableProdMode();

export default createServerRenderer(params => {
    const providers = [
        { provide: INITIAL_CONFIG, useValue: { document: '<appc-root></appc-root>', url: params.url } },
        { provide: APP_BASE_HREF, useValue: params.baseUrl },
        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
    ];

    return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
        const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
        const state = moduleRef.injector.get(PlatformState);
        const zone = moduleRef.injector.get(NgZone);

        return new Promise<RenderResult>((resolve, reject) => {
            zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
            appRef.isStable.first(isStable => isStable).subscribe(() => {
                // Because 'onStable' fires before 'onError', we have to delay slightly before
                // completing the request in case there's an error to report
                setImmediate(() => {
                    resolve({
                        html: state.renderToString()
                    });
                    moduleRef.destroy();
                });
            });
        });
    });
});

Answer 1

这与我正在做的非常相似，我遇到了类似的问题。这就是为我解决了与您的代码相关的问题：

boot.browser.ts

const modulePromise = platformBrowserDynamic().bootstrapModule(BrowserAppModule);

boot.server.ts

return platformDynamicServer(providers).bootstrapModule(ServerAppModule).then(...