Estou tentando mover toda a execução de um aplicativo Angular 2 para um trabalhador da Web, mas descobri que todos os exemplos disponíveis no momento estão usando o System.js e estou tentando fazer isso com um projeto baseado no WebPack (construído com angular-cli).

Alguém já fez isso ou tem uma idéia de como fazer isso com o WebPack?

Abaixo está o meu arquivo de inicialização main.ts:

import './polyfills.ts';


import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';


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

import {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('/app/loader.js');

Minhasloader.js se parece com isso:

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

platformWorkerAppDynamic().bootstrapModule(AppModule);

E meuapp.module.tsestá declarando@NgModuledeste jeito:

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


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

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

No entanto, quando o executo, recebo o erroSyntaxError não capturado: importação de token inesperada no loader.js: 1.

O problema parece relacionado ao webpack e a alguma falta de importação de libs @angular no lado do webworker, conforme sugerido por Tamas Gegedus e MathMate, portanto, o próximo passo é modificar o arquivo de configuração do webpack para fornecer todas as libs necessárias ao webworker . Eu vou trabalhar nisso.

----------- ATUALIZAÇÃO -----------

Como o angular-cli não fornece acesso ao arquivo webpack.config.js, incluí o meu, fazendo pequenas alterações no código para que ele funcione. Criei o segundo ponto de entrada no arquivo de configuração do webpack e estou recebendo o erroVM33: 106 ReferenceError não capturado: a janela não está definida.

O arquivo de configuração do Webpack fica assim:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./config/helpers');


module.exports = {
  entry: {
    'app': ['./src/polyfills.ts', './src/vendor.ts', './src/main.ts'],
    'webworker': ['./src/workerLoader.ts']
  },

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  output: {
    path: helpers.root('dist'),
    publicPath: 'http://localhost:8080/',
    filename: '[name].js'
  },

  devtool: 'cheap-module-eval-source-map',

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader?tsconfig=./src/tsconfig.json', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      excludeChunks: ['webworker']
    }),

    new ExtractTextPlugin('[name].css')
  ]
};

onde polyfills.ts e vendor.ts incluem polyfills e libs angulares, respectivamente.

Eu criei 2 pontos de entrada, que geram 2 saídas (app.js e webworker.js).

Com o HtmlWebpackPlugin, o primeiro é incluído no arquivo index.html, mas não o segundo.

Quando index.html está incluído,main.ts (contido em app.js) é chamado etenta inicializar o webworker usando a segunda saída do webpack (webworker.js):

import {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('../webworker.js');

O webworker.js foi gerado pelo webpack usando a entrada workerLoader.ts, semelhante ao loader.js anterior, mas incluindo algumas importações.

O arquivo WorkerLoader.ts aparece assim:

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

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

platformWorkerAppDynamic().bootstrapModule(AppModule);

Sei que o trabalhador da Web foi gerado, conforme mostrado na imagem a seguir, mas conforme mostrado na imagem, recebo o erroVM33: 106 ReferenceError não capturado: a janela não está definida, e nada é exibido, exceto a mensagem Carregando de index.html.

Por outro lado, acho que a configuração do webpack está OK porque, se executar o aplicativo com o webpack no modo NO webworker, funciona bem.

No momento, acho que esse problema está relacionado à inicialização do webworker, mas estou bastante atolado aqui.

Qualquer ajuda seria apreciada ;)