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

  • Question

  • User-531736323 posted

    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.

    enter image description here

    {
      "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"
      ]
    }
    1. 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);
    1. 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.
    2. 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?

    Friday, July 8, 2016 10:16 AM

Answers

  • User61956409 posted

    Hi snkrishnan1,

    // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', '@angular': 'lib/@angular', 'rxjs': 'lib/rxjs' };

    Please modify the value of app property to appScripts.

    'app': 'appScripts',

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 11, 2016 7:18 AM