WedX - журнал о программировании и компьютерных науках

Angular — конфигурация веб-пакета для веб-работника в angular6

я попытался запустить свое веб-приложение angular6 в веб-воркере, как описано здесь

из-за отсутствия ng eject в angular6 я использую это для создания пользовательского файла конфигурации веб-пакета.

workerLoader.ts

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

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

platformWorkerAppDynamic().bootstrapModule(AppModule);

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.chunk.js',WORKER_UI_LOCATION_PROVIDERS);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import {
  WorkerAppModule,
  WORKER_APP_LOCATION_PROVIDERS,
  WORKER_UI_LOCATION_PROVIDERS
} from '@angular/platform-webworker';
import { APP_BASE_HREF } from '@angular/common'

@NgModule({
  declarations: [
    AppComponent,
   // some components
  ],
  imports: [
    BrowserModule,
    //some imports
    WorkerAppModule,

  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    },
    WORKER_APP_LOCATION_PROVIDERS
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const { AotPlugin } = require('@ngtools/webpack');


module.exports = {
    "entry": {
        "main": [
          "./src/main.ts",
        ],
        "polyfills": [
          "./src/polyfills.ts"
        ],
        "styles": [
          "./src/styles.css"
        ],
        "webworker": [
          "./src/workerLoader.ts"
        ]
    }
  ,
  "output": {
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"
},

 optimization: {
     splitChunks: {
         cacheGroups: {
             commons: {
                 test: /[\\/]node_modules[\\/]/,
                 name: 'vendor',
                 chunks: 'all'
             }
         }
     }
 },

}

проблема в том, что после входа в браузер я получаю сообщение об ошибке webworker.chunk.js:1 Uncaught ReferenceError: window is not defined, и строка, создающая эту ошибку,
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["webworker"],{

я нахожу тот же вопрос, но у меня это не сработало.

Как решить проблему?

обновление:
мой вопрос помечен как возможный дубликат, но я сам сослался на этот вопрос и подчеркнул, что это не сработало для меня.

обновление:
Насколько я знаю, веб-воркер не имеет доступа к глобальным переменным, таким как window, и ошибка какая-то странная, потому что он хочет получить доступ к window в веб-воркере. Я думаю, что причиной ошибки является неправильная конфигурация в конфигурационном файле веб-пакета. изображение ошибки


  • Возможный дубликат приложения Angular4 Web Worker не отображается 14.08.2018
  • как я уже сказал, это не сработало для меня, и я намеренно сослался на этот вопрос 14.08.2018
  • но сам вопрос все равно дубликат 14.08.2018
  • я делаю то, что там описано, и моя проблема все еще существует, что мне делать? 14.08.2018
  • @aimar, можете ли вы дать мне шаги для реализации веб-работника в angular 6. Потому что я борюсь последние 2 дня. Я прошел через этот blog.angularindepth.com/ но не могу использовать ng eject 10.09.2018
  • Также я разместил один вопрос в stackverflow. stackoverflow.com/questions/52029035/web-workers-in -угловой-6 10.09.2018

Ответы:


1

У меня была такая же ошибка, я решил ее, добавив следующую опцию в customWebpackConfig в angular.json:

"mergeStrategies": {"optimization":"replace"}

Надеюсь, это поможет

см. связанную с gitHub проблему

20.08.2018
  • я пытался решить свою проблему, но я столкнулся с теми же ошибками в следующем, и различное поведение разных младших версий angular6 также в разных системах, и, наконец, я разочарован. насколько улучшилась производительность для вас? и вы столкнулись с какой-либо ошибкой до сих пор? 27.08.2018
  • еще одна проблема в том, что конфигурация веб-пакета не работает с ng serve , как вы можете это исправить? 28.08.2018
  • Новые материалы

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


    Для любых предложений по сайту: [email protected]