Mojo80 February 2016

ASP.NET MVC Angular 2 Failed to load resource: the server responded with a status of 404 (Not Found)

I am seeing some really odd behavior with typescript imports in ASP.Net MVC using Angular 2. The following code errors at run time reporting it can't find the ng2-highcharts package, from the root - not node_modules.

All other imports work - are recognized relative from node_modules.

Code:

import {Component, View, OnInit} from 'angular2/core';
import {Ng2Highcharts} from "ng2-highcharts/ng2-highcharts";
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
import EndPointService  from '../services/EndPointService';

//import {CHART_DIRECTIVES} from 'ng2-charts';

@Component({
    selector: 'index',
    providers: [EndPointService],
    templateUrl: '/Admin.Portal/App/views/view-admin-users.html',
    directives: [Ng2Highcharts]
})
export class IndexComponent ...

Error: XHR error (404 Not Found) loading http://localhost/Admin.Portal/ng2-highcharts/ng2-highcharts.js(…)

run @ angular2-polyfills.js:138

tsConfig:

{
  "compilerOptions": {
    "module": "system",
    "sourceMap": true,
    "noImplicitAny": true
  }
}

.csproj Typescript settings

<TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
           

Answers


Thierry Templier February 2016

You should add a map entry for this into your SystemJS configuration. Something like this:

<script>
  System.config({
    map: {
      'ng2-highcharts': 'node_modules/ng2-highcharts',
    },
    packages: {
      (...)
    }
  });
  (...)
</script>

Post Status

Asked in February 2016
Viewed 1,118 times
Voted 13
Answered 1 times

Search




Leave an answer