McRed McRed - 15 days ago 10
AngularJS Question

Angular 2 - Routing Issues with file based app

I've been tinkering with this one based on several threads and tutorials, none of which seem to solve this particular issue. I have a small app that is being loaded from the file system and not through HTTP. No matter how I tweak the set up

index.html#/character
or
index.html#character
will always route to the
AppComponent
and not the
CharacterComponent
. If I change the bootstrap in
app.module.ts
from
AppComponent
to
CharacterComponent
, it will show character. I have a feeling that I'm just missing one piece of the routing config that will correctly route between components.

Versions



"devDependencies": {
"awesome-typescript-loader": "^3.0.0-beta.3",
"babel-core": "^6.18.2",
"concurrently": "^3.1.0",
"es6-shim": "^0.35.1",
"lite-server": "^2.2.2",
"typescript": "^2.0.10",
"webpack": "^2.1.0-beta.25"
},
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"angular-in-memory-web-api": "~0.1.15",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-rc.4",
"zone.js": "^0.6.26",
"ui-router-ng2": "^1.0.0-beta.3"
}


Webpack



entry: {
'angular2': [
'zone.js',
'rxjs',
'reflect-metadata',
'@angular/core'
],
'app': './app/app'
},


index.html



<html>
<head>
<base href="">
<meta charset="UTF-8">
<title>test app</title>
<link rel="stylesheet" type="text/css" href="css/app.css">

</head>
<body>
<div class="container">
<app></app>
</div>
<script src="../build/common.js"></script>
<script src="../build/angular2.js"></script>
<script src="../build/app.js"></script>
</body>
</html>


app.component.ts



import { Component } from '@angular/core';

@Component({
selector: 'app',
templateUrl: 'templates/selectFile.html'
})

export class AppComponent {
}


templates/selectFiles.html



<div id="selectFile">
<a href="" id="fileselect"></a>
</div>
<router-outlet></router-outlet>


character.component.ts



import { Component } from '@angular/core';

@Component({
selector: 'app',
templateUrl: 'templates/character.html'
})

export class CharacterComponent {
}


templates/character.html



<div id="selectFile">
character <br />
</div>
<router-outlet></router-outlet>


app.module.ts



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { CharacterComponent } from './character.component';

const routes: Routes = [
{ path: 'character', component: CharacterComponent },
{ path: '', component: AppComponent }
]

@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
declarations: [
AppComponent,
CharacterComponent
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [ AppComponent ]
})

export class AppModule { }

Answer

Bootstrap your app component, that will always be on the page. The router is going to put the appropriate component into the <router-outlet></router-outlet> tag (actually at the same level, but that's beside the point).

The question is, where do you want the empty route '' to go? You might have a HomePageComponent that gets loaded, or you might want to redirect to your CharacterComponent using the redirectTo option.

{
  path: '',
  redirectTo: '/character',
  pathMatch: 'full'
}

Read more here.