Angular5 con Webworkers

David Pineda Osorio

February 16, 2018

Contents
1 Introducción 1
2 Pasos a Seguir 1
2.1 Instalar NODE . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.2 Instalar Angular de Manera Global . . . . . . . . . . . . . . . 2
2.3 Crear Proyecto Angular y Activar Webpack . . . . . . . . . . 2
2.4 Instalar Paquetes de Webworkers . . . . . . . . . . . . . . . . 3
2.5 Cambio de modulos en hilo del bootstrap . . . . . . . . . . . 3
2.6 Cambiar el algoritmo de llamada principal . . . . . . . . . . . 3
2.7 Crear Archivo workerLoader.ts . . . . . . . . . . . . . . . . . 4
2.8 Actualizar webpack para construir el webworker . . . . . . . . 4

1 Introducción
Angular mantiene a lo largo de sus versiones algunos cambios, por lo que
activar webworkers diere levemente entre la versión 2+ y la 5 (actual a
16/02/2018).
Los webworkers permiten gestionar el procesamiento de la información
utilizando los núcleos del computador. Con esto es posible obtener una UI
uida mientras el resto de los procesadores hace el trabajo pesado.

2 Pasos a Seguir
Siguiente el tutorial disponible en Angularindepth artículo

1
2.1 Instalar NODE

Se escoge compilar la versión LTS de node, se descargar de la página web y

se descomprime.

./configure
make -j 4
make test
sudo npm install --save @angular/platform-webworker @angular/platform-webworker-dynamic

Podría fallar en el test con el módulo eslint, no importa, pasar a instalar.

2.2 Instalar Angular de Manera Global

Es necesario tener la consola de angular ng-cli disponible para todo el sis-

tema. Por lo que se debe instalar así:

sudo npm install --unsafe-perm -g @angular/cli

2.3 Crear Proyecto Angular y Activar Webpack

ng new AngApp
cd AngApp
npm install
npm install angular webpack --save-dev
ng eject

Se crea un archivo llamado webpack.cong.js y entrega un mensaje:

=======================================================================================
Ejection was successful.

To run your builds, you now need to do the following commands:

- "npm run build" to build.
- "npm test" to run unit tests.
- "npm start" to serve the app using webpack-dev-server.
- "npm run e2e" to run protractor.

Running the equivalent CLI commands will result in an error.

=======================================================================================

2
2.4 Instalar Paquetes de Webworkers

npm install --save @angular/platform-webworker @angular/platform-webworker-dynamic

2.5 Cambio de modulos en hilo del bootstrap

Reemplazar BrowserModule -> WorkerAppModule en archivo app.module.ts

import { WorkerAppModule } from '@angular/platform-webworker';

import { NgModule } from '@angular/core';

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

@NgModule({
declarations: [
AppComponent
],
imports: [
WorkerAppModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

2.6 Cambiar el algoritmo de llamada principal

Modicar archivo src/main.ts a llamar webworker.

import { enableProdMode } from '@angular/core';

import { bootstrapWorkerUi } from '@angular/platform-webworker';

import { environment } from './environments/environment';

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

3
bootstrapWorkerUi('webworker.bundle.js');

2.7 Crear Archivo workerLoader.ts

En la carpeta src crear el archivo.

Es necesario incluir paquetes polyll.ts, @angular/core y @angu-
lar/common
Importar platformWorkerAppDynamic
Importar AppModule y sacarlos de main.ts

2.8 Actualizar webpack para construir el webworker

ˆ Añadir webworker al punto de entrada para nuestro archivo worker-

Loader.ts, debiendo generar un archivo webworker.bundle.js .

ˆ Ir a la sección HtmlWebpackPlugin y excluir webworker de los pun-

tos de entrada.
ˆ Ir a la sección CommonChunksPlugin, prevenir que webworker sea
incluido
ˆ Ir a la sección AngularCompilerPlugin y denir explícitamente el
entryModule

//...some stuff...
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');
//...some stuff...

module.exports = {
//...some stuff...
"entry": {
"main": [
"./src/main.ts"
],
"polyfills": [
"./src/polyfills.ts"
],
"styles": [
"./src/styles.css"

4
 ],
"webworker": [
"./src/workerLoader.ts"
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
},
"module": { /*...a lot of stuff...*/ },
"plugins": [
//...some stuff...
new HtmlWebpackPlugin({
//...some stuff...
"excludeChunks": [
"webworker"
],
//...some more stuff...
}),
new BaseHrefWebpackPlugin({}),
new CommonsChunkPlugin({
"name": "inline",
"minChunks": null,
"chunks": [
"main",
"polyfills",
"styles"
]
}),
//...some stuff...
new AngularCompilerPlugin({
"mainPath": "main.ts",
"entryModule": "app/app.module#AppModule",
//...some stuff...
})
],
//...some more stuff...
};

5
 Finalmente, se debe instalar el webpack-dev-server y correr el sistema
de desarrollo con el comando, revisar artículo.