我正在尝试在我的现有Angular 7.0.1项目(中型项目)中设置Web Worker。 在查看以下链接后,我完成了设置:
- Angular 4应用程序的Web Workers设置
- Webpack配置更改适用于Angular 6+应用程序 - 库和相关文章
以下是我对每个文件进行的更改:
./src/main.ts
import 'zone.js';
import { enableProdMode } from '@angular/core';
import { bootstrapWorkerUi } from '@angular/platform-webworker';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
console.log("main.ts file loaded!");
bootstrapWorkerUi('webworker.js');
./src/workerLoader.ts
import 'polyfills.ts';
import '@angular/core';
import '@angular/common';
console.log("workerLoader.ts file loaded!");
import { platformWorkerAppDynamic } from '@angular/platform-webworker-dynamic';
import { AppModule } from './app/app.module';
platformWorkerAppDynamic().bootstrapModule(AppModule);
./angular.json
"projects": {
"[project name]": {
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
}
...
...
}
}
}
}
}
./extra-webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
"entry": {
"webworker": [
"./src/workerLoader.ts"
]
},
"plugins": [
new HtmlWebpackPlugin({
"excludeChunks": [
"webworker"
],
})
],
"output": {
"globalObject": 'this'
}
}
./tsconfig.json
:这是 TypeScript 项目的配置文件,它描述了编译器如何编译 TypeScript 代码。{
...
...
"angularCompilerOptions": {
"entryModule": "./app/app.module#AppModule"
}
}
我可能走了完全错误的方向,因为我只需要在 Angular 项目中包含并运行一个 angular service worker 库(应该非常容易)。
我尝试包含 webworker 的主要目的是让 Web 应用程序在多线程上运行,以便屏幕上的动画、复选框、自定义下拉框和滚动效果可以顺畅地执行。