angularjs - Token must be defined! error -
when main.ts bootstrap app.ts, looks good.
main.ts
import {bootstrap} 'angular2/platform/browser'; import {appcomponent} 'app/app'; import {router_providers,router_directives} 'angular2/router'; import {platform_directives,provide} 'angular2/core'; bootstrap(appcomponent, [router_providers, provide(platform_directives, {usevalue: [router_directives], multi:true}), ]); app.ts
import {component,view} 'angular2/core'; import {routeconfig} 'angular2/router'; import {playermanagement} './partials/player-management'; import {report} './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 try change bootstrap ts , login.ts, gives me error
angular2.js:22823 exception: token must 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 login.ts app.ts , no clue yet...
login.ts
import {component,view} 'angular2/core'; import {routeconfig, router_directives} 'angular2/router'; @component({ selector: 'login', templateurl: 'app/login.html', }) /* @routeconfig([ {path:'/app', name: 'appcomponent', component: appcomponent} ]) */ export class logincomponent { } updated main.ts
import {bootstrap} 'angular2/platform/browser'; import {logincomponent} 'app/login'; import {router_providers,router_directives} 'angular2/router'; import {platform_directives,provide} '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
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 using ts, have attached js (main.js) here 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 build dir gulp.task('serve', function () { gulp.src('build') .pipe(webserver({ open: true })); }); // watch changes , run 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 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')) });
Comments
Post a Comment