flex-layout.umd.js is trying to load rxjs/operators.js which is not present

[nagarajpatil]

Bug : flex-layout.umd.js is trying to load rxjs/operators.js which is not present

Getting error after upgrading rxjs to 5.4.3 and flexlayout from 2.0.0-rc.1 to v2.0.0-beta.10 Error loading https://npmcdn.com/rxjs@5.4.3/operators.js as "rxjs/operators" from https://npmcdn.com/@angular/flex-layout@v2.0.0-beta.10/bundles/flex-layout.umd.js

Looks like flex-layout.umd.js is trying to load operators.js which is not present.

[nagarajpatil]

With flexlayout 2.0.0-rc.1 i get below error. Appreciate any help on this. Error: (SystemJS) _angular_core.OpaqueToken is not a constructor TypeError: _angular_core.OpaqueToken is not a constructor at Object.eval (https://npmcdn.com/@angular/flex-layout@2.0.0-rc.1/bundles/flex-layout.umd.js:615:19)

[nagarajpatil]

My system.config.js looks like below /**

• PLUNKER VERSION
• (based on systemjs.config.js in angular.io)
• System configuration for Angular samples

• Adjust as necessary for your application needs. */ (function(global) { System.config({ // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER transpiler: 'ts', typescriptOptions: { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true }, meta: { 'typescript': { "exports": "ts" } }, paths: { // paths serve as alias 'npm:': 'https://npmcdn.com/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router-deprecated': 'npm:@angular/router-deprecated/bundles/router-deprecated.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
  
      // other libraries
      'tslib': 'npm:tslib',
      'rxjs': 'npm:rxjs@5.4.3',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ng-lightning/ng-lightning': 'npm:ng-lightning@1.2.1/bundles/ng-lightning.umd.js',
      'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
      'typescript': 'npm:typescript@2.0.3/lib/typescript.js',
      'angular2-datatable': 'npm:angular2-datatable@0.5.2',
      '@angular/material': 'npm:@angular/material@2.0.0-beta.5/bundles/material.umd.min.js',
      '@angular/animations': 'npm:@angular/animations@4.1.3/bundles/animations.umd.js',
      '@angular/flex-layout': 'npm:@angular/flex-layout@2.0.0-rc.1/bundles/flex-layout.umd.js',
      'lodash': 'npm:lodash/lodash.js',
      'save-as': 'npm:save-as@0.1.8',
      'tether': 'npm:tether@1.4.0/dist/js',
      'moment': 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js',
      'angular2-highcharts': 'https://cdn.rawgit.com/gevgeny/angular2-highcharts/v0.3.0/dist',
      'highcharts/highstock.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js',
  },
  
  //https://unpkg.com/angular2-highcharts@0.4.1/dist
  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
      app: {
          main: './main.ts',
          defaultExtension: 'ts'
      },
      tslib: {
          main: './tslib.js',
          defaultExtension: 'js'
      },
      rxjs: {
          defaultExtension: 'js'
      },
      'angular2-datatable': {
          main: './index.js',
          defaultExtension: 'js'
      },
      '@angular/flex-layout': {
          defaultExtension: 'js'
      },
      '@angular/material': {
          defaultExtension: 'js'
      },
      '@angular/animations': {
          defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
          main: './index.js',
          defaultExtension: 'js'
      },
      'ng-lightning': {
          defaultExtension: 'js'
      },
      'tether': {
          main: 'tether.js',
          defaultExtension: 'js'
      },
      'angular2-highcharts': {
          main: './index.js',
          defaultExtension: 'js'
      },
      'save-as': {
          main: './lib/index.js',
          defaultExtension: 'js'
      }
  }

  }); })(this);

[bOOm-X]

If you take a look at the package.json from the sources (not the one you retrieve from the npm package), you will notice: "rxjs": "^5.5.0" rxjs/operators come with the 5.5.0 version (It is not present in the 5.4.3)

[alanpurple]

in systemjs configuration, you need something like this

var map = {
        'app': 'app', // 'dist',
        'rxjs/operators':'lib/rxjs/operators/index.js',
        'rxjs': 'lib/rxjs',
        '@angular': 'lib/@angular'
    };

[nagarajpatil]

Hi All, I noticed @angular/flex-layout release 2.0.0-rc.1 has been renamed to 2.0.0-beta.6 I copied 2.0.0-beta.6 version locally and pinned my site to this location.

Changed below in flex-layout.umd.js (line 615) old: var BREAKPOINTS = new _angular_core.OpaqueToken('fxRawBreakpoints'); new: var BREAKPOINTS = new _angular_core.InjectionToken('fxRawBreakpoints'); I am not getting this OpaqueToken error anymore.

Reason: rxjs 5.4.3 is expecting InjectionToken. FYI: OpaqueToken is deprecated

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}