title: Loading node modules failed
body: <p>I created an ASP.NET MVC project in Visual Studio 2017 with Angular 2,
  installed node.</p>
  
  <p>package.json</p>
  
  <pre><code>{
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "scripts": {
      "webpack-script": "webpack",
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "-vs-binding": {
      "BeforeBuild": [
        "webpack-script"
      ]
    },
    "devDependencies": {
      "bootstrap": "^4.0.0-beta",
      "clean-webpack-plugin": "^0.1.16",
      "imports-loader": "^0.7.1",
      "jquery": "^2.2.4",
      "popper.js": "^1.12.5",
      "ts-loader": "^2.3.5",
      "typescript": "^2.5.2",
      "webpack": "^3.5.6",
      "concurrently": "2.2.0",
      "systemjs-builder": "0.15.32",
      "json-server": "0.8.21",
      "jsonwebtoken": "7.1.9"
    },
    "dependencies": {
      "@angular/animations": "^4.3.6",
      "@angular/common": "^4.3.6",
      "@angular/compiler": "^4.3.6",
      "@angular/compiler-cli": "^4.3.6",
      "@angular/core": "^4.3.6",
      "@angular/forms": "^4.3.6",
      "@angular/http": "^4.3.6",
      "@angular/platform-browser": "^4.3.6",
      "@angular/platform-browser-dynamic": "^4.3.6",
      "@angular/platform-server": "^4.3.6",
      "@angular/router": "^4.3.6",
      "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.4",
      "reflect-metadata": "^0.1.10",
      "rxjs": "5.0.1",
      "zone.js": "^0.8.4",
      "core-js": "^2.4.1",
      "classlist.js": "^1.1.20150312",
      "systemjs": "0.19.40",
      "bootstrap": "^4.0.0-beta",
      "font-awesome": "^4.7.0",
      "intl": "^1.2.5",
      "html5-history-api": "^4.2.8",
      "file-loader": "^0.11.2",
      "css-loader": "^0.28.7",
      "jquery": "^2.2.4",
      "popper": "^1.0.0",
      "style-loader": "^0.18.2",
      "url-loader": "^0.5.9",
      "webpack": "^3.5.6"
    }
  }
  </code></pre>
  
  <p>systemjs.config.js</p>
  
  <pre><code>(function (global) {
      var map = {
          'app': 'app', // 'dist',
          '@angular': 'node_modules/@angular',
          'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
          'rxjs': 'node_modules/rxjs'
      };
      // 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' },
          'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      };
      var ngPackageNames = [ // &lt;-----
          'common',
          'compiler',
          'core',
          'http',
          'platform-browser',
          'platform-browser-dynamic',
          'router',
          'router-deprecated',
          'upgrade',
      ];
      // Individual files (~300 requests):
      function packIndex(pkgName) {
          packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
      }
      // Bundled (~40 requests):
      function packUmd(pkgName) {
          packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
      };
      // Most environments should use UMD; some (Karma) need the individual index files
      var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
      // Add package entries for angular packages
      ngPackageNames.forEach(setPackageConfig);
      var config = {
          map: map,
          packages: packages
      }
      System.config(config);
  })(this);
  </code></pre>
  
  <p>_Layout.cshtml in the head section I added</p>
  
  <pre><code>&lt;meta charset="utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  &lt;base href="/" /&gt;
  &lt;title&gt;@ViewData["Title"] - LanguageSchool.Web&lt;/title&gt;
  
  &lt;environment include="Development"&gt;
      &lt;script src=@Url.Content("~/node_modules/html5-history-api/history.min.js")&gt;&lt;/script&gt;
      &lt;script src="./node_modules/classlist.js/classList.min.js"&gt;&lt;/script&gt;
      &lt;script src="./node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/intl/dist/Intl.complete.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/zone.js/dist/zone.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="./node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="rxjs.module.min.js"&gt;&lt;/script&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          System.import("app/main").catch(function (err) { console.error(err); });
      &lt;/script&gt;
      &lt;link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
            rel="stylesheet" /&gt;
      &lt;link href="node_modules/font-awesome/css/font-awesome.min.css"
            rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" href="~/css/site.css" /&gt;
  &lt;/environment&gt;
  </code></pre>
  
  <p>But when I try to load the page I get a number of errors:</p>
  
  <blockquote>
    <p>Loading failed for the  with source
    “<a href="https://localhost:44341/node_modules/html5-history-api/history.min.js" rel="nofollow noreferrer">https://localhost:44341/node_modules/html5-history-api/history.min.js</a>”.
    localhost:44341:10 Loading failed for the  with source
    “<a href="https://localhost:44341/node_modules/classlist.js/classList.min.js" rel="nofollow noreferrer">https://localhost:44341/node_modules/classlist.js/classList.min.js</a>”. 
    localhost:44341:11 Loading failed for the  with source
    “<a href="https://localhost:44341/node_modules/core-js/client/shim.min.js" rel="nofollow noreferrer">https://localhost:44341/node_modules/core-js/client/shim.min.js</a>”. 
    localhost:44341:12 Loading failed for the  with source
    “<a href="https://localhost:44341/node_modules/intl/dist/Intl.complete.js" rel="nofollow noreferrer">https://localhost:44341/node_modules/intl/dist/Intl.complete.js</a>”. 
    localhost:44341:13 Loading failed for the  with source
    “<a href="https://localhost:44341/node_modules/zone.js/dist/zone.min.js" rel="nofollow noreferrer">https://localhost:44341/node_modules/zone.js/dist/zone.min.js</a>”. 
    localhost:44341:14 Loading failed for the  with source
    “<a href="https://localhost:44341/node_modules/reflect-metadata/Reflect.js" rel="nofollow noreferrer">https://localhost:44341/node_modules/reflect-metadata/Reflect.js</a>”. 
    localhost:44341:15 Loading failed for the  with source
    “<a href="https://localhost:44341/node_modules/systemjs/dist/system.src.js" rel="nofollow noreferrer">https://localhost:44341/node_modules/systemjs/dist/system.src.js</a>”. 
    localhost:44341:16 Loading failed for the  with source
    “<a href="https://localhost:44341/rxjs.module.min.js" rel="nofollow noreferrer">https://localhost:44341/rxjs.module.min.js</a>”.  localhost:44341:17
    Loading failed for the  with source
    “<a href="https://localhost:44341/systemjs.config.js" rel="nofollow noreferrer">https://localhost:44341/systemjs.config.js</a>”.</p>
  </blockquote>
  
  <p><strong>Updates:</strong>
  main.ts</p>
  
  <pre><code>window["$"] = window["jQuery"] = require("jquery");
  
  import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
  import { AppModule } from "./app.module";
  platformBrowserDynamic().bootstrapModule(AppModule).
      then(success =&gt; console.log('Bootstrap success')).
      catch(error =&gt; console.log(error));
  </code></pre>
  
  <p>app.modules.ts</p>
  
  <pre><code>import { NgModule } from "@angular/core";
  import { BrowserModule } from "@angular/platform-browser";
  import { AppComponent } from "./app.component";
  
  @NgModule({
      imports: [BrowserModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.components.ts</p>
  
  <pre><code>import { Component } from "@angular/core";
  
  @Component({
      selector: "app",
      template: `&lt;div class="bg-success p-a-1 text-xs-center"&gt;
  This is SportsStore
  &lt;/div&gt;`
  })
  export class AppComponent { }
  </code></pre>