I am using angular 2 for routing and node for hosting locally.
When I use 'useAsDefault:true' for my route the nav bar links no longer work and the URL goes to http://localhost/ (Blank Page) when I want it to go to http://localhost/home
One I remove the flag the nav bar works correctly and I am able to go to the /home route but I go to the blank page
Can anyone shed any light on why the default flag is not working correctly ?
App.Component.ts
@RouteConfig([
{ path: '/home', name: 'Home', ponent: HomeComponent /*, useAsDefault : true */},
{ path: '/articles', name: 'Posts', ponent: PostsComponent },
{ path: '/detail/:id', name: 'PostDetail', ponent: PostDetailComponent },
{ path: '/login', name: 'Login', ponent: LoginComponent },
])
App.Component.html
<ul class="topnav">
<li><a [routerLink]="['Home']">Home</a></li>
<li><a [routerLink]="['Posts']">Articles</a></li>
<li><a href="#p">Publisher</a></li>
<li><a [routerLink]="['Login']">Login</a></li>
</ul>
<router-outlet></router-outlet>
Main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './appponent';
import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
index.html
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Blog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/styles.css">
<!-- Polyfill(s) for older browsers -->
<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>
</head>
<!-- 3. Display the application -->
<body>
<blog-app>Blog Loading...</blog-app>
</body>
</html>
I am using angular 2 for routing and node for hosting locally.
When I use 'useAsDefault:true' for my route the nav bar links no longer work and the URL goes to http://localhost/ (Blank Page) when I want it to go to http://localhost/home
One I remove the flag the nav bar works correctly and I am able to go to the /home route but I go to the blank page
Can anyone shed any light on why the default flag is not working correctly ?
App.Component.ts
@RouteConfig([
{ path: '/home', name: 'Home', ponent: HomeComponent /*, useAsDefault : true */},
{ path: '/articles', name: 'Posts', ponent: PostsComponent },
{ path: '/detail/:id', name: 'PostDetail', ponent: PostDetailComponent },
{ path: '/login', name: 'Login', ponent: LoginComponent },
])
App.Component.html
<ul class="topnav">
<li><a [routerLink]="['Home']">Home</a></li>
<li><a [routerLink]="['Posts']">Articles</a></li>
<li><a href="#p">Publisher</a></li>
<li><a [routerLink]="['Login']">Login</a></li>
</ul>
<router-outlet></router-outlet>
Main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.ponent';
import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
index.html
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Blog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/styles.css">
<!-- Polyfill(s) for older browsers -->
<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>
</head>
<!-- 3. Display the application -->
<body>
<blog-app>Blog Loading...</blog-app>
</body>
</html>
3 Answers
Reset to default 5Just add a route for every route one is trying to access that is not defined and redirect it to your home route:
@RouteConfig([
{ path: '/home', name: 'Home', ponent: HomeComponent },
{ path: '/articles', name: 'Posts', ponent: PostsComponent },
{ path: '/detail/:id', name: 'PostDetail', ponent: PostDetailComponent },
{ path: '/login', name: 'Login', ponent: LoginComponent },
{ path: '/**', redirectTo: ['Home'] }
])
Might b late:
useAsDefault is deprecated, use this:
const appRoutes: Routes = [
{ path: 'crisis-center', ponent: CrisisListComponent },
{ path: 'heroes', ponent: HeroListComponent },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', ponent: PageNotFoundComponent }
];
official doc: https://angular.io/docs/ts/latest/guide/router.html
When you use the useasdefault it means that you've a parent route and within it there's child routes ie
localhost:8000/dashboard/dashboard
localhost:8000/dashboard/settings
the two url routes will be set under a parent url like this:
{path: '/dashboard/...', ponent:Dashboard}
then in the Dashboard ponent you now create the dashboard root and the settings route as child routes like this:
{path: 'dashboard', ponent:DashboardAdmin, useAsDefault: True}
{path: 'settings', ponent:Settings}
in your case, figure out what you need encapsulated. for instance, home, article and detail could be under one parent url say:
{path: '/home/...' ponent: HomeDataComponent}
{ path: '/login', name: 'Login', ponent: LoginComponent },
then move the three urls config into HomeDataComponent or whichever name you give it:
@RouteConfig([
{ path: '/home', name: 'Home', ponent: HomeComponent , useAsDefault : true},
{ path: '/articles', name: 'Posts', ponent: PostsComponent },
{ path: '/detail/:id', name: 'PostDetail', ponent: PostDetailComponent },
])
When using useAsDefault you need to have the parent route and the useAsDefault on the child route you want to appear first.
Check this for a detailed explanation. Hope it works.