Emmanuel Scarabin
Emmanuel Scarabin

Reputation: 745

Upgrading to Angular 2 final version : traceur.js error

I am facing an issue after upgrading from Angular 2 RC5 to Angular 2 final version (2.1.1). I am using system.js. My all typescript code was working fine before upgrading and I did not update any of it.

Here is the error I keep getting :

Error: SyntaxError: Unexpected token <
        at eval (<anonymous>)
    Evaluating http://localhost:8888/traceur.js
        Error loading http://localhost:8888/traceur.js
        Error loading http://localhost:8888/node_modules/@angular/router/index.js as "@angular/router" from http://localhost:8888/js/typescript/app.module.jsZoneDelegate.invoke

I copied the package.json from Angular 2 docs (https://angular.io/docs/ts/latest/guide/npm-packages.html)

And here is my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routes';
import { SharedModule } from './shared/shared.module';
import { RouterModule } from '@angular/router';

@NgModule({
    imports:      [ BrowserModule,
                    RouterModule,
                    FormsModule,
                    HttpModule,
                    SharedModule,
                    routing ],
    bootstrap:    [ AppComponent ],
})

export class AppModule {}

EDIT : Here is my sytemjs.config.js file:

  var map = {
    'app':                        'app', // 'dist',

    'angular2':                   'node_modules/angular2',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'zone.js':                    'node_modules/zone.js',
    'ng2-bootstrap':              'node_modules/ng2-bootstrap',
    'moment':                     'node_modules/moment',
    'express':                    'node_modules/express'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'zone.js':                    { main: 'dist/index.js', defaultExtension: 'js' },
    'ng2-bootstrap':              { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
    'moment':                     { main: 'moment.js', defaultExtension: 'js' },
    'notifications':              { main: 'components.js', defaultExtension: 'js' },
    'angular2-recaptcha':         { defaultExtension: 'js', main:'index' },
    'rxjs' :                      {main: 'Rx'},
    '@angular/core' :             {main: 'bundles/core.umd.js'},
    '@angular/common' :           {main: 'bundles/common.umd.js'},
    '@angular/upgrade' :          {main: 'bundles/upgrade.umd.js'},
    '@angular/compiler' :         {main: 'bundles/compiler.umd.js'},
    '@angular/forms' :            {main: 'bundles/forms.umd.js'},
    '@angular/router' :           {main: 'bundles/router.umd.js'},
    '@angular/platform-browser' : {main: 'bundles/platform-browser.umd.js'},
    '@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'},
    '@angular/http' :             {main: 'bundles/http.umd.min.js'}
  };

and my app.routes.ts file:

import { Routes, RouterModule } from '@angular/router';

// Components
import { HomeComponent } from './shared/components/home.component';
import { ClubComponent } from './shared/components/club.component';
import { BusinessPageComponent } from './shared/components/business-page.component';

const appRoutes: Routes = [
    // Child routing
    {
        path: 'profil',
        loadChildren: '/js/typescript/profile/profile.module#ProfileModule'
    },

    {
        path: 'recherche',
        loadChildren: '/js/typescript/job-search/job-search.module#JobSearchModule'
    },

    // Business page
    { path: 'etablissement/:businessId', component: BusinessPageComponent },
    { path: 'club/:clubId', component: BusinessPageComponent },

    // Root
    { path: '', redirectTo: '/accueil', pathMatch: 'full'},
];

// - Updated Export
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

Upvotes: 0

Views: 142

Answers (0)

Related Questions