Development on Angular2 with TS but without NPM

Question

All guides suggests to install npm, but I\'m searching for a way without it.

There are Angular2 files available, but none of them are TypeScript code.

Answer 1

In fact, these files are a bundled version of Angular2 and its dependencies. They can be used within an application written with TypeScript. As a matter of fact TypeScript can't be used out of the box into browsers. You must to preprocess them to compile them into ES code with the TypeScript compiler or transpile them in the browser directly with the TypeScript library.

This can be configured within SystemJS directly through its transpiler configuration attribute (see below).

First simply add these files in your HTML file:

<script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/http.dev.js"></script>

If you want to implement an application without NPM, you can transpile your TypeScript files within the browser.It's way we do when using plunkr. For this you need to configure SystemJS as described below:

<script>
  System.config({
    transpiler: 'typescript', 
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    packages: {
      'app': {
        defaultExtension: 'ts'
      }
    } 
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

Be careful to define your TypeScript files under an app folder

Here is a simple (and complete) plunkr describing how to do that: https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info.

You can download the corresponding code and use its code locally with a static HTTP server like http-server without using NPM. This could be a good starting point for your use case...

Edit

If your TypeScript files are compiled by VS, you need to adapt the SystemJS configuration, as described below:

<script>
  System.config({
    packages: {
      app: {
        defaultExtension: 'js',
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

This way, SystemJS will load your JS files when doing an import. For example: System.import('app/boot') will use the app/boot.js and not the TypeScript one