TypeScript to JavaScript transpiler for Angular2

Question

Since Ancular2 is written in TypeScript, I also write my app in Typescript. I want to deploy the app on a tomcat server without node.js running. After a long search, I found two possibilities that work: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview In this version, the Typescript-files are transpiled on-the-fly and this is works for what I need. But there would be a nicer solution with transpiling and minifying it before the deployment on the server. I tryed it with gulp but the resulting .ts-files (with and without minifying) didn't work. then I foung another plunker with only js-files working: https://plnkr.co/edit/8lOtCy4GPsq9hZH6D38E?p=preview Comparing those files, I saw that my compiled files looks much more complicated:

 "use strict"; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var core_1 = require("@angular/core"); var AppComponent = (function () { function AppComponent() { this.name = 'Angular'; } return AppComponent; }()); AppComponent = __decorate([ core_1.Component({ selector: 'my-app', template: "<h1>Hello {{name}}</h1>" }) ], AppComponent); exports.AppComponent = AppComponent;

So I tried diferent tsconfig.json properties to get a working transpiler, but it seem to be something with the transpiler itself (I used for both variants the typescript@2.1.6 version)

I already tried with model in tsconfig.json beeing: amd, umd, system, commonjs, es2015 but this didn't solve the problem. Also I tried with noEmeritHelpers, but the problem was still there (I think that I once read a problem with var core_1 = require("@angular/core"); not beeing defined, but this didn't help me).

I want to transpile all .ts-files from my app folder, combine them in one and then minify it. The best way to do it would by with gulp, since this would be easy to combine with my maven project.

Answer 1

use Angular CLI

https://github.com/angular/angular-cli

edit the angular-cli.json config file

"outDir": "path/to/maven-app/main/resources/webapp",

then you could run ng build --prod --watch or ng build --watch

then build your maven app, it'll contain all build file: js, css, assets, etc