CODEWITHSUNDEEP
angularangular2-routing
Mathijs Segers
Mathijs Segers

Reputation: 6238

Angular2 Routing is not being loaded by requirejs

Hi I've been following the tutorial and I've changed some folder structure, all well and Good.

in Alpha stage I used the angular2-seed project which contained routing.

I'm trying to set up routing right now but I keep getting a failure to load the exports.

this component is located at /app/template/footer, I believe the imports should work, I also tried adding a slash in front of the import or relatively by adding 2 or 3 times ../

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';

@Component({
    selector: 'navigation',
    directives: [ROUTER_DIRECTIVES],
    template: `
    <ul>
        <li> <a [routerLink]="['./orders']">Orders</a></li>
    </ul>
    `
})

export class Navigation {

}

The errors in console:

1 Uncaught SyntaxError: Unexpected token < 2 Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/angular2/router Error loading http://localhost:3000/app/boot.js

The response just loads the index.html

Upvotes: 2

Views: 553

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202176

Do you add the following in your index.js file:

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>

If so, you should check your configuration of SystemJS and the Typescript compiler. In fact, SystemJS provides the module support (import modules and register modules).

Do you configure SystemJs like that:

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

Regarding the configuration of the Typescript compiler in the tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

You could also have a look at the Angular2 quickstart for more details: https://angular.io/guide/quickstart.

Hope it helps you, Thierry

Upvotes: 3

Related Questions