Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not compatible with Angular 12 & Webpack 5 --prod build (required update)

See original GitHub issue

Hello, first, thanks for this awesome library!

Angular 12 is forcing an upgrade to Webpack 5 (it is no longer optional), and this package does not seem to be compatible with the latest update – upgrading has resulted in 100% reproducibly broken web-workers — https://github.com/angular/angular-cli/releases/tag/v12.0.0-next.9 (angular cli release notes regarding Webpack forced upgrade)

I have created a minimal reproduction that demonstrates the various issues I have not been able to solve. I’ve tried various attempts at getting the syntax working, but so far nothing has.

Depending on the syntax used, fromWorker either silently fails entirely, or throws strange errors attempting to communicate with its workers.

Any thoughts about this? I can’t seem to find a good reason why this doesn’t work, and the error messages are super vague (or at least I am not familiar enough to understand them).

Reproduction steps:

git clone git@github.com:lincolnthree/example-webworker-broken-angular.git
git checkout observable-webworker
npm i
ng serve --prod
# open localhost:4200
# open dev tools and observe failures

App code:


    const input$ = new Subject<string>();

    /*
     * 1. This syntax results in code that never seems to be called/never resolves.
     */
    const getWorkerFailsSilently = () => new Worker(new URL('./app.worker', import.meta.url), { type: 'module' });
    fromWorker(getWorkerFailsSilently, input$, null, {
      terminateOnComplete: true
    })
      .subscribe({
        complete: () => console.log('1. getWorkerFailsSilently COMPLETE'),
        error: error => console.error('1. getWorkerFailsSilently', error),
        next: msg => console.warn('1. getWorkerFailsSilently', msg)
      });


    /*
     * 2. This syntax results in code that gets called but results in an error.
     */
    const getWorkerFailsWithError = () => {
      const url = new URL('./app.worker', import.meta.url);
      const worker = new Worker(url, { type: 'module' });
      return worker;
    };
    fromWorker(getWorkerFailsWithError, input$, null, {
      terminateOnComplete: true
    })
      .subscribe({
        complete: () => console.log('2. getWorkerFailsWithError COMPLETE'),
        error: error => console.error('2. getWorkerFailsWithError', error),
        next: msg => console.warn('2. getWorkerFailsWithError', msg)
      });

    /*
     * 3. This syntax results in code that gets called but results in an error (expected since it's not using 'type: "module"').
     */
    const getWorkerFailsWithErrorNoModule = () => {
      const url = new URL('./app.worker', import.meta.url);
      const worker = new Worker(url);
      return worker;
    };
    fromWorker(getWorkerFailsWithErrorNoModule, input$, null, {
      terminateOnComplete: true
    })
      .subscribe({
        complete: () => console.log('3. getWorkerFailsWithErrorNoModule COMPLETE'),
        error: error => console.error('3. getWorkerFailsWithErrorNoModule', error),
        next: msg => console.warn('3. getWorkerFailsWithErrorNoModule', msg)
      });

    input$.next('Hello world!');

Worker code:

/// <reference lib="webworker" />

import { DoWork, ObservableWorker } from 'observable-webworker';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@ObservableWorker()
export class ExampleWorker implements DoWork<string, string> {

  constructor() {
    console.warn('Created worker');
  }

  public work(input$: Observable<string>): Observable<string> {
    return input$.pipe(
      switchMap(input => {
        console.warn('Worker received message:', input)
        return of('message from worker: ' + input);
      })
    );
  }

}

Messages in console:

