Angular Сгенерированное CLI-приложение с веб-рабочими

Считывая документацию Angular, вы можете найти несколько ссылок для загрузки всего вашего приложения Angular внутри веб-рабочего, поэтому ваш пользовательский интерфейс не будет блокироваться интенсивным использованием JS.

Однако на данный момент нет официальной информации о том, как это сделать, и единственной информации в документе Angular. заключается в том, что это экспериментальная функция.

Как я могу использовать этот подход для использования веб-работников в Angular?

ОТВЕТЫ

Ответ 1

Я потратил много времени, чтобы понять, как это сделать, поэтому я надеюсь, что это может помочь кому-то.

Предпосылки

Предположим, что у вас есть проект Angular (версия 2 или 4), сгенерированный с помощью Angular CLI 1.0 или выше.

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

Действия

1. Извлечь файл webpack

Так как Angular CLI v1.0, функция "извлечения", которая позволяет вам извлекать конфигурационный файл webpack и манипулировать им по своему усмотрению.

  • Запустите ng eject, поэтому Angular CLI создает файл webpack.config.js.

  • Запустите npm install, чтобы выполнялись новые зависимости, сгенерированные CLI.

2. Установка зависимостей загрузки веб-сайта

Выполнить npm install --save @angular/platform-webworker @angular/platform-webworker-dynamic

3. Изменения в загрузочном потоке пользовательского интерфейса

3.1 Изменения в app.module.ts

Замените 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 { }