Question

我收到以下错误，有人可以告诉我那里有什么问题吗？我该如何解决问题？可能是main.ts中缺少的东西。

错误：（索引）：39错误：错误：必须定义令牌！在新的BaseException（https://npmcdn.com/@angular/core@2.0.0-rc.1/src/facade/exceptions.js:17:23）在新的ReflectiveKey（https://npmcdn.com/@angular/core@2.0.0-rc.1/src/di/reflective_key.js:28:19）在KeyRegistry.get（https://npmcdn.com/@angular/core@2.0.0-rc.1/src/di/reflective_key.js:69:22）在Function.ReflectiveKey.get（https://npmcdn.com/@angular/core@2.0.0-rc.1/src/di/reflective_key.js:43:35） at resolveReflectiveProvider（https://npmcdn.com/@angular/core@2.0.0-rc.1/src/di/reflective_provider.js:96:75）在Array.map（本机） at Object.resolveReflectiveProviders（https://npmcdn.com/@angular/core@2.0.0-rc.1/src/di/reflective_provider.js:104:31）在Function.ReflectiveInjector.resolve（https://npmcdn.com/@angular/core@2.0.0-rc.1/src/di/reflective_injector.js:357:38）在Function.ReflectiveInjector.resolveAndCreate（https://npmcdn.com/@angular/core@2.0.0-rc.1/src/di/reflective_injector.js:387:62） at Object.bootstrap（https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.1/platform_browser_dynamic.js:90:49）加载http://127.0.0.1:8000/static/app/main.ts

时出错

main.ts：

import {bootstrap}        from '@angular/platform-browser-dynamic';
import {AppComponent}     from './app.component.ts';
import {HTTP_PROVIDERS , JSONP_PROVIDERS} from '@angular/http';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from '@angular/router-deprecated';
import {FORM_PROVIDERS, FormBuilder, Validators} from '@angular/common';
//import {MATERIAL_PROVIDERS} from 'ng2-material/all';
import {provide} from '@angular/core';

//enableProdMode();
bootstrap(
        AppComponent, [
                         ROUTER_PROVIDERS , FORM_PROVIDERS , HTTP_PROVIDERS ,
                         provide(LocationStrategy, {useClass: HashLocationStrategy})
                         ]
        ).catch(err => console.error(err));

systemjs.config.js：

(function(global) {

  var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest,
    'angular2-highcharts':        'https://cdn.rawgit.com/gevgeny/angular2-highcharts/0.1.0/dist', 
    'highcharts/highstock.src':   'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js',
    //'ng2-material':                 'https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material',
    'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js',

  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'angular2-highcharts' :       { main: 'index',format: 'cjs', defaultExtension: 'js' },
   // 'ng2-material':             { defaultExtension: 'js'}
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/upgrade',
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3?main=browser'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'ts',
    typescriptOptions: {
      emitDecoratorMetadata: true,
      tsconfig: false
    },
    meta: {
        'typescript': {
          "exports": "ts"
        }
      },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

Answer 1

我认为问题的原因在于：

import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from '@angular/router-deprecated';

您需要从@ angular / common导入位置策略。因此，您必须按照以下说明更改代码：

import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {FORM_PROVIDERS, FormBuilder, Validators, LocationStrategy, HashLocationStrategy} from '@angular/common';

您可以在此页https://angular.io/docs/ts/latest/guide/router-deprecated.html

上查看更多信息

Answer 2

如果 @angular 位于“node_modules”文件夹下，则使用键@angular

映射文件夹路径

在 systemjs.config.js 文件中，如：

var map = {
'@angular':                   'node_modules/@angular'
}

在初始加载应用程序时出错“错误：必须定义令牌！”

2 个答案: