CODEWITHSUNDEEP
angular
dhananjay_shingote
dhananjay_shingote

Reputation: 419

Getting error at the initial load of application "Error: Token must be defined!"

I am getting below error ,can anybody tell me what is wrong there? How can I solve issue ? may be there is something missing in main.ts.

Error: (index):39 Error: Error: Token must be defined! at new BaseException (https://npmcdn.com/@angular/[email protected]/src/facade/exceptions.js:17:23) at new ReflectiveKey (https://npmcdn.com/@angular/[email protected]/src/di/reflective_key.js:28:19) at KeyRegistry.get (https://npmcdn.com/@angular/[email protected]/src/di/reflective_key.js:69:22) at Function.ReflectiveKey.get (https://npmcdn.com/@angular/[email protected]/src/di/reflective_key.js:43:35) at resolveReflectiveProvider (https://npmcdn.com/@angular/[email protected]/src/di/reflective_provider.js:96:75) at Array.map (native) at Object.resolveReflectiveProviders (https://npmcdn.com/@angular/[email protected]/src/di/reflective_provider.js:104:31) at Function.ReflectiveInjector.resolve (https://npmcdn.com/@angular/[email protected]/src/di/reflective_injector.js:357:38) at Function.ReflectiveInjector.resolveAndCreate (https://npmcdn.com/@angular/[email protected]/src/di/reflective_injector.js:387:62) at Object.bootstrap (https://npmcdn.com/@angular/[email protected]/platform_browser_dynamic.js:90:49) Error loading 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/[email protected]',
    '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/[email protected]/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/[email protected]/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/[email protected]?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
*/

Upvotes: 1

Views: 1119

Answers (2)

Ravinder Kumar
Ravinder Kumar

Reputation: 752

If your @angular is under "node_modules" folder then map folder path with key @angular

in systemjs.config.js file like:

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

Upvotes: 1

yurzui
yurzui

Reputation: 214095

I think that the cause of your problem is located here:

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

You need to import locations strategies from @angular/common. So you have to change your code as described below:

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

You can see more information on this page https://angular.io/docs/ts/latest/guide/router-deprecated.html

Upvotes: 2

Related Questions