10452

How to use Angular2 routing

Question:

I'm trying to write a single-page app but I can't get the routing to work. I tried using many tutorials but they seem to become outdated very quickly, considering that Angular2 is still on beta.

It seems that as soon as I add any reference to router directives or router configuration or router providers, the app stops working and the following error is printed on the browser's console:

Error: Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:332:20 Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:227:25 scheduleResolveOrReject/<@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:576:53 Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:365:24 Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:29 drainMicroTaskQueue@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:482:26 ZoneTask/this.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:434:22 Evaluating http://localhost:3000/angular2/router Error loading http://localhost:3000/app/main.js

Right now I have the following files, which don't work:

index.html

<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Rapid</title> <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> <link href="css/dashboard.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <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="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <app>Loading...</app> </body> </html>

main.ts

import {MainApp} from './mainApp.component'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {bootstrap} from 'angular2/platform/browser'; bootstrap(MainApp, [ ROUTER_PROVIDERS ]);

mainApp.component.ts

import {Component} from 'angular2/core'; import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router'; import {Home} from './home.component' @Component({ selector: 'app', template: ` <div>Done</div> `, directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ { path: '/', component: Home, as: 'Home' } ]) export class MainApp {}

home.component.ts

import {Component} from 'angular2/core'; @Component({ template: '<div>Home</div>', }) export class Home {}

I'm sorry if this is a newbie question, but I've been stuck on it since yesterday and I don't know how else to solve it...

Answer1:

Make sure router.dev.js(included) & app/main.js in correct location.

You missed few things here.

<ol><li>Do add base with href="/" tag on your page like <base href="/"></li> <li>App component template will have <router-outlet></router-outlet> directive</li> <li>Then use useAsDefault: true for your specified route</li> </ol>

do below change in route

@RouteConfig([ { path: '/', component: Home, as: 'Home', useAsDefault: true } ])

Answer2:

The problem for the error you are facing now, is because of a missing router.dev.js in your index.html. But as @PankajParkar already suggested, you need to add a little more stuff to your code to get it really working :)

Recommend

  • WordPress - I can't login - Something wrong with the wp_users table
  • Prevent date and time insert to the database
  • Openstack.Net SDK cannot access services
  • How do you download a image/png data URI in Edge?
  • Controlling tab space in a using CSS?
  • Javascript snippet not working (missing lib?)
  • Remove border around the color in an input[type=color] in Firefox?
  • Overriding window.location on Webbrowser Control
  • How to use both ga.js and analytics.js?
  • Kinect API written solely in Java without native functions?
  • Jquery Google Maps V3 - Information window is always fixed to one marker
  • How to center a menu using flexbox [closed]
  • reduce/reduce conflicts using ocamlyacc
  • Embedding a Google map
  • Can you use DataSet and DataTables in a Portable Class Library
  • Checkpointing In ALS Spark Scala
  • jinja2 template not found and internal server error
  • Heroku push rejected - Hartl's Rails 3.2 tutorial
  • How secure are apple APNS push notifications?
  • Why does the font in these TD elements render at different sizes?
  • I am receiving HibernateException “No Hibernate Session bound to thread, and configuration does not
  • MySQL: Update rows in table by iterating and joining with another one
  • Javascript CORS - No 'Access-Control-Allow-Origin' header is present
  • Why isn't obj.style.left = “200px”; working in this code?
  • Tell Git to stop prompting me for conflicts when none really exist?
  • JBoss External Properties Files in Classpath
  • Android - Material Design - NavigationView - How to put vertical scroll?
  • Jquery UI tool tip close icon
  • Display issues when we change from one jquery mobile page to another in firefox
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • SSO with signing and signature validation doesn't work
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?