angular 2 typescript initial - with users module

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { UsersComponent } from './modules/users/users.component';
 
 const routes: Routes = [
   {
     path: '',
     children: []
+  },
+  {
+    path: 'users',
+    component: UsersComponent
   }
 ];
 

src/app/app.module.ts

@@ -5,10 +5,13 @@ import { HttpModule } from '@angular/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { UsersComponent } from './modules/users/users.component';
+import { UserService } from './modules/users/services/user.service';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    UsersComponent,
   ],
   imports: [
     BrowserModule,
@@ -16,7 +19,7 @@ import { AppComponent } from './app.component';
     HttpModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [UserService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/modules/users/models/user.ts

+export class User {
+    BirthDate: Date;
+    FirstName: string;
+    LastName: string;
+    UserName: string;
+}

src/app/modules/users/services/user.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [UserService]
+    });
+  });
+
+  it('should ...', inject([UserService], (service: UserService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/modules/users/services/user.service.ts

+import { Injectable }    from '@angular/core';
+import { Headers, Http } from '@angular/http';
+import { User } from './User';
+import 'rxjs/add/operator/toPromise';
+@Injectable()
+export class UserService {
+  private usersUrl = 'api/user';  // URL to web api
+  constructor(private http: Http) { }
+
+  getUsers(): Promise<User[]> {
+    return this.http.get('http://localhost:1337/' + this.usersUrl)
+      .toPromise()
+      .then(response => 
+        response.json().users as User[])
+      ;
+  }
+
+}

src/app/modules/users/users.component.html

+<ul class="users">
+  <li *ngFor="let user of users">
+    <span class="badge">{{user.id}}</span>
+    <span>{{user.UserName}}</span>
+  </li>
+</ul>
\ No newline at end of file

src/app/modules/users/users.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/users/users.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { User } from './models/user';
+import { UserService } from './services/user.service';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.less']
+})
+export class UsersComponent implements OnInit {
+  users: User[];
+
+  constructor(
+    private userService: UserService,
+    private router: Router) { }
+
+  getUsers(): void {
+    this.userService
+      .getUsers()
+      .then(users => {
+        debugger;
+        this.users = users
+      });
+  }
+
+  ngOnInit() {
+    this.getUsers();
+  }
+
+}