Angular 2 lädt nicht alle Quelldateien

Question

In meinem angular 2 Projekt habe ich ein paar Komponenten von angular-cli 1.0.0-rc.0 generiert. So Projekt src Ordner wie folgt aussehen:

Liste:

├── app 
│   ├── app.component.html 
│   ├── app.component.ts 
│   ├── routing.module.ts 
│   ├── app.module.ts 
│   ├── info 
│   │   ├── info.component.html 
│   │   └── info.component.ts 
│   ├── journal 
│   │   ├── journal.component.html 
│   │   └── journal.component.ts 
│   ├── model 
│   │   ├── entity.ts 
│   │   └── user.ts 
│   ├── roles 
│   │   ├── roles.component.html 
│   │   └── roles.component.ts 
│   └── users 
│    ├── users.component.html 
│    ├── users.component.ts 
│    └── users.service.ts 
│ 
├── favicon.ico 
├── fonts 
│... 
├── img 
│  ... 
└── index.html 

Das src/Modell/user.ts Datei hat Benutzer Klassendeklaration. Wie auch immer, wenn ich mein Projekt startete ich habe viele Fehler wie

TypeError: this.currentUser.getFullName is not a function

An den Chrome DevTools auf Quellen habe ich nicht meine Quelldateien aus Modellordner finden, können auf this screenshot sehen.

Warum Webpack Ordner ignorieren, die keine eckigen Komponenten hat?

AppComponent Klassendeklaration:

import {Component, OnInit} from "@angular/core"; 
 
    import {UsersService} from "./users/users.service"; 
 

 
    import {User} from "./model/user"; 
 

 
    @Component({ 
 
     selector: 'app-root', 
 
     templateUrl: './app.component.html' 
 
    }) 
 
    export class AppComponent implements OnInit { 
 

 
     constructor(private userService: UsersService) { 
 
     } 
 

 
     currentUser: User; 
 

 
     ngOnInit(): void { 
 
      this.userService.getCurrentUser().subscribe(user => { 
 
       this.currentUser = user; 
 
       console.log(user); 
 
      }); 
 
     } 
 

 
     getFullName(): string { 
 
      return this.currentUser != null ? this.currentUser.getFullName() : ""; 
 
     } 
 

 
    }

UsersService Klassendeklaration:

import {Injectable} from "@angular/core"; 
 
import {Http} from "@angular/http"; 
 
import "rxjs/add/operator/map"; 
 
import {Observable} from "rxjs"; 
 

 
import {User} from "../model/user"; 
 

 
@Injectable() 
 
export class UsersService { 
 

 
    private url = 'api/users' 
 

 
    constructor(private http: Http) { 
 
    } 
 

 
    getCurrentUser(): Observable<User> { 
 
     return this.http.get(`${this.url}/cu`) 
 
      .map(response => { 
 
       return response.json() as User; 
 
      }); 
 
    } 
 

 
    private handleError(error: any): Promise<any> { 
 
     return Promise.reject(error.message || error); 
 
    } 
 
}

Benutzer Klassendeklaration:

import {Entity} from "../model/entity"; 
 

 
export class User extends Entity { 
 

 
    constructor(
 
     public id: number, 
 
     public name: string, 
 
     public surname: string, 
 
     public patronimyc: string, 
 
     public login: string 
 
    ) { 
 
     super(id); 
 
    }; 
 

 
    getFullName():string{ 
 
     return `${this.surname} ${this.name} ${this.patronimyc}`; 
 
    } 
 

 
}

Answer 1

In Ihrem Service, sind Sie dies zu tun:

return response.json() as User; 

Diese im Grunde sagt Typoskript: Vertrauen Sie mir, ich weiß, dass das Objekt zurückgegeben von response.json() ist eine Instanz der Klasse User. Aber es ist nicht. response.json() erstellt nur ein dummes JavaScript-Objekt, das keine Instanz Ihrer Klasse ist (wie kann Angular Ihre Klasse kennen) und hat keine andere Methode als die, die alle JS-Objekte haben.

So versucht, getFullName() auf dieses dumme Objekt aufzurufen fehlschlägt, weil, wie die Nachricht sagt, diese Methode nicht existiert.