私は最初のES6アプリに取り組んでangular2いますが、es7 デコレーター構文を使用すると機能しません。
entry.js
import * as stylesheet from '../assets/styles/app.scss';
import $ from 'jquery';
import jQuery from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
import './boot'
import {AppComponent} from './app.component'
boot.js
(function (app) {
document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));
app.component.js
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent {
constructor() {
}
}
パッケージ.json
{
"main": "index.js",
"scripts": {
"build": "npm-run-all clean prepare build:style build:app",
"build:app": "browserify -e ./app/index.js -o ./dist/app.js",
"build:production": "npm prune && npm install && npm run lint && npm test && npm run build",
"build:style": "npm run build:semantic-ui; npm run copy:style",
"build:semantic-ui": "gulp --gulpfile ./node_modules/semantic-ui/gulpfile.js build",
"copy:style": "cp -r semantic/dist/* ./dist/styles",
"clean": "rimraf ./dist/**/*",
"lint": "jshint app/**",
"prepare": "mkdir -p ./dist",
"prestart": "npm run build",
"pretest": "npm install",
"screenshot": "node tests/screenshot.js",
"serve": "static -p ${PORT:-5000} --gzip --host-address 0.0.0.0 ./",
"start": "npm run serve",
"test": "mocha --compilers js:babel-core/register tests",
"watch": "PORT=${PORT:-5000} npm-run-all --parallel serve watch:app",
"watch:app": "watchify -dv -e ./app/index.js -o ./dist/app.js",
"watch:tests": "npm test -- -w"
},
"devDependencies": {
"browserify": "latest",
"babel-core": "6.3.x",
"babel-eslint": "^5.0.0-beta6",
"babel-plugin-angular2-annotations": "3.0.x",
"babel-plugin-transform-class-properties": "6.3.x",
"babel-plugin-transform-decorators-legacy": "1.3.x",
"babel-plugin-transform-flow-strip-types": "6.3.x",
"babel-preset-es2015": "6.3.x",
"babelify": "7.2.x",
"babylon": "6.3.x",
"csscritic": "https://github.com/cburgmer/csscritic.git",
"jshint": "2.8.x",
"mocha": "^2.3.4",
"node-static": "0.7.x",
"npm-run-all": "1.4.x",
"pageres": "3.0.x",
"rimraf": "2.4.x",
"sassify": "0.9.x",
"semantic-ui": "2.1.x",
"watchify": "3.6.x"
},
"dependencies": {
"jquery": "latest",
"babel-polyfill": "^6.3.14",
"angular2": "^2.0.0-beta.0",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.13",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.0",
"zone.js": "^0.5.10"
},
"babel": {
"presets": [
"es2015"
],
"plugins": [
"angular2-annotations",
"transform-decorators-legacy",
"transform-class-properties",
"transform-flow-strip-types"
]
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015"
]
}
],
[
"sassify",
{
"auto-inject": true
}
]
]
},
"jshintConfig": {
"esnext": true
}
}
console.log
EXCEPTION: Token must be defined! angular2-all.umd.js:29460
EXCEPTION: Token must be defined! angular2-all.umd.js:29451:14
STACKTRACE: angular2-all.umd.js:29451:14
BaseException@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:4350:24
Key@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:4924:20
KeyRegistry</KeyRegistry.prototype.get@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:4969:23
Key</Key.get@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:4938:42
_normalizeProvider@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:4237:16
_normalizeProviders/<@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:4222:14
forEach@http://localhost:5000/node_modules/es6-shim/es6-shim.js:1107:14
_normalizeProviders@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:4217:6
resolveProviders@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:4187:46
Injector</Injector.resolve@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:2969:17
Injector</Injector.prototype.resolveAndCreateChild@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:3147:34
ApplicationRef_</ApplicationRef_.prototype.bootstrap/<@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:12586:33
run@http://localhost:5000/node_modules/angular2/bundles/angular2-polyfills.js:138:14
NgZone</NgZone.prototype._createInnerZone/<.$run/<@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:13023:33
NgZone</NgZone.prototype.run@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:12972:25
ApplicationRef_</ApplicationRef_.prototype.bootstrap@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:12578:10
bootstrap@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:28009:13
[2]</</<@http://localhost:5000/dist/app.js:22:9
run@http://localhost:5000/node_modules/angular2/bundles/angular2-polyfills.js:138:14
zoneBoundFn@http://localhost:5000/node_modules/angular2/bundles/angular2-polyfills.js:111:14
-----async gap-----
_getStacktraceWithUncaughtError@http://localhost:5000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26
[2]</</module.exports.$fork/<@http://localhost:5000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40
NgZone</NgZone.prototype._createInnerZone@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:13010:1
NgZone@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:12797:32
createNgZone@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:12338:13
PlatformRef_</PlatformRef_.prototype.application@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:12439:34
bootstrap@http://localhost:5000/node_modules/angular2/bundles/angular2-all.umd.js:28009:13
[2]</</<@http://localhost:5000/dist/app.js:22:9
run@http://localhost:5000/node_modules/angular2/bundles/angular2-polyfills.js:138:14
zoneBoundFn@http://localhost:5000/node_modules/angular2/bundles/angular2-polyfills.js:111:14
angular2-all.umd.js:29451:14
Error: Token must be defined! <unknown>
質問
ここで何が問題なのですか？これを解決するにはどうすればよいですか？