Skip to content

Instantly share code, notes, and snippets.

@kamlekar
Last active Nov 23, 2020
Embed
What would you like to do?
My attempt to include Serviceworkers in Angular 7.0.1

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.

@glmanhtu
Copy link

glmanhtu commented Nov 13, 2018

Hey. I'm interesting on applying webworkers too. Have you made it work ?

@kamlekar
Copy link
Author

kamlekar commented Nov 23, 2020

Hey, nope. you might want to check this on stackoverflow for more info: https://stackoverflow.com/q/53100379/1577396

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment