AngularJs2 Routing

Question

My objective is Route to login page when website loads. After logged in show home page by replacing the login-outlet How could i do it with angularjs2

Here is my code on app.components.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {LoginComponent} from './login/login.component';
import {HomeComponent} from './home/home.component';
@Component({
    selector: 'my-app',
    template:   '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES] 
})
@RouteConfig([
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true},
    {path: '/home', name: 'Home', component: HomeComponent}
    ])
export class AppComponent { }

My index.html

<html>

  <head>
    <title>Basic</title>

    <script>document.write('<base href="' + document.location + '" />');</script>
    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <!-- Router -->
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

But when i refresh the page, the url is multiplied like http://localhost:3000/login http://localhost:3000/login/login

i have the same problem before, the change base url like i did in my answer below — Cipto HD
– Cipto HD, Commented Jan 5, 2016 at 12:57

Cipto HD · Accepted Answer · 2016-01-05 12:51:28Z

1

If you are on a local dev, I think you should replace <script>document.write('<base href="' + document.location + '" />');</script> with <base href="/">

answered Jan 5, 2016 at 12:51

Cipto HD

7049 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cipto HD Over a year ago

glad it helps ^_^. the base url for index html which is like in the plnkr.co is just for live demo and it would print url like this one: (ex:run.plnkr.co/boByZFO8RKLNLKGx), ie:

Collectives™ on Stack Overflow

AngularJs2 Routing

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related