Error “Reflect.defineMetadata” while trying to load a transient web worker

问题

I am trying to load the aurelia framework from inside a web worker in order to decorate the worker as transient. Here is the worker loader:

importScripts('/jspm_packages/system.js');
System.config({
  defaultJSExtensions: true,
  transpiler: 'none',
  paths: {
    'npm:*': '/jspm_packages/npm/*'
  },
  map: {
    'aurelia-framework': 'npm:aurelia-framework@1.0.0-rc.1.0.1',
    'aurelia-dependency-injection': 'npm:aurelia-dependency-injection@1.0.0-rc.1.0.0',
    'aurelia-binding': 'npm:aurelia-binding@1.0.0-rc.1.0.2',
    'aurelia-metadata': 'npm:aurelia-metadata@1.0.0-rc.1.0.0',
    'aurelia-templating': 'npm:aurelia-templating@1.0.0-rc.1.0.0',
    'aurelia-loader': 'npm:aurelia-loader@1.0.0-rc.1.0.0',
    'aurelia-task-queue': 'npm:aurelia-task-queue@1.0.0-rc.1.0.0',
    'aurelia-pal': 'npm:aurelia-pal@1.0.0-rc.1.0.0',
    'aurelia-path': 'npm:aurelia-path@1.0.0-rc.1.0.0',
    'aurelia-logging': 'npm:aurelia-logging@1.0.0-rc.1.0.0',
    'aurelia-polyfills': 'npm:aurelia-polyfills@1.0.0-rc.1.0.0',
    'aurelia-fetch-client': 'npm:aurelia-fetch-client@1.0.0-rc.1.0.0/aurelia-fetch-client'
  }
});
System.import('files-service')
  .then(module => {
    let fs = new module.FilesService();
  });

Here is how I declare the worker class:

@transient()
export class FilesService {
  constructor() {
    httpClient = new HttpClient();
    // rest of stuff
  }
}

I get back this error:

Uncaught (in promise) Error: Reflect.defineMetadata is not a function
    at Object.define (http://localhost:9000/jspm_packages/npm/aurelia-metadata@1.0.0-rc.1.0.0/aurelia-metadata.js:49:15)
    at eval (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-rc.1.0.0/aurelia-dependency-injection.js:245:33)
    at execute (http://localhost:9000/dist/files-service.js:93:67)
    at u (http://localhost:9000/jspm_packages/system.js:5:97)
    at Object.execute (http://localhost:9000/jspm_packages/system.js:5:3188)
    at y (http://localhost:9000/jspm_packages/system.js:4:9948)
    at w (http://localhost:9000/jspm_packages/system.js:4:10327)
    at p (http://localhost:9000/jspm_packages/system.js:4:8205)
    at h (http://localhost:9000/jspm_packages/system.js:4:8590)
    at http://localhost:9000/jspm_packages/system.js:4:6896
    Error loading http://localhost:9000/dist/files-service.js

Any idea what might be wrong? BTW, if the worker is not declared as transient, there is no problem (in that case all these mappings are not required).

回答1:

Add the aurelia-pal-browser package to your SystemJS map, then update your code to something like this:

// Import Aurelia's [p]latform [a]bstraction [l]ibrary for the browser.
// The PAL does some basic feature detection and serves as an abstraction for
// browser globals.
System.import('aurelia-pal-browser')
  .then(pal => pal.initialize())
  // now import a small set of polyfills for things like Reflect.defineMetadata
  .then(() => System.import('aurelia-polyfills'))
  // now you should be all set...
  .then(() => System.import('files-service')
  .then(({ FilesService }) => {  // <-- look how fancy I am! ES6 destructuring FTW - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
    let fs = new FilesService();
  });

It looks like you want to use the container in your worker though- here's an example:

let container = null;

System.import('aurelia-pal-browser')
  .then(({ initialize }) => initialize())
  .then(() => System.import('aurelia-polyfills'))
  // import DI and instantiate a container for the worker to use.
  .then(() => System.import('aurelia-dependency-injection'))
  .then(({ Container }) => container = new Container())
  // use the container...
  .then(() => System.import('files-service')
  .then(({ FilesService }) => {
    let fs = container.get(FilesService);
  });

来源：https://stackoverflow.com/questions/38290142/error-reflect-definemetadata-while-trying-to-load-a-transient-web-worker

标签

javascript

aurelia