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.