Not able to load boot.js when rendered through AspNet-Core-MVC views

Question

Not able to load boot.js when rendered through AspNet-Core-MVC views I tried creating a ApsNet core + Angular2 RC4 application. Following are the steps which I have done to build the app 1. Created/updated the Package.json, systemjs.config.js, typings.json and tsconfig.json from the angular (RC4) quickstart tutorials with small changes to it as per my need 2. Placed all the angular2 components under scripts folder and also placed tsconfig.json under the same. But specified the outDir property to move all the transpiled .js files to wwwroot/appScripts/ folder.

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": true,
    "outDir": "../wwwroot/appScripts/",
    "removeComments": false,
    "sourceMap": true,
    "suppressImplicitAnyIndexErrors": true,
    "moduleResolution": "node",
    "target": "es6"
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

3. modified the systemjs.config.js as below to load the boot.js file for 'app' mapping

(function (global) {
    // map tells the System loader where to look for things
    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' }
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Add package entries for angular packages
    ngPackageNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    })  ;
    var config = {
        map: map,
        packages: packages
    }
    System.config(config);
})(this);

4. When the application loads, initally it lands on the login page and on authentication it redirects to the "Views/Home/index.cshtml" view which is rendered by the Login controller.
5. This "Views/Home/index.cshtml" view is having/under the layout set to "./shared/layout.cshtml" file My "Views/Home/index.cshtml" is as below

 @{
        ViewData["Title"] = "Home Page";
        Layout = "_Layout";
    }
    
    <!-- IE required polyfills, in this exact order -->
    <script src="~/lib/core-js/client/shim.min.js"></script>
    <script src="~/lib/zone.js/dist/zone.js"></script>
    <script src="~/lib/reflect-metadata/Reflect.js"></script>
    <script src="~/lib/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>

Earlier when i developed it from the scratch it was with the angular2 - beta 17 version, but now I have migrated to Angular2 RC4. The problem now I am facing is the application is not able to load the boot.js file and I am getting the following error in the browser console

menu.js:103 Uncaught TypeError: $(...).tooltip is not a function
http://localhost:55413/Home/app/boot.js Failed to load resource: the server responded with a status of 404 (Not Found)
Index:54 Error: Error: XHR error (404 Not Found) loading http://localhost:55413/Home/app/boot.js
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:55413/lib/zone.js/dist/zone.js:769:30)
        at ZoneDelegate.invokeTask (http://localhost:55413/lib/zone.js/dist/zone.js:356:38)
        at Zone.runTask (http://localhost:55413/lib/zone.js/dist/zone.js:256:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:55413/lib/zone.js/dist/zone.js:423:34)
    Error loading http://localhost:55413/Home/app/boot.js(anonymous function) @ Index:54
http://localhost:55413/app/boot.js Failed to load resource: the server responded with a status of 404 (Not Found)
Index:84 Error: Error: XHR error (404 Not Found) loading http://localhost:55413/app/boot.js
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:55413/lib/zone.js/dist/zone.js:769:30)
        at ZoneDelegate.invokeTask (http://localhost:55413/lib/zone.js/dist/zone.js:356:38)
        at Zone.runTask (http://localhost:55413/lib/zone.js/dist/zone.js:256:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:55413/lib/zone.js/dist/zone.js:423:34)
    Error loading http://localhost:55413/app/boot.js

Why the application is not able to identify/load the boot.js file, I am pointing to wrong path to load it? what is the change I need to do?

Answer 1

You are outputting your scripts to "appScripts/ or "scripts/" (your screenshots show two different "script" directories) but then you are trying to load your boot.js from the /Home/app directory. Change your system.config.ts:

var packages = {
        'app': { main: 'scripts/boot.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    };

Or change your tsconfig outDir property.