The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

423803 (9) [Avatar] Offline
#1
app.module.ts
[ 794 bytes ]
app.routing.ts
[ 889 bytes ]
i'm relatively new to angular2 & typescript. I was making the app based on the tutorial on angular site(https://angular.io/docs/ts/latest/tutorial/toh-pt5.html)
only my routing doesn't seem to be working atm. No errors are being thrown. Just nothing happens when I click on my links that use angular2 routing. Also when I request a routing link directly from the browser address bar, the routing doesn't work. Everything else works. Below is the source code of my generated angular page. I added the relevant typescript files aswell.
<html><head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <script>document.write('<base href="' + document.location + '" />');</script><base href="http://localhost:3000/">
    <!-- Polyfill(s) for older browsers -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
          System.import('app').catch(function(err){ console.error(err); });
    </script>
<style>h1[_ngcontent-osf-1] {
  font-size: 1.2em;
  color: #999;
  margin-bottom: 0;
}
h2[_ngcontent-osf-1] {
  font-size: 2em;
  margin-top: 0;
  padding-top: 0;
}
nav[_ngcontent-osf-1] a[_ngcontent-osf-1] {
  padding: 5px 10px;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav[_ngcontent-osf-1] a[_ngcontent-osf-1]:visited, a[_ngcontent-osf-1]:link {
  color: #607D8B;
}
nav[_ngcontent-osf-1] a[_ngcontent-osf-1]:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav[_ngcontent-osf-1] .active[_ngcontent-osf-1] {
  color: #039be5;
}</style></head>
<!-- 3. Display the application -->
<body><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.2.14.0.js'><\/script>".replace("HOST", location.hostname));
//]]></script><script async="" src="/browser-sync/browser-sync-client.2.14.0.js"></script>

    <my-app _nghost-osf-1=""><h1 _ngcontent-osf-1="">Clients</h1>
<nav _ngcontent-osf-1="">
    <a _ngcontent-osf-1="" routerlink="/dashboard" routerlinkactive="active">Dashboard</a>
    <a _ngcontent-osf-1="" routerlink="/clients" routerlinkactive="active">Clients</a>
    <a _ngcontent-osf-1="" routerlink="/login" routerlinkactive="active">Login</a>
</nav>
<router-outlet _ngcontent-osf-1=""></router-outlet></my-app>

</body></html>
Anton Moiseev (27) [Avatar] Offline
#2
Add routing variable to the imports list of AppModule class:

import { routing, appRoutingProviders } from './app.routing';

@NgModule({
    imports: [BrowserModule, FormsModule, routing], // <-- `routing` is missing in the app.module.ts file
    // rest of the configuration...
})
export class AppModule { }
423803 (9) [Avatar] Offline
#3
thanks so much, that solved my problem.
423803 (9) [Avatar] Offline
#4
app.routing.ts
[ 997 bytes ]
How do I add child routes to my config? I tried adding children parameter but then none of the routing works before I even need the child route.