Mike Mike - 1 month ago 14
TypeScript Question

Angular2 separate files with typescript environment

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.


Answer

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);
    });   
Comments