Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Unable to set home template with ROUTER_PROVIDERS in angular 2
My code is:

main.ts file:


JavaScript
import { bootstrap } from 'angular2/platform/browser';
import { bind } from 'angular2/core';
import { ROUTER_PROVIDERS } from 'angular2/router';
import { AppComponent } from './app.component';

bootstrap(AppComponent, [ROUTER_PROVIDERS]).then(
    success => console.log('AppComponent bootstrapped!'),
    error => console.log(error)
);


app.component.ts:
import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { HomeComponent } from './home/home.component';
@Component({ 
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`,
  directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  { path: '/', as: 'Home', component: HomeComponent, useAsDefault: true }
])
export class AppComponent {
  
  constructor() {

  }  
}


home.component.ts :

JavaScript
import {Component} from 'angular2/core';
import { RouterLink } from 'angular2/router';
@Component({ 
  selector: 'home', 
  templateUrl: 'app/home/home.component.html',
  directives: [RouterLink]
})

export class HomeComponent{}


My index.html is:

HTML
<html>
  <head>
    <title>angular 2 sample application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/styles.css" rel="stylesheet" />
    <script src="scripts/es6-shim.js"></script>
    <script src="scripts/es6-shim.min.js"></script>
    <script src="scripts/system-polyfills.js"></script>
    <script src="scripts/shims_for_IE.js"></script>
    <script src="scripts/zone.min.js"></script>
    <script src="scripts/long-stack-trace-zone.js"></script>
    <script src="scripts/Reflect.js"></script>
    <script src="scripts/system.src.js"></script>
    <script src="scripts/Rx.js"></script>
    <script src="scripts/angular2.dev.js"></script>
    <script src="scripts/router.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
          packages: {
              app: { // must match your folder name
                  format: 'register',
                  defaultExtension: 'js'
              }
            }
        });
        System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <base href="/">
  <!-- 3. Display the application -->
  <body>
  <header >
  </header>
  <main class="container">
       <my-app>Loading...</my-app>
  </main>
  <footer>
  </footer>
  </body>
</html>


I have created the script with gulpfile inside src folder.
Please check this example nice app by DanWahlin
I am not getting any error running the application.

What I have tried:

i have tried with above mentioned link and that are working perfectly fine.
Posted
Updated 19-Oct-16 20:20pm

Hello Bikram Chhentri,

I'm not quite sure yet. In the official tutorial[^] on angular.io, they also register the ROUTER_PROVIDER in their main component decorator. Eventually just importing this, isn't enough.

// app/app.component.ts 
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <a [routerLink]="['Heroes']">Heroes</a>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES],
  providers: [
    ROUTER_PROVIDERS,                                     <<< <<< <<<
    HeroService
  ]
})


Please let me know, if this can solve your issue.
– Konstantin
 
Share this answer
 
v3
Comments
Bikram Chhetri 25-Mar-16 15:04pm    
Thank you Konstantin A. Magg.
I did all mashup and solved the issue but still don't know what was the exact issue.
and yes i did set the directives. :)
Konstantin A. Magg 26-Mar-16 3:59am    
Hey Bikram,
do you mean, you solved the issue and it works now? Or did you solve the issue in terms of register the ROUTER_PROVIDER but the router is still NOT working?
Bikram Chhetri 27-Mar-16 1:32am    
Hi Konstantin A. Magg ,
YES!!
Now my simple template binding and routing is working perfectly fine.
Thanks :)
Hi Here the correct way to resolve this issue of template binding.
app.component.ts:

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import {  HomeComponent} from './ HomeComponent';


@Component({
    selector: 'my-app',
    template: `                   
         <router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    { path: '/Home', name: 'Home', component: HomeComponent, useAsDefault: true },
])
export class AppComponent { }


HTML
home.component.ts :


C#
import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
import { HTTP_PROVIDERS, Http } from 'angular2/http';

import { AppComponent } from './app.component';
import { Router } from 'angular2/router';

@Component({
    selector: home,
    templateUrl: home/home.component.html,
    directives: [ROUTER_DIRECTIVES],
    providers: [HTTP_PROVIDERS]
})

export class  HomeComponent{}


Try this and let me know
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900