Angular is running in development mode. Call enableProdMode() to enable production mode.
16:56:12.386 localhost/:1 Refused to execute script from 'http://localhost:4200/dca7a459b5ae24595be1.ts' because its MIME type ('video/mp2t') is not executable.
16:56:12.386 app.component.ts:61 3. getWorkerFailsWithErrorNoModule Event {isTrusted: true, type: "error", target: Worker, currentTarget: Worker, eventPhase: 2, …}
error @ app.component.ts:61
__tryOrUnsub @ Subscriber.js:183
error @ Subscriber.js:135
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
worker.onerror @ observable-webworker.js:50
wrapFn @ zone.js:803
ZoneDelegate.invokeTask @ zone.js:434
onInvokeTask @ core.js:28619
ZoneDelegate.invokeTask @ zone.js:433
Zone.runTask @ zone.js:205
ZoneTask.invokeTask @ zone.js:516
invokeTask @ zone.js:1656
globalZoneAwareCallback @ zone.js:1682
error (async)
customScheduleGlobal @ zone.js:1808
ZoneDelegate.scheduleTask @ zone.js:421
onScheduleTask @ zone.js:311
ZoneDelegate.scheduleTask @ zone.js:414
Zone.scheduleTask @ zone.js:248
Zone.scheduleEventTask @ zone.js:274
(anonymous) @ zone.js:1965
desc.set @ zone.js:864
rxjs__WEBPACK_IMPORTED_MODULE_8__.Observable.pipe.kind.kind @ observable-webworker.js:50
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ map.js:16
subscribe @ Observable.js:23
call @ dematerialize.js:9
subscribe @ Observable.js:23
AppComponent @ app.component.ts:59
AppComponent_Factory @ app.component.ts:66
getNodeInjectable @ core.js:3549
instantiateRootComponent @ core.js:10102
createRootComponent @ core.js:12463
create @ core.js:25102
bootstrap @ core.js:29573
(anonymous) @ core.js:29286
_moduleDoBootstrap @ core.js:29286
(anonymous) @ core.js:29256
ZoneDelegate.invoke @ zone.js:400
onInvoke @ core.js:28632
ZoneDelegate.invoke @ zone.js:399
Zone.run @ zone.js:160
(anonymous) @ zone.js:1318
ZoneDelegate.invokeTask @ zone.js:434
onInvokeTask @ core.js:28619
ZoneDelegate.invokeTask @ zone.js:433
Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:620
Promise.then (async)
scheduleMicroTask @ zone.js:603
ZoneDelegate.scheduleTask @ zone.js:424
Zone.scheduleTask @ zone.js:248
Zone.scheduleMicroTask @ zone.js:268
scheduleResolveOrReject @ zone.js:1308
ZoneAwarePromise.then @ zone.js:1466
bootstrapModule @ core.js:29281
4431 @ main.ts:11
__webpack_require__ @ bootstrap:19
__webpack_exec__ @ main.js:597
(anonymous) @ main.js:598
__webpack_require__.O @ chunk loaded:23
(anonymous) @ main.js:599
webpackJsonpCallback @ jsonp chunk loading:33
(anonymous) @ main.js:1
Show 23 more frames
16:56:12.399 index.js:52 [WDS] Live Reloading enabled.
16:56:12.405 dca7a459b5ae24595be1.ts:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.
16:56:12.405 app.component.ts:44 2. getWorkerFailsWithError Event {isTrusted: true, type: "error", target: Worker, currentTarget: Worker, eventPhase: 2, …}
error @ app.component.ts:44
__tryOrUnsub @ Subscriber.js:183
error @ Subscriber.js:135
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
worker.onerror @ observable-webworker.js:50
wrapFn @ zone.js:803
ZoneDelegate.invokeTask @ zone.js:434
onInvokeTask @ core.js:28619
ZoneDelegate.invokeTask @ zone.js:433
Zone.runTask @ zone.js:205
ZoneTask.invokeTask @ zone.js:516
invokeTask @ zone.js:1656
globalZoneAwareCallback @ zone.js:1682
error (async)
customScheduleGlobal @ zone.js:1808
ZoneDelegate.scheduleTask @ zone.js:421
onScheduleTask @ zone.js:311
ZoneDelegate.scheduleTask @ zone.js:414
Zone.scheduleTask @ zone.js:248
Zone.scheduleEventTask @ zone.js:274
(anonymous) @ zone.js:1965
desc.set @ zone.js:864
rxjs__WEBPACK_IMPORTED_MODULE_8__.Observable.pipe.kind.kind @ observable-webworker.js:50
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ map.js:16
subscribe @ Observable.js:23
call @ dematerialize.js:9
subscribe @ Observable.js:23
AppComponent @ app.component.ts:42
AppComponent_Factory @ app.component.ts:66
getNodeInjectable @ core.js:3549
instantiateRootComponent @ core.js:10102
createRootComponent @ core.js:12463
create @ core.js:25102
bootstrap @ core.js:29573
(anonymous) @ core.js:29286
_moduleDoBootstrap @ core.js:29286
(anonymous) @ core.js:29256
ZoneDelegate.invoke @ zone.js:400
onInvoke @ core.js:28632
ZoneDelegate.invoke @ zone.js:399
Zone.run @ zone.js:160
(anonymous) @ zone.js:1318
ZoneDelegate.invokeTask @ zone.js:434
onInvokeTask @ core.js:28619
ZoneDelegate.invokeTask @ zone.js:433
Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:620
Promise.then (async)
scheduleMicroTask @ zone.js:603
ZoneDelegate.scheduleTask @ zone.js:424
Zone.scheduleTask @ zone.js:248
Zone.scheduleMicroTask @ zone.js:268
scheduleResolveOrReject @ zone.js:1308
ZoneAwarePromise.then @ zone.js:1466
bootstrapModule @ core.js:29281
4431 @ main.ts:11
__webpack_require__ @ bootstrap:19
__webpack_exec__ @ main.js:597
(anonymous) @ main.js:598
__webpack_require__.O @ chunk loaded:23
(anonymous) @ main.js:599
webpackJsonpCallback @ jsonp chunk loading:33
(anonymous) @ main.js:1
Show 23 more frames

