角度2ですべてのソースファイルが読み込まれない

Question

私の角度2のプロジェクトでは、angular-cli 1.0.0-rc.0で生成されたコンポーネントがいくつかあります。 だから、プロジェクトのsrcフォルダには、次のようになります。

一覧：

├── 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 

のsrc /モデル/ user.tsファイルがユーザークラス宣言を持っています。ソース版Chromeデベロッパーツールで

TypeError: this.currentUser.getFullName is not a function

よう 私は私のプロジェクトを立ち上げた時にとにかく、私が持っている多くのエラーは、私がthis screenshot上で見ることができ、モデルフォルダからの私のソースファイルを見つけられませんでした。

なぜウェブパック角部がないフォルダは無視しますか？

AppComponentクラス宣言：

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クラス宣言：

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); 
 
    } 
 
}

ユーザークラス宣言：

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

、あなたがこれをやっている：

return response.json() as User; 

この基本的に伝え活字体を：私を信頼し、私は、オブジェクトがあることを知っていますresponse.json()によって返されるクラスは、Userクラスのインスタンスです。しかし、そうではありません。 response.json()は、あなたのクラスのインスタンスではないダムのJavaScriptオブジェクトを作成するだけです（Angularはあなたのクラスについてどう思いますか）。そして、すべてのJSオブジェクトが持つもの以外のメソッドはありません。

メッセージのように、このメソッドが存在しないため、をこのダムオブジェクトにコールしようとすると失敗します。