Универсальная угловая бутстрэппинг

Question

Я использую Angular Universal для объединения нескольких компонентов на стороне сервера во время сборки.Требуется, чтобы родительский компонент загружал дочерние компоненты как статический html.После построения ssr в браузере возникают следующие ошибки:

Error: The selector "parent" did not match any elements
    at DefaultServerRenderer2.selectRootElement (\src\main\webapp\dist\server.js:68443:23)
    at BaseAnimationRenderer.selectRootElement (\src\main\webapp\dist\server.js:87768:30)
    at createElement (\src\main\webapp\dist\server.js:25020:23)
    at createViewNodes (\src\main\webapp\dist\server.js:27258:26)
    at createRootView (\src\main\webapp\dist\server.js:27211:5)
    at Object.createProdRootView [as createRootView] (\src\main\webapp\dist\server.js:27723:12)
    at ComponentFactory_.create (\src\main\webapp\dist\server.js:25550:29)
    at ComponentFactoryBoundToModule.create (\src\main\webapp\dist\server.js:14073:29)
    at ApplicationRef.bootstrap (\src\main\webapp\dist\server.js:22130:40)
    at \src\main\webapp\dist\server.js:21938:81
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (\src\main\webapp\dist\server.js:21938:44)
    at \src\main\webapp\dist\server.js:21906:27
    at ZoneDelegate.invoke (\src\main\webapp\dist\server.js:1712:26)
    at Object.onInvoke (\src\main\webapp\dist\server.js:21429:33)
    at ZoneDelegate.invoke (\src\main\webapp\dist\server.js:1711:52)
    at Zone.run (\src\main\webapp\dist\server.js:1471:43)
    at \src\main\webapp\dist\server.js:2210:34
    at ZoneDelegate.invokeTask (\src\main\webapp\dist\server.js:1744:31)
    at Object.onInvokeTask (\src\main\webapp\dist\server.js:21420:33)
    at ZoneDelegate.invokeTask (\src\main\webapp\dist\server.js:1743:60)
    at Zone.runTask (\src\main\webapp\dist\server.js:1516:47)
    at drainMicroTaskQueue (\src\main\webapp\dist\server.js:1922:35)
    at ZoneTask.invokeTask (\src\main\webapp\dist\server.js:1823:21)
    at ZoneTask.invoke (\src\main\webapp\dist\server.js:1808:48)
    at data.args.(anonymous function) (\src\main\webapp\dist\server.js:2721:25)
    at FSReqWrap.oncomplete (fs.js:153:5)

ParentComponent

import {Component, ComponentFactoryResolver, ComponentRef, Input, ViewChild, ViewContainerRef} from "@angular/core";
import {Formcomponent} from "../Form/Form.component";
import {FormStep2component} from "../FormStep2/FormStep2.component";
import {FormStep3component} from "../FormStep3/FormStep3.component";

@Component({
  selector: 'parent',
  template: `
        <div #target></div>
    `
})
export class ParentComponent {
  @Input() child: string;
  @Input() value: string;

  //Get tag child component will be placed
  @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
  private componentRef:ComponentRef<any>;

  //Child components
  private children = {
    child1: Formcomponent,
    child2: FormStep2component,
    child3: FormStep3component
  };

  constructor(private compiler: ComponentFactoryResolver) {}

  //Pass through value to child component
  renderComponent(){
    if (this.componentRef) this.componentRef.instance.value = this.value;
  }

  //Compile child component
  ngAfterContentInit() {
    let childComponent = this.children[this.child || 'child1' || 'child2' || 'child3'];
    //Resolve child component
    let componentFactory = this.compiler.resolveComponentFactory(childComponent);
    this.componentRef = this.target.createComponent(componentFactory);
    this.renderComponent();
  }

  //Pass through value to child component when value changes
  ngOnChanges(changes: Object) {
    this.renderComponent();
  }
}

app.server.module.ts - BootstrappingParentComponent

    import { NgModule } from '@angular/core';
    import { AppModule } from './app.module';
    import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';
    import {ParentComponent} from "./form-parent/form-parent";

    @NgModule({
      imports: [
        AppModule,
        ServerModule,
        ServerTransferStateModule
      ],
      bootstrap: [ParentComponent],
    })
    export class AppServerModule {}

server.ts

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as compression from 'compression';
import * as express from 'express';
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
const fs = require('fs');
const path = require('path');
const filterEnv = require('filter-env');
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
enableProdMode();
const dotenv = require('dotenv');
dotenv.config();
const config = filterEnv(/(BB_\w+)/, {json: true, freeze: true});

const PORT = process.env.BB_PORT || 8000;

// Provide support for window on the server
const domino = require('domino');
const template = fs.readFileSync(path.join('dist/browser', 'index.html')).toString();
const fetch = require('node-fetch');
const win = domino.createWindow(template);

win.fetch = fetch;
global['window'] = win;
global['document'] = window.document;
Object.defineProperty(win.document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  },
});
global['document'] = win.document;
global['CSS'] = null;
// global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
global['Prism'] = null;

const app = express();

// Config renderer
try {
  app.engine('html', (_, options, callback) => {
    const engine = ngExpressEngine({
      bootstrap: AppServerModuleNgFactory,
      providers: [
        provideModuleMap(LAZY_MODULE_MAP),
        { provide: 'REQUEST', useFactory: () => options.req, deps: [] },
        { provide: 'CONFIG', useFactory: () => config, deps: [] }
      ]
    });
    engine(_, options, callback);
  });
} catch (e) {
  console.log('error', 'there is some issue defining app engine ' + e);
}

// configs
app.enable('etag');

// Middleware
app.use(compression());
app.set('view engine', 'html');
app.set('views', 'dist/browser');
app.set('view cache', true);
app.use('/', express.static('dist/browser', { index: false, maxAge: 30 * 86400000 }));

// All regular routes use the Universal engine
app.get('', (req, res) => {
  res.render('index', {
    req: req,
    res: res,
    preboot: true
  });
});

app.get('/env', (req, res) => {
  res.json(process.env);
});

app.listen(PORT,() => {
  console.log(`we are serving the site for you at http://localhost:${PORT}!`);
});

webpack.server.config.ts

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'none',
  entry: {
    server: './server.ts',
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}