Запустите Angular 2 приложение в веб-рабочем столе с помощью WebPack

Я пытаюсь переместить все выполнение приложения Angular 2 веб-рабочему, но я обнаружил, что все доступные сейчас примеры - это использование System.js, и я пытаюсь сделать это с проектом на основе WebPack (построен с angular -cli).

Кто-нибудь сделал это или подумал о том, как это сделать с помощью WebPack?

Ниже мой файл bootstrap 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');

Ответы

Ответ 1

Я, наконец, решил проблему:)

ПРИМЕЧАНИЕ:, если у вас сгенерированный проект с использованием Angular CLI 1.0 или выше, теперь вы можете использовать свой собственный файл конфигурации webpack, и это упрощает весь процесс. Проверьте этот ответ в этом случае.

После запуска кода с моей настраиваемой конфигурацией webpack я понял, что ошибка VM33: 106 Uncaught ReferenceError: окно не определено, вызвано webpack-dev-server.

Я решил это:

1 - создание автономной сборки webpack

$: webpack --watch #this creates the bundes at myProject/dist

и

2 - работа с другим инструментом devserver, например simplehttpserver

$: npm install simplehttpserver -g
$: simplehttpserver -p 8080 dist/ #as my webpack bundle is included in index.html using that port by default

И voilà, ошибка ушла и она просто работает!

 

Изменения, примененные к проекту angular -cli: Конфигурация Webpack

Позвольте мне суммировать изменения webpack в отношении исходного проекта angular -CLI.

Поскольку angular-cli не предоставляют доступ к файлу webpack.config.js, и настройка webpack является ключом к использованию веб-мастеров, я включил мой, делая небольшие изменения в коде.

Файл конфигурации Webpack выглядит следующим образом:

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')
  ]
};

Ответ 2

Как уже упоминал в комментарии Tamas Hegedus, скорее всего, ваш пакет веб-пакетов по-прежнему ссылается на файл es6 для loader.js.

Вам нужно создать отдельный узел с точкой входа для загрузчика script.

Если вы делитесь своей конфигурацией webpack, тогда было бы легче сказать, где все может пойти не так.

Также ваш загрузчик script должен иметь требуемые полисы. Вы можете добавить

import 'core-js/es7/reflection'; import 'zone.js/dist/zone';