I'm trying to setup AngularJS 2 project using jspm
, firstly I had tried to setup by following instruction on the angular.io, it's working just fine
So I'm trying to setup another same project but using jspm
I'm having error about "ZoneSpec required", I had tried to google but I have found nothing so far, so please guide me what to do
angular.io Version
app/index.ts
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './components/App';
bootstrap(AppComponent);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 2</title>
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2.js"></script>
<script type="text/javascript">
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: { 'app': { defaultExtension: 'ts' } }
});
System.import('app/index');
</script>
</head>
<body>
<h3>AngularJS 2</h3>
<hr>
<test-app>Loading ...</test-app>
</body>
</html>
jspm
Version
Terminal
jspm install angular2 reflect-metada zone.js
app/index.ts
import 'zone.js';
import 'reflect-metadata';
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './components/App';
bootstrap(AppComponent);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 2</title>
<script type="text/javascript" src="jspm_packages/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: { 'app': { defaultExtension: 'ts' } }
});
System.import('app/index');
</script>
</head>
<body>
<h3>AngularJS 2</h3>
<hr>
<test-app>Loading ...</test-app>
</body>
</html>