angular - 异常 : Token must be defined! Angular 2

Question

我正在使用 angular2 开发我的第一个 ES6 应用程序，但在使用 es7 装饰器语法时无法让它工作。

入口.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 = {}));

应用程序组件.js

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent {
    constructor() {

    }
}

package.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
  }
}

控制台日志

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>

问题

这是怎么回事？我该如何解决这个问题？

相关

• What do I need to convert my Angular2 component to ES6 syntax?
• How do I write angular2 without decorator syntax?

Answer 1

在我的例子中，这是因为我给 bootstrap 的类是 undefined。

如果你的目标是制作 Angular 2 应用程序的框架 ES6 版本，我创建了一个 working example一切都设置为可以工作并且也接受装饰器。