ASP.NET Core 2.0でSPAテンプレートを使おう【後編】

/ClientApp
    ┣ boot.server.ts ・・・Angularでサーバサイドレンダリングを行うための設定と
    ┃                      ルートモジュール（AppModule）を指定したファイル
    ┣ /app
    ┃   ┣ app.module.server.ts（AppModule） ・・・Angularの起動コンポーネントとして
    ┃   ┃                                         「AppComponent」を定義、
    ┃   ┃                                         「AppModuleShared」をインポートしたモジュール
    ┃   ┣ app.module.shared.ts（AppModuleShared） ・・・このアプリケーションが使用する
    ┃   ┃                                               コンポーネント
    ┃   ┃                                               （/Components配下のコンポーネント）と
    ┃   ┃                                               外部モジュールのインポート宣言をした
    ┃   ┃                                               モジュール
    ┃   ┗ /components
    ┃        ┣ /app
    ┃        ┃    ┗ app.component.ts（AppComponent） ・・・SPAのベース/テンプレートとなる
    ┃        ┃                                              コンポーネントの実装
    ┃        ┗ /その他のディレクトリ ・・・各ページの実装
    ┗ /dist
        ┗ main-server.js ・・・boot.server.tsを起点として依存するファイルを
                                webpackでひとまとめにビルドした結果のファイル

・・・中略
export default createServerRenderer(params => { ・・・（1）
    const providers = [
        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', 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 => { ・・・（2）
        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) => { ・・・（3）
            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() ・・・（4）
                    });
                    moduleRef.destroy();
                });
            });
        });
    });
});

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModuleShared } from './app.module.shared';
import { AppComponent } from './components/app/app.component';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        ServerModule, ・・・（1）
        AppModuleShared ・・・（2）
    ]
})
export class AppModule {
}

・・・中略
@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
}