1

I am new to Angular 2. when i run below code, I am getting

app/homePage/main.ts(19,3): error TS1146: Declaration expected typescript error.

Can you please let me know what is missing here

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

import { bootstrap }  from '@angular/platform-browser-dynamic';
import { HomeComponent } from './home'; 

import {

    ROUTER_DIRECTIVES, 
    ROUTER_PROVIDERS, 
    ROUTER_PRIMARY_COMPONENT,
    HashLocationStrategy, 
    LocationStrategy, 
    RouteConfig } from '@angular/router';



@RouteConfig([ 
    { path: '/', name: 'root', redirectTo: ['/Home'] }, 
    { path: '/home', name: 'Home', component: HomeComponent }    
])


bootstrap(HomeComponent, [ROUTER_PROVIDERS]);
2

1 Answer 1

3

A working solution:

main.ts:

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

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

app.component.ts:

import {Component} from 'angular2/core';
import {HomeComponent} from './home.component';
import {AboutComponent} from './about.component';
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';


@Component({
    selector: 'my-app',
    providers:[ROUTER_PROVIDERS],
    template: `
    <nav>
        <a [routerLink]="['Home']">Home</a>
        <a [routerLink]="['About']">About</a>
    </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: '',
    name: 'Home',
    component: HomeComponent,
    useAsDefault: true},

    {path: '/about',
    name: 'About',
    component: AboutComponent},

    { path: '/**', redirectTo: ['Home'] }
])
export class AppComponent { 

}

home.component.ts:

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Router} from 'angular2/router';

@Component({
    selector: 'home',
    template: `
    <h1>Home</h1>
  ` 
})

    export class HomeComponent{

    }

about.component.ts:

import {Component, OnInit} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Router} from 'angular2/router';

@Component({
    selector: 'about',
    template: `
    <h1>About</h1>
  ` 
})

export class AboutComponent{

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

2 Comments

Link only "answers" are generally discouraged due to the mutable nature of the linked pages.
Yes, sure, very understandable. I'll edit my post, remove the link and attach the code instead :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.