Как экспортировать несколько конфигураций пользовательских веб-пакетов в Angular7

Question

Я собираюсь запустить угловой код в отдельном потоке с отключенным в данный момент ng eject, возможно ли использовать @ angular-builders / custom-webpack и @ angular-builders / dev-server

i 'я пытаюсь реализовать его, следуя этой статье на среде

У меня есть изменения src / app / app.module.ts со следующим кодом

import { WorkerAppModule, WORKER_APP_LOCATION_PROVIDERS } from '@angular/platform-webworker';
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common'

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    WorkerAppModule 
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    },
    WORKER_APP_LOCATION_PROVIDERS
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

У меня есть измененияsrc / main.ts со следующим кодом:

import { enableProdMode } from '@angular/core';
import { bootstrapWorkerUi, WORKER_UI_LOCATION_PROVIDERS } from '@angular/platform-webworker';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapWorkerUi('webworker.bundle.js', WORKER_UI_LOCATION_PROVIDERS);

Я создал src / workerLoader.ts

import './polyfills.ts';
import '@angular/core';
import '@angular/common';

import { platformWorkerAppDynamic } from '@angular/platform-webworker-dynamic';
import { AppModule } from './app/app.module';

platformWorkerAppDynamic().bootstrapModule(AppModule);

Я настроил angular.json следующим образом

//... some stuff...
"build": {
          "builder": "angular-cli-builders:custom-webpack-browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "replaceDuplicatePlugins":true,
              "mergeStrategies": {
                "entry": "replace",
                "output": "replace",
                "optimization":"replace"
              }
            },
            //... some stuff...
"serve": {
          "builder": "angular-cli-builders:generic-dev-server",
          "options": {
            "browserTarget": "myWorkerApp:build"
          },
//... some stuff...

также я создал extra-webpack.config.js, но здесь есть проблема, я хочу экспортировать несколько конфигураций, одну с целевым «web» и одну с целевым «webworker», чтобы сделать это, я следую документации на сайте webpackиспользовать несколько целей , но я получаю сообщение об ошибке "Недопустимый объект конфигурации" при использовании ng serve, смотрите ошибку здесь введите описание изображения здесь

const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];

const webworkerConfig =  {

    "target":"webworker",

    "entry": {
        "main": [
            "./src/main.ts"
        ],
        "polyfills": [
            "./src/polyfills.ts"
        ],
        "styles": [
            "./src/styles.scss"
        ],
        "webworker": [
            "./src/workerLoader.ts"
        ]
    },
    "output": {
        "path": path.join(process.cwd(), "dist"),
        "publicPath": '/',
        "filename": "[name].bundle.js",
        "chunkFilename": "[id].chunk.js",
        "globalObject": typeof self === 'undefined' ? "this" : "self",
    },
    "plugins": [
        new HtmlWebpackPlugin({
            "template": "./src/index.html",
            "filename": "./index.html",
            "excludeChunks": [
                "webworker"
            ],
            "chunksSortMode": function sort(left, right) {
                var leftIndex = entryPoints.indexOf(left.names[0]);
                var rightIndex = entryPoints.indexOf(right.names[0]);
                if (leftIndex > rightIndex) {
                    return 1;
                }
                else if (leftIndex < rightIndex) {
                    return -1;
                }
                else {
                    return 0;
                }
            }
        }),
        new AotPlugin({
            "mainPath": "./main.ts",
            "entryModule": 'src/app/app.module#AppModule',
            "exclude": [],
            "tsConfigPath": "./src/tsconfig.app.json",
            "skipCodeGeneration": true

        })
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /\/node_modules\//,
                    chunks: 'all',
                    priority: 0,
                    enforce: true
                }
            }
        }
    },
};

const webConfig =  {

    "target":"web",

    "entry": {
        "main": [
            "./src/main.ts"
        ],
        "polyfills": [
            "./src/polyfills.ts"
        ],
        "styles": [
            "./src/styles.scss"
        ],
        "webworker": [
            "./src/workerLoader.ts"
        ]
    },
    "output": {
        "path": path.join(process.cwd(), "dist"),
        "publicPath": '/',
        "filename": "[name].bundle.js",
        "chunkFilename": "[id].chunk.js",
        "globalObject": typeof self === 'undefined' ? "this" : "self",
    },
    "plugins": [
        new HtmlWebpackPlugin({
            "template": "./src/index.html",
            "filename": "./index.html",
            "excludeChunks": [],
            "chunksSortMode": function sort(left, right) {
                var leftIndex = entryPoints.indexOf(left.names[0]);
                var rightIndex = entryPoints.indexOf(right.names[0]);
                if (leftIndex > rightIndex) {
                    return 1;
                }
                else if (leftIndex < rightIndex) {
                    return -1;
                }
                else {
                    return 0;
                }
            }
        }),
        new AotPlugin({
            "mainPath": "./main.ts",
            "entryModule": 'src/app/app.module#AppModule',
            "exclude": [],
            "tsConfigPath": "./src/tsconfig.app.json",
            "skipCodeGeneration": true

        })
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /\/node_modules\//,
                    chunks: 'all',
                    priority: 0,
                    enforce: true
                }
            }
        }
    },
};

module.exports = [webworkerConfig , webConfig];

похоже, я собираюсь сделать несколькоЦелевые конфигурации с одним и тем же кодом, только другое свойство является целевым, но если я использую единственную конфигурацию, подобную этой,

module.exports =  webConfig;

webpack успешно скомпилирован, но у меня появляется ошибка «документ не определен», если я установил цель«webworker» с этой конфигурацией

module.exports =  webworkerConfig;

у меня ошибка «окно не определено», потому что оно используется только в webworker

, почему эта ошибка и как ее устранить, когда яиспользовать несколько конфигураций?

Я использую веб-пакет: «4.29.6» угловой: «7.2.9»