Trying to include web workers in Angular by reading this article
ng eject doesn't work in Angular 6+
We need to alter the webpack config file by using third party libraries like
- ngx-build-plus: Though this was being highlighted in the error when I do
ng eject, this didn't work for me because I felt as we need to know the exact webpack.config to do changes manually, which is hard to know knowing the fact that Angular intentionally keeping the webpack config hidden. - angular-builders/custom-webpack
Trying, angular-builders/custom-webpack by reading this article
Done the setup
ng serve
Schema validation failed with the following errors:
Data path "" should NOT have additional properties(browserTarget).
err, looks like I need to run ng build instead
ng build
10% building modules 4/4 modules 0 active(node:14836) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:14836) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead 10% building modules 7/9 modules 2 active ...\hms3\src\bootstrap\scss\bootstrap.scssC:\xampp\htdocs\hms3\node_modules\html-webpack-plugin\lib\compiler.js:81
var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
^
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
at C:\xampp\htdocs\hms3\node_modules\html-webpack-plugin\lib\compiler.js:81:51
at compile (C:\xampp\htdocs\hms3\node_modules\webpack\lib\Compiler.js:296:11)
at hooks.afterCompile.callAsync.err (C:\xampp\htdocs\hms3\node_modules\webpack\lib\Compiler.js:552:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
at AsyncSeriesHook.lazyCompileHook (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at compilation.seal.err (C:\xampp\htdocs\hms3\node_modules\webpack\lib\Compiler.js:549:30)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at hooks.optimizeAssets.callAsync.err (C:\xampp\htdocs\hms3\node_modules\webpack\lib\Compilation.js:1312:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (C:\xampp\htdocs\hms3\node_modules\webpack\lib\Compilation.js:1303:32)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at hooks.additionalAssets.callAsync.err (C:\xampp\htdocs\hms3\node_modules\webpack\lib\Compilation.js:1298:36)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\xampp\htdocs\hms3\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
Googles "compilation.mainTemplate.applyPluginsWaterfall is not a function"
A solution seems promising link
npm install html-webpack-plugin@3.2.0 --save-dev
tries ng build again
ng build
Date: 2018-10-31T19:25:23.735Z
Hash: 7a4b922d48c98f859f84
Time: 22236ms
chunk {main} main.js, main.js.map (main) 4.13 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 440 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 2.72 MB [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.07 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.48 MB [initial] [rendered]
chunk {webworker} webworker.js, webworker.js.map (webworker) 3.49 MB [initial] [rendered]
WARNING in Lazy routes discovery is not enabled. Because there is neither an entryModule nor a statically analyzable bootstrap code in the main file.
ERROR in multi ./src/bootstrap/scss/bootstrap.scss ./src/styles.scss ./src/styles.css
Module not found: Error: Can't resolve './src/styles.css' in 'C:\xampp\htdocs\hms3'
looks like somewhere we mentioned to check for ./src/styles.css which isn't there..
founds in extra-webpack.config.js, removes it
ng build
Success!
Runs the app.. sees console errors.. FML
core.js:14064 Uncaught Error: StaticInjectorError(Platform: core)[NgZone]:
In this configuration Angular requires Zone.js
at new NgZone (core.js:14064)
at createNgZone (platform-webworker.js:993)
at resolveToken (core.js:951)
at tryResolveToken (core.js:899)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:796)
at initializeGenericWorkerRenderer (platform-webworker.js:957)
at platform-webworker.js:979
at core.js:14540
at Array.forEach (<anonymous>)
at createPlatform (core.js:14540)
NgZone @ core.js:14064
createNgZone @ platform-webworker.js:993
resolveToken @ core.js:951
tryResolveToken @ core.js:899
push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get @ core.js:796
initializeGenericWorkerRenderer @ platform-webworker.js:957
(anonymous) @ platform-webworker.js:979
(anonymous) @ core.js:14540
createPlatform @ core.js:14540
(anonymous) @ core.js:14561
(anonymous) @ core.js:14557
bootstrapWorkerUi @ platform-webworker.js:1751
./src/main.ts @ main.ts:27
__webpack_require__ @ bootstrap:78
0 @ main.ts:27
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
platform-webworker.js:999 GET http://localhost/hms3/dist/webworker.bundle.js 404 (Not Found)
Googles "In this configuration Angular requires Zone.js"
Adds import 'zone.js' on top of the main.ts file. which fixes the issue. Still I can see the following console error:
platform-webworker.js:999 GET http://localhost/hms3/dist/webworker.bundle.js 404 (Not Found)
Fixes the above error by referring this link. Here is the updated 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'
}
}
Sees no error in console and NO PAGE TOO!! WOW
Checks terminal:
npm run build-local
> hms3-gui@0.0.0 build-local C:\xampp\htdocs\hms3
> ng build --base-href /hms3/dist/
Date: 2018-11-01T06:38:33.539Z
Hash: 2f28c80c754055b70805
Time: 34602ms
chunk {main} main.js, main.js.map (main) 134 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 440 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 2.72 MB [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.07 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.48 MB [initial] [rendered]
chunk {webworker} webworker.js, webworker.js.map (webworker) 3.49 MB [initial] [rendered]
WARNING in Lazy routes discovery is not enabled. Because there is neither an entryModule nor a statically analyzable bootstrap code in the main file.
Looks like no entryModule is attached for bootstrap or the entryModule is not being attached because it is lazy loading
Found some leads:
I need to find a way to allow lazy loading in angular.
Hey. I'm interesting on applying webworkers too. Have you made it work ?