Как добавить веб-работника в приложение Angular 7 с помощью пользовательской конфигурации веб-пакета? - PullRequest
Новая
       20

Как добавить веб-работника в приложение Angular 7 с помощью пользовательской конфигурации веб-пакета?

0 голосов
/ 21 октября 2019

У меня проблема с добавлением веб-работника в мое приложение Angular 7. На вкладке «Источники» Chrome DevTools я вижу, что веб-работник зарегистрирован, но его код не запускается.

Чтобы добавить веб-работника, я использую дополнительную точку входа в пользовательском файле конфигурации веб-пакета. Чтобы добавить пользовательскую конфигурацию веб-пакета в Angular, я использую @ angular-builders / custom-webpack и @ angular-builders / dev-server . Я знаю, что Angular 8 обеспечивает поддержку веб-работников, но я не могу сейчас выполнить обновление.

Я использую:
Angular CLI: 7.3.9
Angular: 7.2.15
@angular-devkit / architect 0.13.9
@ angular-devkit / build-angular 0.13.9
@ angular-devkit / build-optimizer 0.13.9
@ angular-devkit / build-webpack 0.13.9
@ angular-devkit / core 7.3.9
@ angular-devkit / schematics 7.3.9
@ angular / cli 7.3.9
@ ngtools / webpack 7.3.9
@ schematics / angular7.3.9
@ schematics / update 0.13.9
rxjs 6.3.3
машинописный текст 3.2.4
веб-пакет 4.29.0

Извлечение из моего AppComponent: 

ngOnInit(): void {
  const worker = new Worker('worker.js');
  worker.postMessage('message');
  worker.onmessage = (e: MessageEvent): void => {
    console.log('Message received in main thread');
  };
}

Мой веб-работник : 

class MyWorker {
  constructor(private worker: any) {
    this.worker.onmessage = (e: MessageEvent): void => {
      console.log('Message received in worker');
      this.worker.postMessage('message');
    };
  }
}

// tslint:disable-next-line: no-unused-expression
new MyWorker(self);

Мой дополнительный веб-пакет config : 

const HtmlWebpackPlugin = require('html-webpack-plugin'),
  path = require('path');

const entryPoints = [
  "inline",
  "polyfills",
  "sw-register",
  "styles",
  "vendor",
  "main",
  'worker'
];

const CONFIG = {
  entry: {
    'worker': 'src/app/worker.ts'
  },
  node: {
    global: true
  },
  output: {
    crossOriginLoading: false,
    filename: '[name].js',
    path: path.join(process.cwd(), 'dist'),
    globalObject: 'this'
  },
  plugins: [
    new HtmlWebpackPlugin({
      cache: true,
      chunks: 'all',
      chunksSortMode: function sort(left, right) {
        let leftIndex = entryPoints.indexOf(left.names[0]);
        let rightIndex = entryPoints.indexOf(right.names[0]);
        if (leftIndex > rightIndex) {
          return 1;
        }
        else if (leftIndex < rightIndex) {
          return -1;
        }
        else {
          return 0;
        }
      },
      compile: true,
      excludeChunks: [
        'worker'
      ],
      favicon: false,
      filename: './index.html',
      hash: true,
      inject: true,
      minify: false,
      showErrors: true,
      template: './src\\index.html',
      title: 'Webpack App',
      xhtml: true
    })
  ]
};

module.exports = CONFIG;

Извлечение из моего angular.json файла: 

{
...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js",
          "mergeStrategies": {
            "output": "replace"
          }
        },
        ...
      },
      ...
    },
    "serve": {
      "builder": "@angular-builders/dev-server:generic",
      "options": {
        "browserTarget": "example:build"
      },
      ...
    },
  }
...
}

Я ожидаю, что веб-работник будет работать с помощью команды ng serve. Я создал Github repo с примером. Я не получаю никаких ошибок во время компиляции или запуска приложения в браузере.

...