22

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.

So what must I do? Do I need Angular2.ts or specific Angular2-xx.js and .d.ts files?

UPDATE: I've downloaded Angular2 through NPM and gotten the full source tree, in which it's hard to find specific things. Searching for .d.ts for Angular2 returned no results. A lot of .ts and .d.ts files are in the huge collection of code.

Roham Rafii
  • 2,929
  • 7
  • 35
  • 49
Arman Hayots
  • 2,459
  • 6
  • 29
  • 53

1 Answers1

12

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

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • 1
    I'm using VS, it converts .ts to .js automatically. – Arman Hayots Feb 25 '16 at 10:28
  • Great! So include the JS file for Angular2 and its dependencies from code.angularjs.org and configure SystemJS to use your compiled JS files and it should work ;-) – Thierry Templier Feb 25 '16 at 10:30
  • 1
    But this will cause in-browser compilation, am I correct? – Arman Hayots Feb 25 '16 at 10:34
  • 1
    Yes, you're right! You need to adapt your SystemJS configuration accordingly to prevent from this. I updated my answer... – Thierry Templier Feb 25 '16 at 10:39
  • That's good answer, but it does related to «how to load angular2 modules by SystemJS», not to «how link angular2 with TypeScript — is there .ts or .d.ts?». The trouble is not in modules — I can load them all manually if need. The trouble is that I've downloaded angular2 over npm and got full source tree ( or truly source web 'cause of a many exports), which is not useful for production. Correct me, but for typescript development we need or .ts file (which is not variant 'cause angular split on lot of small files) or simply few .d.ts files, which we use like headers to access exports. – Arman Hayots Feb 25 '16 at 15:50
  • For development, you don't necessary need Angular2 TS files. You can rely on the bundled JS ones. It's up to you but it's clear the recommended option is to use the JS ones. If you're interested, I can put in my answer the SystemJS configuration to use Angular2 TS files... – Thierry Templier Feb 25 '16 at 16:43
  • Again: how use "angular2.dev.js" in TypeScript without `.d.ts` file? – Arman Hayots Feb 25 '16 at 17:02
  • 1
    Just add it in a `script` element. The file will register Angular2 modules will be able to import from your TS files. Here is a sample: https://plnkr.co/edit/h1PAHTzxXevPmdi9X5hD?p=info – Thierry Templier Feb 25 '16 at 17:05
  • Thanks, now I've got a point. But what to do with the errors like this? `Error Build: Cannot find module 'angular2/core'. ANGDEMO U:\PROJECTS\ANGDEMO\ANGDEMO\app\contacts.ts` – Arman Hayots Feb 26 '16 at 11:42