Angular2 separate files with typescript environment

Question

I need to create an Angular2 + TypeScript frontend for php + mysql project. When I'm using npm (jspm, tsd, webpack or gulp) or with the link to code.angularjs.org everything works fine. But when I'm trying to use some Angular2 local files only, then systemjs will broke everything by it's components registration and throw to me an exception like this:

Uncaught SyntaxError: Unexpected token <

There are also some confusion in the docs how to implement index.html with scripts and components/views. In the deep of the docs I found one example which almost works for me:

<!DOCTYPE html>
<html>
<head>
  <title>angular2 playground</title>
  <link rel="stylesheet" href="style.css">
  <script src="tools/traceur-runtime.js"></script>
  <script src="tools/system.js"></script>
  <script src="tools/typescript.js"></script>
  <script src="config.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>
<body>
  <my-app>
    loading...
  </my-app>
</body>
</html>

But when I'm replacing to angular2.min.js to local version I'm getting the error above.

Do anyone knows how to fix it?

Update

Thanks to Chako answer and I did setup in this way and it is working for me:

<script type="text/javascript" src="./libs/es6-shim.min.js"></script>
<script type="text/javascript" src="./libs/system-polyfills.js"></script>
<script type="text/javascript" src="./libs/system.src.js"></script>
<script type="text/javascript" src="./libs/Rx.min.js"></script>
<script type="text/javascript" src="./libs/angular/angular2-polyfills.js"></script>
<script type="text/javascript" src="./libs/angular/angular2.dev.js"></script>
<script type="text/javascript" src="./libs/angular/router.dev.js"></script>
<script type="text/javascript" src="./libs/angular/http.dev.js"></script>
<script>
System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/main').then(null, console.error.bind(console));
</script>

Also I tried to update to beta 8 and it is broken to find files so I left beta 6 as the stable version.

And some moments:

*.min.js versions doesn't work properly.
new Rx.min.js from beta 8 was thrown to me an Exception about DI (dependency injection).
tsc doesn't supporting by Microsoft any more and it was thrown compile errors and exit from watch. So I installed ntsc which works faster but writes more TypeScript errors in console.

Valay · Accepted Answer · 2016-02-14 04:07:09Z

1

Could you please try with below code ? Download all required js with npm.

<script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="node_modules/typescript/lib/typescript.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>   
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

You can find your required dependencies in below code of package.json.

{
  "name": "angular2-material-menu",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "bootstrap": "^3.3.6",
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "ng2-material": "^0.2.1",
    "typescript": "^1.7.3"
  }
}

This works for me.

Here it is boot.ts:

import {bootstrap}    from 'angular2/platform/browser'
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HttpService} from 'app/component/http/http.service';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS, HttpService]).then(app => {
        console.log('Bootstrap Successful');
    }, err => {
        console.error(err);
    });

edited Feb 14, 2016 at 4:07

answered Feb 13, 2016 at 19:05

Valay

2,0093 gold badges47 silver badges105 bronze badges

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

3 Comments

Mike Datsko Over a year ago

Thank you Chako for your quick answer. I already tried this solution too. Can you please provide to me the code of your boot.ts?

Valay Over a year ago

@Mike- added boot.ts.

Mike Datsko Over a year ago

what do you use for build (gulp, webpack, etc.)?

Collectives™ on Stack Overflow

Angular2 separate files with typescript environment

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related