ASP.Net Core + Angular 2 + SystemJS: typescript transpilation - visual-studio

Question

I am using Visual Studio 2015 Update 3 to create a ASP.Net core application that runs an angular 2 application. I am using SystemJs for configuration that I picked from one of the sites and it has this line of code with the comment.
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'typescript',
I understand the reason for the comment. My application is currently slow.
I'd like to know what are the other options available to ensure that the transpilation does not happen in the browser? How do I pre-transpile the code and load directly from the output location?

Answer 1

This usually means that ts files are sent to browser and transpiled there instead of happening on server side and js code to be sent and executed on client side.
Since you are using gulp you can create a task to transpile the typescript files and bundle them. You can use "gulp-typescript": "^2.5.0" package to achieve this.
However you need to setup your config first (I've just copy pasted the config from their repo):
'use strict';
var GulpConfig = (function () {
function gulpConfig() {
//Got tired of scrolling through all the comments so removed them
//Don't hurt me AC :-)
this.source = './src/';
this.sourceApp = this.source + 'app/';
this.tsOutputPath = this.source + '/js';
this.allJavaScript = [this.source + '/js/**/*.js'];
this.allTypeScript = this.sourceApp + '/**/*.ts';
this.typings = './typings/';
this.libraryTypeScriptDefinitions = './typings/main/**/*.ts';
}
return gulpConfig;
})();
module.exports = GulpConfig;
Then you need to setup the tasks, easiest way just to copy paste the already setup tasks from their repo again:
'use strict';
var gulp = require('gulp'),
debug = require('gulp-debug'),
inject = require('gulp-inject'),
tsc = require('gulp-typescript'),
tslint = require('gulp-tslint'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
Config = require('./gulpfile.config'),
tsProject = tsc.createProject('tsconfig.json'),
browserSync = require('browser-sync'),
superstatic = require( 'superstatic' );
var config = new Config();
/**
* Generates the app.d.ts references file dynamically from all application *.ts files.
*/
// gulp.task('gen-ts-refs', function () {
// var target = gulp.src(config.appTypeScriptReferences);
// var sources = gulp.src([config.allTypeScript], {read: false});
// return target.pipe(inject(sources, {
// starttag: '//{',
// endtag: '//}',
// transform: function (filepath) {
// return '/// <reference path="../..' + filepath + '" />';
// }
// })).pipe(gulp.dest(config.typings));
// });
/**
* Lint all custom TypeScript files.
*/
gulp.task('ts-lint', function () {
return gulp.src(config.allTypeScript).pipe(tslint()).pipe(tslint.report('prose'));
});
/**
* Compile TypeScript and include references to library and app .d.ts files.
*/
gulp.task('compile-ts', function () {
var sourceTsFiles = [config.allTypeScript, //path to typescript files
config.libraryTypeScriptDefinitions]; //reference to library .d.ts files
var tsResult = gulp.src(sourceTsFiles)
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
tsResult.dts.pipe(gulp.dest(config.tsOutputPath));
return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.tsOutputPath));
});
/**
* Remove all generated JavaScript files from TypeScript compilation.
*/
gulp.task('clean-ts', function (cb) {
var typeScriptGenFiles = [
config.tsOutputPath +'/**/*.js', // path to all JS files auto gen'd by editor
config.tsOutputPath +'/**/*.js.map', // path to all sourcemap files auto gen'd by editor
'!' + config.tsOutputPath + '/lib'
];
// delete the files
del(typeScriptGenFiles, cb);
});
gulp.task('watch', function() {
gulp.watch([config.allTypeScript], ['ts-lint', 'compile-ts']);
});
gulp.task('serve', ['compile-ts', 'watch'], function() {
process.stdout.write('Starting browserSync and superstatic...\n');
browserSync({
port: 3000,
files: ['index.html', '**/*.js'],
injectChanges: true,
logFileChanges: false,
logLevel: 'silent',
logPrefix: 'angularin20typescript',
notify: true,
reloadDelay: 0,
server: {
baseDir: './src',
middleware: superstatic({ debug: false})
}
});
});
gulp.task('default', ['ts-lint', 'compile-ts']);
This creates the following Gulp tasks:
gen-ts-refs: Adds all of your TypeScript file paths into a file named typescriptApp.d.ts. This file will be used to support code help in some editors as well as aid with compilation of TypeScript files.
ts-lint: Runs a “linting” task to ensure that your code follows specific guidelines defined in the tsline.js file (you can skip this if you like).
compile-ts: Compiles TypeScript to JavaScript and generates source map files used for debugging TypeScript code in browsers such as Chrome.
clean-ts: Used to remove all generated JavaScript files and source map files.
watch: Watches the folder where your TypeScript code lives and triggers the ts-lint, compile-ts, and gen-ts-refs tasks as files changes are detected.
default: The default Grunt task that will trigger the other tasks to run. This task can be run by typing gulp at the command-line when you’re within the typescriptDemo folder.
Note:
You need to change the folders based your file structure but the gist of it is that you need those TypeScript files to be compiled and sent to browser as plain JavaScript.