[BUG] Compilation error with "Angular's Web worker"

🐞 Bug report

Description

After following the official angular instructions for enabling and using custom web workers the project wont compile anymore.

Reproduction

create a new app
follow these instructions https://angular.io/guide/web-worker
in the app.component.ts just declare a WW readonly worker = WebWorker.fromFunction<number, number>(compute);

and it will give you the following error:

ERROR in ./node_modules/@ng-web-apis/workers/__ivy_ngcc__/fesm2015/ng-web-apis-workers.js
Module parse failed: Cannot read property 'length' of undefined
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
TypeError: Cannot read property 'length' of undefined
    at /home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/worker-plugin/dist/worker-plugin.js:64:44
    at SyncBailHook.eval [as call] (eval at create (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Parser.walkNewExpression (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:1822:25)
    at Parser.walkExpression (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:1613:10)
    at Parser.walkAssignmentExpression (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:1784:10)
    at Parser.walkExpression (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:1583:10)
    at Parser.walkExpressionStatement (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:1022:8)
    at Parser.walkStatement (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:964:10)
    at Parser.walkStatements (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:868:9)
    at /home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:1017:9
    at Parser.inBlockScope (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:2060:3)
    at Parser.walkBlockStatement (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:1014:8)
    at Parser.walkStatement (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:949:10)
    at Parser.walkTryStatement (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:1101:9)
    at Parser.walkStatement (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:994:10)
    at Parser.walkStatements (/home/vm/to_delete/angular/angular-tour-of-heroes/node_modules/webpack/lib/Parser.js:868:9)

inside the node_modules/worker-plugin/dist/worker-plugin.js (provided by angular)
it tries to access to optsExpr.properties which is undefined

node_modules/worker-plugin/dist/worker-plugin.js

if (optsExpr) {
          opts = {};

          for (var i = optsExpr.properties.length; i--;) {
            var prop = optsExpr.properties[i];

            if (prop.type === 'Property' && !prop.computed && !prop.shorthand && !prop.method) {
              opts[prop.key.name] = parser.evaluateExpression(prop.value).string;

              if (prop.key.name === 'type') {
                typeModuleExpr = prop;
              } else {
                hasInitOptions = true;
              }
            }
          }
        }

optsExpr should look like this:

optsExpr: Node {
    type: 'ObjectExpression',
    start: 606,
    end: 624,
    loc: SourceLocation { start: [Position], end: [Position] },
    range: [ 606, 624 ],
    properties: [ [Node] ]
  }

but instead i look like this (properties is missing and there is no check in the lib)

optsExpr: Node {
    type: 'Identifier',
    start: 1471,
    end: 1478,
    loc: SourceLocation { start: [Position], end: [Position] },
    range: [ 1471, 1478 ],
    name: 'options'
  }

after digging a little bit I found out that this is caused by the "webWorkerTsConfig": "tsconfig.worker.json" field added by angular in the angular.json file.

the file created looks like this:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

removing such field from the angular.json makes the project compile again but the angular's web worker wont work.

Expected behavior

Work along aside the angular web worker.

The desiderata here is to have the library work along aside the angular way also it would be nice to have the ability to import the Web worker from a file, currently only from function is implemented and it gives you some problem: for instance one can't use external libraries inside such function (it uses webpack ref)

Versions

OS: ubuntu 16
Browser Chorme and Firefox
Angular latest (tested also with 10.x.x)

ng-web-apis / workers Goto Github PK

workers's People

Contributors

Stargazers

Watchers

Forkers

workers's Issues

[BUG] Compilation error with "Angular's Web worker"

🐞 Bug report

Description

Reproduction

Expected behavior

Versions

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent