2

I am having a sudden issue with my Angular4 application where I am getting the following error message:

GET http://degould-login.dev/node_modules/rxjs/operators.js 404 (Not Found)

I am unsure as to why it has suddenly appeared and I changed nothing within the packages or core architecture that may cause this issue.

I can see that the 'operators'js' file does NOT exist within the npm:rxjs folder but I don't know what is requesting it.

My System.JS file

 /**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
            '@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
            '@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/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs'                       : 'npm:rxjs',
            '@ngrx'                      : 'node_modules/@ngrx',
            'angular2-jwt'               : 'node_modules/angular2-jwt',
            'd3'                         : 'npm:d3',
            'ng2-charts'                 : 'npm:ng2-charts',
            'chart.js'                   : 'npm:chart.js',
            '@agm/core'                  : 'npm:@agm'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            'rxjs': {
                defaultExtension: 'js'
            },
            '@ngrx/store': {
                main: 'bundles/store.umd.js',
                format: 'cjs'
            },
            '@ngrx/core': {
                main: 'bundles/core.umd.js',
                format: 'cjs'
            },
            '@ngrx/store-devtools': {
                main: 'bundles/store-devtools.umd.js',
                format: 'cjs'
            },
            'angular2-jwt': {
                main: 'angular2-jwt.js',
                format: 'js'
            },
            'd3': {
                main: 'build/d3.js',
                defaultExtension: 'js'
            },
            'ng2-charts': {
                main: 'bundles/ng2-charts.umd.js',
                defaultExtension: 'js'
            },
            'chart.js': {
                main: 'dist/Chart.bundle.js',
                defaultExtension: 'js'
            },
            '@agm/core': {
                main: 'core/core.umd.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

and my package.json

{
  "name": "degould-dashboard-frontend",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run build-css-watch\"",
    "build": "tsc",
    "tsc:w": "tsc -w",
    "build-css": "node-sass --include-path scss assets/css -o app/assets/css",
    "build-css-watch": "node-sass --include-path scss assets/css -wo app/assets/css",
    "test": "concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "testnotsc": "karma start karma.conf.js"
  },
  "license": "ISC",
  "dependencies": {
    "@agm/core": "^1.0.0-beta.1",
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/platform-server": "4.0.0",
    "@angular/router": "^4.2.4",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.1",
    "@ngrx/store-devtools": "^3.2.4",
    "@types/chart.js": "^2.6.1",
    "angular-2-local-storage": "^1.0.1",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.6.0",
    "core-js": "^2.4.1",
    "d3": "^4.10.0",
    "heatmap.js": "^2.0.5",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "ng2-charts": "^1.6.0",
    "redux": "^3.6.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.5.2",
    "sass": "^0.5.0",
    "systemjs": "0.19.39",
    "tether": "^1.4.0",
    "toastr-ng2": "^4.1.1",
    "weather-icons": "^1.3.2",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.6",
    "@types/d3": "^4.10.0",
    "@types/jasmine": "^2.5.36",
    "concurrently": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-coffee": "latest",
    "gulp-concat": "latest",
    "gulp-connect": "latest",
    "gulp-sass": "latest",
    "gulp-typescript": "^3.0.2",
    "gulp-uglify": "latest",
    "gulp-useref": "^3.1.2",
    "gulp-util": "latest",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^4.0.9",
    "typescript": "2.4.1",
    "typings": "^1.3.2"
  }
}

Does anyone know why I would be getting this error? I have reinstalled my npm packages and I have also reinstalled rxjs manually.

Thanks

James
  • 2,800
  • 7
  • 45
  • 81
  • Hi I had the same problem in our production server. I went ahead and downgraded the `rxjs` version to `^5.0.1` and it works well – Shan-Desai Nov 09 '17 at 16:25
  • What RxJS version you have and how do you import it? – martin Nov 09 '17 at 16:26
  • I was using the latest but even downgrading to that version didn't help. I have supplied my package.json file as well in the original question – James Nov 09 '17 at 16:29
  • Sorry I supplied the wrong package.json file. the correct one is now in the question – James Nov 09 '17 at 16:31

2 Answers2

-1

I see from package.json you have angular/cli. Are you using it?

If so, common posts indicate systemjs is not needed with angular/cli. Is there any particular reason why you have it?

If this was originally systemjs, now angular/cli, see Move project from SystemJS to Angular CLI / Webpack

If you want to keep systemjs, addressing the problem directly,

I note GET http://degould-login.dev/node_modules/rxjs/operators.js - there is no operators.js in the rxjs package, there's an operators folder.
So perhaps this is related to an import statement having a rogue '.js'?

Richard Matsen
  • 20,671
  • 3
  • 43
  • 77
-1

This error popped up while I was answering another question (using a Plunker & SystemJs).

This is the systemjs.config.js rxjs map entry that worked on that Plunker. Note, the order is probably important.

// other libraries
'rxjs/operators':            'npm:rxjs@5.5.2/operators/index.js',
'rxjs':                      'npm:rxjs@5.5.2',
Richard Matsen
  • 20,671
  • 3
  • 43
  • 77