When my main.ts is to bootstrap app.ts, everything looks good.
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from 'app/app';
import {ROUTER_PROVIDERS,ROUTER_DIRECTIVES} from 'angular2/router';
import {PLATFORM_DIRECTIVES,provide} from 'angular2/core';
bootstrap(AppComponent,
[ROUTER_PROVIDERS,
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi:true}),
]);
app.ts
import {Component,View} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {PlayerManagement} from './partials/player-management';
import {Report} from './partials/report';
@Component({
selector: 'my-app',
templateUrl: 'app/appComponent.html',
})
@RouteConfig([
{path:'/playerManagement', name: 'PlayerManagement', component: PlayerManagement},
{path:'/report', name: 'Report', component: Report}
])
export class AppComponent { }
But when I try to change to bootstrap another ts , login.ts, it gives me the error
angular2.js:22823 EXCEPTION: Token must be defined!
execute @ main.ts:22
the code line is,
execute: function() {
bootstrap(LoginComponent, [ROUTER_PROVIDERS, provide(PLATFORM_DIRECTIVES, {
useValue: [ROUTER_DIRECTIVES],
multi: true
})]);
}
I compare the login.ts to app.ts , but no clue yet...
login.ts
import {Component,View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
selector: 'login',
templateUrl: 'app/login.html',
})
/*
@RouteConfig([
{path:'/app', name: 'AppComponent', component: AppComponent}
])
*/
export class LoginComponent { }
Updated main.ts
import {bootstrap} from 'angular2/platform/browser';
import {LoginComponent} from 'app/login';
import {ROUTER_PROVIDERS,ROUTER_DIRECTIVES} from 'angular2/router';
import {PLATFORM_DIRECTIVES,provide} from 'angular2/core';
bootstrap(LoginComponent,
[ROUTER_PROVIDERS,
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi:true}),
]);
index.html
<!doctype html>
<html lang="">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>video-platform</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="lib/es6-shim.min.js"></script>
<script src="lib/angular2-polyfills.js"></script>
<script src="lib/traceur-runtime.js"></script>
<script src="lib/system-csp-production.src.js"></script>
<script src="lib/Reflect.js"></script>
<script src="lib/angular2.js"></script>
<script src="lib/Rx.js"></script>
<script src="lib/router.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'ts'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<login>Loading....</login>
<my-app>Loading....</my-app>
</body>
</html>
My folder structure is
src
-app
--app.ts
--appComponent.html
--login.html
--login.ts
--main.ts
Strack trace updated.
STACKTRACE:
BrowserDomAdapter.logError @ angular2.js:22823
ExceptionHandler.call @ angular2.js:1165
(anonymous function) @ angular2.js:12624
run @ angular2-polyfills.js:138
(anonymous function) @ angular2.js:13328
NgZone.run @ angular2.js:13290
ApplicationRef_.bootstrap @ angular2.js:12602
bootstrap @ angular2.js:24543
execute @ main.ts:22
ensureEvaluated @ system-csp-production.src.js:2678
execute @ system-csp-production.src.js:2796
doDynamicExecute @ system-csp-production.src.js:715
link @ system-csp-production.src.js:908
doLink @ system-csp-production.src.js:569
updateLinkSetOnLoad @ system-csp-production.src.js:617
(anonymous function) @ system-csp-production.src.js:430
run @ angular2-polyfills.js:138
zoneBoundFn @ angular2-polyfills.js:111
lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511
lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523
lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494
(anonymous function) @ angular2-polyfills.js:243
run @ angular2-polyfills.js:138
zoneBoundFn @ angular2-polyfills.js:111
lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
I am using ts, but i have attached the js (main.js) here as well
System.register("app/main", ["angular2/platform/browser", "app/login", "angular2/router", "angular2/core"], function($__export) {
"use strict";
var bootstrap,
LoginComponent,
ROUTER_PROVIDERS,
ROUTER_DIRECTIVES,
PLATFORM_DIRECTIVES,
provide;
return {
setters: [function($__m) {
bootstrap = $__m.bootstrap;
}, function($__m) {
LoginComponent = $__m.LoginComponent;
}, function($__m) {
ROUTER_PROVIDERS = $__m.ROUTER_PROVIDERS;
ROUTER_DIRECTIVES = $__m.ROUTER_DIRECTIVES;
}, function($__m) {
PLATFORM_DIRECTIVES = $__m.PLATFORM_DIRECTIVES;
provide = $__m.provide;
}],
execute: function() {
bootstrap(LoginComponent, [ROUTER_PROVIDERS, provide(PLATFORM_DIRECTIVES, {
useValue: [ROUTER_DIRECTIVES],
multi: true
})]);
}
};
});
package.json
{
"name": "video-platform",
"version": "0.0.0",
"scripts": {
"build": "gulp",
"start": "gulp dev"
},
"dependencies": {
"angular2": "2.0.0-beta.2",
"traceur": "0.0.102",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10",
"reflect-metadata": "0.1.2",
"systemjs": "0.19.6"
},
"devDependencies": {
"gulp": "3.9.0",
"gulp-rename": "1.2.2",
"gulp-traceur": "0.17.2",
"gulp-webserver": "0.9.1",
"gulp-print":"*"
}
}
gulpfile.js
var gulp = require('gulp'),
rename = require('gulp-rename'),
traceur = require('gulp-traceur'),
webserver = require('gulp-webserver');
// run init tasks
gulp.task('default', ['dependencies', 'ts','html', 'css']);
// run development task
gulp.task('dev', ['watch', 'serve']);
// serve the build dir
gulp.task('serve', function () {
gulp.src('build')
.pipe(webserver({
open: true
}));
});
// watch for changes and run the relevant task
gulp.task('watch', function () {
//gulp.watch('src/**/*.js', ['js']);
gulp.watch('src/**/*.ts', ['ts']);
gulp.watch('src/**/*.html', ['html']);
gulp.watch('src/**/*.css', ['css']);
});
// move dependencies into build dir
gulp.task('dependencies', function () {
return gulp.src([
'node_modules/traceur/bin/traceur-runtime.js',
'node_modules/systemjs/dist/system-csp-production.src.js',
'node_modules/systemjs/dist/system.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/angular2/bundles/angular2.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/rxjs/bundles/Rx.js',
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/es6-shim/es6-shim.map',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/router.dev.js'
])
.pipe(gulp.dest('build/lib'));
});
// transpile & move js
gulp.task('js', function () {
return gulp.src('src/**/*.js')
.pipe(rename({
extname: ''
}))
.pipe(traceur({
modules: 'instantiate',
moduleName: true,
annotations: true,
types: true,
memberVariables: true
}))
.pipe(rename({
extname: '.js'
}))
.pipe(gulp.dest('build'));
});
// transpile & move ts
gulp.task('ts', function () {
return gulp.src('src/**/*.ts')
.pipe(rename({
extname: ''
}))
.pipe(traceur({
modules: 'instantiate',
moduleName: true,
annotations: true,
types: true,
memberVariables: true
}))
.pipe(rename({
extname: '.ts'
}))
.pipe(gulp.dest('build'));
});
// move html
gulp.task('html', function () {
return gulp.src('src/**/*.html')
.pipe(gulp.dest('build'))
});
// move css
gulp.task('css', function () {
return gulp.src('src/**/*.css')
.pipe(gulp.dest('build'))
});