Run plugin-typescript library from localhost in Angular2

Question

Every time I run angular2 project lots of files are loaded along with 'ts' library from unpkg.com/plugin-typescript/lib/plugin.js. I want to get rid of that file loading from another server. I installed in locally already but when I give local path as others, I got errors "responded with a status of 404 (Not Found)" as:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:6240/node_modules/plugin-typescript/lib/logger

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:6240/node_modules/plugin-typescript/lib/factory

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:6240/node_modules/plugin-typescript/lib/format-errors

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:6240/node_modules/plugin-typescript/lib/utils

Failed to load resource: the server responded with a status of 404 (Not Found) index.html:18 Error: Error: XHR error (404 Not Found) loading http://localhost:6240/node_modules/plugin-typescript/lib/logger(…)

My systemjs.config.js is:

(function (global) {

System.config({

transpiler: 'ts',

typescriptOptions: {

  tsconfig: true

},

meta: {
  'typescript': {
    "exports": "ts"
  }
},
paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                       'npm:rxjs',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
  'ts':                         'npm:plugin-typescript/lib/plugin.js',
  //'ts':                       'https://unpkg.com/plugin-typescript/lib/plugin.js',
  'typescript':                 'npm:typescript/lib/typescript.js'

},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.ts',
    defaultExtension: 'ts'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  }
}

}); })(this);

And My Package.json

{

"name": "angular2-quickstart",

"version": "1.0.0",

"scripts": {

    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

    "lite": "lite-server",

    "postinstall": "typings install",

    "tsc": "tsc",

    "tsc:w": "tsc -w",

    "typings": "typings"

},

"license": "ISC",

"dependencies": {

    "@angular/common": "2.0.0-rc.6",

    "@angular/compiler": "2.0.0-rc.6",

    "@angular/compiler-cli": "0.6.0",

    "@angular/core": "2.0.0-rc.6",

    "@angular/forms": "2.0.0-rc.6",

    "@angular/http": "2.0.0-rc.6",

    "@angular/platform-browser": "2.0.0-rc.6",

    "@angular/platform-browser-dynamic": "2.0.0-rc.6",

    "@angular/router": "3.0.0-rc.2",

    "@angular/upgrade": "2.0.0-rc.6",

    "core-js": "^2.4.1",

    "reflect-metadata": "^0.1.3",

    "rxjs": "5.0.0-beta.11",

    "systemjs": "0.19.27",

    "zone.js": "^0.6.17",

    "angular2-in-memory-web-api": "0.0.18",

    "bootstrap": "^3.3.6"

},

"devDependencies": {

    "concurrently": "^2.2.0",

    "lite-server": "^2.2.2",

    "typescript": "^1.8.10",

    "typings": "^1.3.2"

}

}

As I'm new to angular2 and NPM, Im out of ideas to resolve this. Any advice or solution is highly appreciatiable. Thanks in advance

samneric samneric · Accepted Answer · 2017-02-08T21:18:13

I am hosting my Angular2 app in IIS so I added a URL rewrite to Web.Config which redirects the url "/plugin-typescript/lib/logger/logger" to "/plugin-typescript/lib/logger/logger.js":

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="rewrite directories to .js" stopProcessing="true">
          <match url="(.*[^/])$" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_FILENAME}" pattern="(.*?)\.[a-zA-Z]{1,4}$" negate="true" />
          </conditions>
          <action type="Rewrite" url="{R:1}.js" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Steve

Run plugin-typescript library from localhost in Angular2

2 Answers