https://github.com/morrisjdev/ng-webworker-helper
a helper to use webworker in an angular application
https://github.com/morrisjdev/ng-webworker-helper
angular ng-webworker-helper typescript web-worker workers
Last synced: about 1 year ago
JSON representation
a helper to use webworker in an angular application
- Host: GitHub
- URL: https://github.com/morrisjdev/ng-webworker-helper
- Owner: morrisjdev
- License: mit
- Created: 2018-10-24T11:03:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-05T17:51:18.000Z (over 3 years ago)
- Last Synced: 2025-03-05T13:18:51.578Z (about 1 year ago)
- Topics: angular, ng-webworker-helper, typescript, web-worker, workers
- Language: JavaScript
- Homepage:
- Size: 701 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-webworker-helper [](https://travis-ci.org/morrisjdev/ng-webworker-helper) [](https://codeclimate.com/github/morrisjdev/ng-webworker-helper/maintainability)
This project is an extension for Angular that should make working with WebWorker simple. This project enables you to
run code in a seperate thread and make the UI run faster.
## Installation
To use the project use
```
npm install ng-webworker-helper -S
npm install concurrently -D
```
### Building the webworker files
You can now use Webworkers, but you have to enable Angular to transpile your webworker files into a seperate .js file.
First of all copy the files [webworker.webpack.config.js](webworker.webpack.config.js) and
[webworker.webpack.dev.config.js](webworker.webpack.dev.config.js) in your projects root folder.
Then copy the file [src/tsconfig.worker.json](src/tsconfig.worker.json) to your src folder.
Now add this entries to the `angular.json` of your project:
```json
{
...,
"architect": {
...,
"build-worker": {
"builder": "@angular-devkit/build-webpack:webpack",
"options": {
"webpackConfig": "./webworker.webpack.config.js"
}
},
"dev-worker": {
"builder": "@angular-devkit/build-webpack:webpack",
"options": {
"webpackConfig": "./webworker.webpack.dev.config.js"
}
},
...
}
}
```
In your `package.json` add the entries
```
"build-worker": "ng run :build-worker",
"dev-worker": "ng run :dev-worker"
```
to the scripts section.
Change the scripts `build` and `start` like this:
```
"start": "concurrently --kill-others \"npm run dev-worker\" \"ng serve\"",
"build": "npm run build-worker && ng build",
```
### Add provider in angular
In your `app.module.ts` add `NgWebworkerService` in the providers section.
## Usage
To use webworkers you have to create the folder `worker` in the src directory of your project.
Create a file named `main.worker.ts` with the following content:
````js
import {registerWebworker, WebworkerHandlerBase} from 'ng-webworker-helper';
registerWebworker({
'test': TestWorker
});
````
Now you can create files with custom worker code for example `test.worker.ts`:
````
class TestWorker extends WebworkerHandlerBase {
run(data: number): number {
const before = new Date();
let count = 0;
this.send('das ist ein test');
while (true) {
count++;
const now = new Date();
if (now.valueOf() - before.valueOf() > data) {
break;
}
}
return count;
}
}
````
You can execute the function in a worker using:
````
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
constructor(private webworkerService: NgWebworkerService) {
//This executes code in TestWorker
this.webworkerService.execute('test', 10000).subscribe(console.log);
//This executes a custom function in a webworker thread
this.webworkerService.executeFunction((t) => {
return t * 10;
}, 100).subscribe(console.log);
}
}
````
## Author
[Morris Janatzek](http://morrisj.net) ([morrisjdev](https://github.com/morrisjdev))