Angular2 routing alpha 46 routes forward (with a Console error), but not back to home

问题

I am experimenting with Angular2, alpha46, and using atom-typescript 7.7.2 I finally got it to route forward to a sub-page, but it does not correctly route back when I click the Back button. The Console error is - postApartment4Rent has no route configuration. But the command line changes to show the originating index.html URL, but the page does not automatically refresh. When I click the Refresh, the index.html page loads. The Home component seems absent. Additionally, atom-typescript has the error - router has no exported member ROUTER_PROVIDERS - though angular2 seems to find and work with it. Here's relevant code for app.ts, index.html, and postApartment4Rent.ts The home.ts file is currently identical to postApartment4Rent.ts except for the component name.

index.html

<residence-app><h1>Loading . . .</h1></residence-app>
<!--other stuff-->
<script src="https://code.angularjs.org/2.0.0-alpha.46/angular2.dev.js"></script> <!--Must be after the 2 ES6 & System.config above -->
<script src="https://code.angularjs.org/2.0.0-alpha.46/router.dev.js"></script>

app.ts

/// <reference path="../angular2-oPost/typings/angular2/angular2.d.ts" />
"use strict";
import { Component, View, bootstrap, Directive, bind, Inject } from "angular2/angular2";
import { ROUTER_PROVIDERS,
  Router,
  RouterOutlet,
  RouteConfig,
  RouterLink,
  Location
 } from 'angular2/router';

import { Home } from "./src/components/navigation/home";
import { PostApartment4Rent } from "./src/components/navigation/postApartment4Rent";
@Component({
  selector: 'residence-app'
})
@View({
  templateUrl: "angular2-oPost/src/components/navigation/headerFooter.html",
  styleUrls: ["angular2-oPost/src/commonStyles/headerFooter.css"],
  directives: [ RouterOutlet, RouterLink, Home, PostApartment4Rent ]
})
@RouteConfig( [
  { path: "/home", as: "Home", component: Home },
  { path: "/postApartment4Rent ",  as: "PostApartment4Rent", component: PostApartment4Rent } 
] )
class ResidenceApp {
  router: Router;
  location: Location;
  constructor(router: Router, location: Location) { this.router = router; this.location = location; }
}
bootstrap( ResidenceApp, [ROUTER_PROVIDERS] );

headerFooter.html has several divs and the following tag to insert partial page components

<router-outlet></router-outlet>

postApartment4Rent.ts should insert a component into router-outlet in headerFooter.html, if I understand routing correctly

"use strict";
import { Component, View, bootstrap, Directive } from "angular2/angular2";
import { RouterLink } from 'angular2/router';
@Component({
  selector: "residence-app"  //is this correct?
})
@View({
  template: `
  <div>
    <nav>
      <ul>
      <li><a [router-link]="['./Home']">Home Page</a></li>
      <li><a [router-link]="['./PostApartment4Rent']">Rent Apartment input link</a></li>
      </ul>
    </nav>
  </div>
  <main>
    < router-link ></router-link >
  </main>
<h1>PostApartment4Rent is under construction</h1>
`,
directives: [ RouterLink ]
})
export class PostApartment4Rent {
}

来源：https://stackoverflow.com/questions/33681486/angular2-routing-alpha-46-routes-forward-with-a-console-error-but-not-back-to

标签

typescript

angular

atom-editor