Считывая документацию Angular, вы можете найти несколько ссылок для загрузки всего вашего приложения Angular внутри веб-рабочего, поэтому ваш пользовательский интерфейс не будет блокироваться интенсивным использованием JS.
Однако на данный момент нет официальной информации о том, как это сделать, и единственной информации в документе Angular. заключается в том, что это экспериментальная функция.
Как я могу использовать этот подход для использования веб-работников в Angular?
Я потратил много времени, чтобы понять, как это сделать, поэтому я надеюсь, что это может помочь кому-то.
Предположим, что у вас есть проект Angular (версия 2 или 4), сгенерированный с помощью Angular CLI 1.0 или выше.
Не обязательно создавать проект с помощью CLI, чтобы следовать этим шагам, но инструкции, которые я расскажу, связанные с файлом webpack, основаны на конфигурации веб-пакета CLI.
Так как Angular CLI v1.0, функция "извлечения", которая позволяет вам извлекать конфигурационный файл webpack и манипулировать им по своему усмотрению.
Запустите ng eject, поэтому Angular CLI создает файл webpack.config.js.
Запустите npm install, чтобы выполнялись новые зависимости, сгенерированные CLI.
Выполнить npm install --save @angular/platform-webworker @angular/platform-webworker-dynamic
Замените BrowserModule на WorkerAppModule в файле app.module.ts. Вам также необходимо обновить оператор импорта, чтобы использовать библиотеку @angular/platform-webworker.
//src/app/app.module.ts
import { WorkerAppModule } from '@angular/platform-webworker';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
//...other imports...
@NgModule({
declarations: [
AppComponent
],
imports: [
WorkerAppModule,
//...other modules...
],
providers: [/*...providers...*/],
bootstrap: [AppComponent]
})
export class AppModule { }