6

I am in a study phase for an application development. The server-side development has already started, with Spring boot and Maven. Now, I am studying the possible options to develop the client-side.

I'd like to use Angular 2 (I know it's still in alpha), but I'm really hesitating between its javascript and typescript version. I know the live reload with javascript version should work well with maven spring-boot run (in theory), and this is a great help for productivity. I was wondering if there was a way to have the live reload for typescript version of Angular too. Has anyone managed to implement it in its own project? If yes, how did you do?

I have not found any doc about this on maven-typescript-plugin

The build system will be Maven for client side too.

EDIT: Is there an easy way for typescript debugging, or is it a pain?

Rémi Doolaeghe
  • 2,262
  • 3
  • 31
  • 50

1 Answers1

5

One way could be adding a watch to automatically be triggered on any file change. For example, try adding the following to your package.json file:

{
  "scripts": {
    "tsc": "tsc -p src -w"
  }
}

As the Quickstart for Angular 2 (literally) states that this will be activated when you open a terminal window in the root of the application folder and enter:

npm run tsc

The script sets the compiler watch option (-w) so the compiler stays alive when it's finished. It watches for changes to .ts files and recompiles them automatically.

Considering this will spit out plain-old .js files, you can use the tooling you're comfortable with to reload the page.

Juliën
  • 9,047
  • 7
  • 49
  • 80
  • Looks promising! Do you know if Angular 2 uses source maps, so that I would be able to debug directly my ts sources instead of debugging the generated js sources? – Rémi Doolaeghe Oct 27 '15 at 08:11
  • Sure, like with any other Javascript framework or tool both Angular2 and TypeScript support source maps as this can be setup in your build script. Besides that, for development purposes, you can simply add the TypeScript transpiler to your html, allowing you to use the native .ts rather than the compiled .js. This is also demonstrated first [in the Quickstart](https://angular.io/docs/ts/latest/quickstart.html). – Juliën Oct 27 '15 at 08:40
  • Thanks a lot, you convinced me! – Rémi Doolaeghe Oct 27 '15 at 08:49