This is a proof of concept to load web workers insides of an Angular 4 framework. This is NOT loading Angular inside of a Web Worker.
When running the app, open your console to see logs. I didn't develop fancy schmancy UI work. I just wanted to load and build the web workers in an Angular project. PR's welcome.
The project loads TWO web workers. One that is simple without dependencies, one with dependencies from node_modules and app internal.
Webpack is used to transpile the Web Workers to .js. The Webpack plugin worker-loader is used to load the workers into Angular.
The custom webpack.worker.config.js transpiles the workers ( this project is not ng ejected ). Note the entry points to how the workers
are transpile to the same location as their ts counterparts.
I attempted running unit tests using the web worker API ( load as a web worker ) and running in the same context as jasmine to no avail. The most successful ( and useful ) method is importing the web worker like any other file. I created a jasmine API and Worker API to accommodate a Worker context for production and browser context for tests.
For my own workers, I will be using demo 2 because I like the separation of the processing code from the worker and jasmine API. Webpack bundles the worker, so all is good.
- How to work with web workers (use a web worker IN cli project)
- The need for multiple output paths?
- TS2351 'new' doesn't work when .d.ts is installed via typings?
Run npm run worker or yarn worker.
Run npm run start or yarn start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run npm run build or yarn build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
I did not implement unit tests on the web workers. PR's welecome.
PR's welcome if you find this proof of concept useful and want to enhance.