locked
Getting error on loading in angular2 RC4: Error: XHR error (404 Not Found) loading RRS feed

  • Question

  • User-531736323 posted

    I am getting the following exception when the application is loading on the browser. Please find the config files and error details below.

    Error

    Failed to load resource: the server responded with a status of 404 (Not Found)
    localhost/:21 Error: Error: XHR error (404 Not Found) loading http://localhost:49769/node_modules/@angular/platform-browser-dynamic/index.js
    	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (https://npmcdn.com/zone.js@0.6.12?main=browser:769:30)
    	    at ZoneDelegate.invokeTask (https://npmcdn.com/zone.js@0.6.12?main=browser:356:38)
    	    at Zone.runTask (https://npmcdn.com/zone.js@0.6.12?main=browser:256:48)
    	    at XMLHttpRequest.ZoneTask.invoke (https://npmcdn.com/zone.js@0.6.12?main=browser:423:34)
    	Error loading http://localhost:49769/node_modules/@angular/platform-browser-dynamic/index.js as "@angular/platform-browser-dynamic" from http://localhost:49769/app/main.js(anonymous function) @ localhost/:21
    http://localhost:49769/node_modules/@angular/core/index.js Failed to load resource: the server responded with a status of 404 (Not Found)



    Package.json

          {
          "version": "1.0.0",
          "name": "ngcorecontacts",
          "scripts": {
            "postinstall": "typings install",
            "typings": "typings"
          },
          "dependencies": {
        "@angular/common": "2.0.0-rc.4",
        "@angular/compiler": "2.0.0-rc.4",
        "@angular/core": "2.0.0-rc.4",
        "@angular/forms": "0.2.0",
        "@angular/http": "2.0.0-rc.4",
        "@angular/platform-browser": "2.0.0-rc.4",
        "@angular/platform-browser-dynamic": "2.0.0-rc.4",
        "@angular/router": "3.0.0-beta.2",
    
        "systemjs": "0.19.27",
        "core-js": "^2.4.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "zone.js": "^0.6.12",
    
        "bootstrap": "^3.3.6"
      },
        "devDependencies": {
            "concurrently": "^2.0.0",
            "lite-server": "^2.2.0",
            "tslint": "^3.7.4",
            "typescript": "^1.8.10",
            "typings": "^1.0.4"
        },
        "repository": {}
    

    In Systemjs.Config.js

     /**
     * System configuration for Angular 2 samples
     * Adjust as necessary for your application needs.
     */
    (function (global) {
    
        // map tells the System loader where to look for things
        var map = {
            'app': 'app',
            'rxjs': 'node_modules/rxjs',
            '@angular': 'node_modules/@angular'
        };
    
        // packages tells the System loader how to load when no filename and/or no extension
        var packages = {
            'app': { main: 'main.js', defaultExtension: 'js' },
            'rxjs': { defaultExtension: 'js' }
        };
    
        var packageNames = [
          '@angular/common',
          '@angular/compiler',
          '@angular/core',
          '@angular/forms',
          '@angular/http',
          '@angular/platform-browser',
          '@angular/platform-browser-dynamic',
          '@angular/router'
        ];
    
        // add package entries for angular packages in the form 
        // '@angular/common': { main: 'index.js', defaultExtension: 'js' }
        packageNames.forEach(function (pkgName) {
            packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
        });
    
        var config = {
            map: map,
            packages: packages
        };
    
        System.config(config);
    
    })(this);
    

    tsconfig.json

     {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
      }
    }
    

    What is it I am missing here?

    Tuesday, July 5, 2016 7:12 PM

Answers

  • User-531736323 posted

    I found the solution, from the wwwroot the application cannot refer to the node_modules. Instead we need to copy the required under wwwroot/libs using gulp. Then the systemjs.config.js need to be changed to refer from there.

    In systemjs.config.js

    var map = {
    'app': 'app', // 'dist',
    '@angular': 'lib/@angular',
    'rxjs': 'lib/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
    'app': { main: 'boot.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' }
    };



     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 8, 2016 6:31 PM

All replies

  • User61956409 posted

    Hi snkrishnan1,

    It seems that you put node_modules under the root folder, I’d like to know where do you put systemjs.config.js, and could you share us the folder structure of your project?

    Best Regards,

    Fei Han

    Friday, July 8, 2016 9:51 AM
  • User-531736323 posted

    I found the solution, from the wwwroot the application cannot refer to the node_modules. Instead we need to copy the required under wwwroot/libs using gulp. Then the systemjs.config.js need to be changed to refer from there.

    In systemjs.config.js

    var map = {
    'app': 'app', // 'dist',
    '@angular': 'lib/@angular',
    'rxjs': 'lib/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
    'app': { main: 'boot.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' }
    };



     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 8, 2016 6:31 PM