angle/universal：DynamicFormValidationServiceのプロバイダがありません

Question

私は角度/ユニバーサルに切り替えてAppModuleをServerAppModuleとBrowserAppMobileに分割しているため、サードパーティ製のサービスは提供されていないという問題があります。

この場合、@ng2-dynamic-formsパッケージとそのサービスを含めることを試みていますが、どのようにインポートを手配しても、DynamicFormValidationServiceは提供されません。

私はすでに直接AppModuleクラスのAppSharedModuleまたは両方になく、成功しませんDynamicFormsCoreModule.forRoot()インポートを入れてみました。

ここでは、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 {} 

CoreModule

@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'); 
     } 
    } 
} 

SharedModule

@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(...