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.

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

9 Comments

I'm using VS, it converts .ts to .js automatically.
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 ;-)
But this will cause in-browser compilation, am I correct?
Yes, you're right! You need to adapt your SystemJS configuration accordingly to prevent from this. I updated my answer...
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: plnkr.co/edit/h1PAHTzxXevPmdi9X5hD?p=info
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.