Versions:

sharktop:example-web-worker lincoln$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.0.0-next.9
Node: 14.15.0
OS: darwin x64

Angular: 12.0.0-next.9
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0-next.9
@angular-devkit/build-angular   12.0.0-next.9
@angular-devkit/core            12.0.0-next.9
@angular-devkit/schematics      12.0.0-next.9
@angular/cdk                    12.0.0-next.7
@schematics/angular             12.0.0-next.9
rxjs                            6.6.7
typescript                      4.2.4

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:30

github_iconTop GitHub Comments

1reaction
lincolnthreecommented, Apr 24, 2021

Thanks @zakhenry! Again, I really truly appreciate your help with this issue. I would not have been able to figure this out. Thanks again for supporting such a great tool.

1reaction
zakhenrycommented, Apr 24, 2021

Hey @lincolnthree thank for updating with your resolution, I’ve updated the readme with details from your findings to help out the next person that is using Webpack 5. I’m intending to move this repo to Angular 12, but will wait for general release

Read more comments on GitHub >

github_iconTop Results From Across the Web

What benefits does Webpack 5 bring to Angular 12?
Today, we're happy to announce that we're releasing a production ready version of Webpack 5 support in Angular.
Read more >
ngx-build-plus - npm
Extends the Angular CLI's build process. ... cases like webpack externals; Simple to use; ⏏️ No eject needed ... Updating to Version 8....
Read more >
Upgrading from AngularJS to Angular
Applications built with component directives are much easier to migrate to Angular than applications built with lower-level features like ng-controller , ng- ...
Read more >
sass-loader - webpack - JS.ORG
Loads a Sass/SCSS file and compiles it to CSS. Getting Started. To begin, you'll need to install sass-loader : npm install sass- ...
Read more >
Angular without angular cli for Angular 12.x and webpack 5.x
Configure the project. Install dependencies. Let's first install the required angular libraries: $ npm install @angular/core@^12 \ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

FormArray usecase

Next page

Angular production builds breaks the web worker