CODEWITHSUNDEEP
javascriptangulartypescript
Vivek
Vivek

Reputation: 373

System.Import in Typescript not overriding the default path

I am a newbie to Typescript and Angular2.I have an app folder where I am creating ts files and I am trying to generate transpiled 'js' files to another folder built. 'Js' files are being generated successfully but when I try to import the files to html using System.import('built'), scripts are not being refernced and throwing 404. Both 'app' and 'built' folders are added to the root. Here is my tsconfig.json : 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "built"
  }
}

And here I am importing the scripts to index.html :

System.import('built').catch(function(err){ console.error(err); });

Any help.

Edit : Here I have added the systemjs.config.js:

(function (global) {
  System.config({
    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',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Upvotes: 0

Views: 1382

Answers (1)

micronyks
micronyks

Reputation: 55443

You need to change mapping of app to built as shown,

map: {
      // our app is within the app folder
      app: 'built',            //<-----changed 'app' to 'built'...
      ...
      ...
}

Upvotes: 1

Related Questions