Angular 2 typescript to javascript?

Question

Currently, I am still wrapping my head around the whole Angular 2 concept. I have used AngularJS (1) in the past, and I liked it.

So currently I am starting a new project and thought why not start using Angular 2. Now I know everyone is using Typescript instead of javascript. However, I'm still unsure how to make a project runnable on a simple web hosting server (PHP, HTML, MySQL, Javascript, etc).

I know I can run npm start on my Linux server, but how does one put it on a hosting server? Can't I just compile the Typescript to javascript so that I can use it in a browser without having to run npm? I read something about JSPM and few others, but I am unsure if this is what I need nor do I get how to get it to run using JSPM or something similar (for example using the "under 5 minutes quickstart" with JSBPM).

I know Angular 2 has a javascript part, and that works for me. However there are no coding examples, and everything you find on the internet is Typescript. So I can't proceed to run Angular 2 in javascript because the lack of tutorials.

In short I don't mind using Typescript, but I just want a pure javascript as a result which I can import into HTML and go from there.

Also on a side note question, do all the node_modules need to be present when running production?

Bonus points for tutorials which explain this!

Thanks!

Answer 1

In fact, there is a doc on the angular.io website regarding this:

• https://angular.io/docs/ts/latest/cookbook/ts-to-js.html

It shows the way to transform TypeScript code to ES5 one and it seems that it's what you're looking for.

Here is a sample:

• TypeScript

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'hero-view',
    template: 
      '<h1>Hero: {{getName()}}</h1>'
  })
  export class HeroComponent {
    title = 'Hero Detail';
    getName() {return 'Windstorm';}
  }
  

• ES5

  function HeroComponent() {
    this.title = "Hero Detail";
  }
  
  HeroComponent.annotations = [
    new ng.core.Component({
      selector: 'hero-view',
      template:
        '<h1>Hero: {{getName()}}</h1>'
    })
  ];
  HeroComponent.prototype.getName =
    function() {return 'Windstorm';};
  

  where it can be done this way ;-)

  function HeroComponent() {
    this.title = "Hero Detail";
  }
  
  var HeroComponent = new ng.core.Component({
    selector: 'hero-view',
    template:
      '<h1>Hero: {{getName()}}</h1>'
  }).Class({
    constructor: function() {
    },
  
    getName: function() {
      return 'Windstorm';
    }
  });
  

Regarding the packaging of an Angular2 application, this question could interest you as well:

• How do I actually deploy an Angular 2 + Typescript + systemjs app?

Answer 2

Several things here. TypeScript is not JavaScript; it's a language developed by Microsoft to help web developers to make better and more secure code, and it needs to be translated (compiled) into JavaScript to be browser understandable (I don't think TS is browser compliant yet but maybe in the future).

For that, Angular 2 developers chose to provide a typescript way to use their framework.

In Angular 2 documentation, you will find a description on how to go from typescript to JavaScript.

When you have your js files just put them on any production server as you will do for a regular website.

About npm start: it's just a developer tool here to help you set up your development environment with a light web server (nodejs) and should not be used in production.

So in short you should :

1. Write your HTML, CSS and TypeScript on your development machine (with npm start if you do not want to use a web server).

2. Use a TypeScript compiler to generate your JavaScript (ES5 or ES6).

3. Put your HTML, CSS and compiled JavaScript files on production server (no need for nodejs there) .