Angular2 TypeScript2を学んでいる：共有クラスでディレクティブエラーがありません

Question

私はAngular2とTypeScriptの全く新しいWeb開発者です。一般的には新しいアプリです。

私は、さまざまなオブジェクトがSessionIDのようなユーザーデータを取得できる共有クラスを設定しようとしています。私の問題は、HTTPリクエストを処理できるコンストラクタを取得する方法がわかりません。

私はIonic2を使用しています。そのため、Angular2とTypescriptはすべてビジュアルコード内にあります。私は私のテンプレートを構築するイオンを始めた、と私はビジュアルコードのエラーを取得するが、私は私の最小限の理解では「イオンが--address 192.168.1.128に仕える」

Uncaught Error: No Directive annotation found on CurrentUser at DirectiveResolver.resolve (http://192.168.1.128:8100/build/main.js:23898:19) at CompileMetadataResolver.getDirectiveMetadata (http://192.168.1.128:8100/build/main.js:24885:51) at RuntimeCompiler._createCompiledHostTemplate (http://192.168.1.128:8100/build/main.js:39289:51) at http://192.168.1.128:8100/build/main.js:39246:37 at Array.forEach (native) at http://192.168.1.128:8100/build/main.js:39245:45 at Array.forEach (native) at RuntimeCompiler._compileComponents (http://192.168.1.128:8100/build/main.js:39236:43) at RuntimeCompiler._compileModuleAndComponents (http://192.168.1.128:8100/build/main.js:39173:37) at RuntimeCompiler.compileModuleAsync (http://192.168.1.128:8100/build/main.js:39164:21)

を実行した後、下のエラーを得ることはありません、I

• /src/app/app.compnonent.ts
• /src/app/app.module.ts
• /SRC /アプリ/サービス/ CurrentUserに：この問題で重要な選手であると思います。 ts
• /tsconfig.json
• /package.json

これらのファイルは以下のとおりです。

どのようにして、そのHTTPオブジェクトで構成されたCurrentUserクラスを渡すことができますか？私は間違って何をしていますか？

app.compnonent.ts

import { Component, ViewChild } from '@angular/core'; 
import { Nav, NavController, Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native'; 

import { TabsPage } from '../pages/tabs/tabs'; 
import { CurrentUser } from './service/currentUser'; 

@Component({ 
    templateUrl: 'app.html', 
    providers: [CurrentUser] 
}) 
export class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    rootPage = TabsPage; 

    constructor(platform: Platform, public _user: CurrentUser, private _navCtrl: NavController) { 
    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
     if (!_user.sessionId) { 
     _navCtrl.push("login.html"); 
     } 
    }); 
    } 
} 

app.module.ts

import { CurrentUser } from './service/currentUser'; 
import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 

import { MyApp } from './app.component'; 
import { AboutPage } from '../pages/about/about'; 
import { ContactPage } from '../pages/contact/contact'; 
import { HomePage } from '../pages/home/home'; 
import { LoginPage } from '../pages/login/login'; 
import { TabsPage } from '../pages/tabs/tabs'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    LoginPage, 
    TabsPage 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp, CurrentUser], 
    entryComponents: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    LoginPage, 
    TabsPage 
    ], 
    providers: [CurrentUser] 
}) 
export class AppModule {} 

currentUser.ts

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 

@Injectable() 
export class CurrentUser { 
    public sessionId: string; 
    private local: Storage; 

    constructor(private _http: Http) { 
    this.local = new Storage(); 
    if (this.local.getItem("user-profile")) { 
     var profile = JSON.parse(this.local.getItem("user-profile")); 
     this.sessionId = profile.sessionId; 
    } else { 
     this.sessionId = null; 
    } 
    } 

    public login(email: string, password: string) { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return new Promise((resolve, reject) => { 
    this._http.get("http://example.com/svc/rest.php?action=login&email=" + email + "&password=" + password, options) 
     .subscribe((data) => { 
     console.log(data); 
     }); 
    }); 
    } 
    public create(email: string, password: string, name: string) { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return new Promise((resolve, reject) => { 
    this._http.post("http://example.com/svc/rest.php", { action: "user", email: email, password: password, name: name}, options) 
     .subscribe((data) => { 
     console.log(data); 
     }); 
    }); 
    } 
} 

tsconfig.json

{ 
    "compilerOptions": { 
    "allowSyntheticDefaultImports": true, 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ 
     "dom", 
     "es2015" 
    ], 
    "module": "es2015", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "target": "es5" 
    }, 
    "include": [ 
    "src/**/*.ts" 
    ], 
    "exclude": [ 
    "node_modules" 
    ], 
    "compileOnSave": false, 
    "atom": { 
    "rewriteTsconfig": false 
    } 
} 

package.json

{ 
    "name": "example", 
    "author": "Wade McDaniel", 
    "homepage": "http://example.com/", 
    "private": true, 
    "scripts": { 
    "build": "ionic-app-scripts build", 
    "watch": "ionic-app-scripts watch", 
    "serve:before": "watch", 
    "emulate:before": "build", 
    "deploy:before": "build", 
    "build:before": "build", 
    "run:before": "build" 
    }, 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/compiler-cli": "0.6.2", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/platform-server": "2.0.0", 
    "@ionic/storage": "1.1.6", 
    "ionic-angular": "2.0.0-rc.1", 
    "ionic-native": "2.2.3", 
    "ionicons": "3.0.0", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "0.6.21" 
    }, 
    "devDependencies": { 
    "@ionic/app-scripts": "0.0.38", 
    "typescript": "2.0.6" 
    }, 
    "description": "example app", 
    "cordovaPlugins": [ 
    "cordova-plugin-device", 
    "cordova-plugin-console", 
    "cordova-plugin-whitelist", 
    "cordova-plugin-splashscreen", 
    "cordova-plugin-statusbar", 
    "ionic-plugin-keyboard" 
    ], 
    "cordovaPlatforms": [] 
} 

ありがとうございました！

更新 Storage（）がCurrentUserコンストラクタを無効にしていたことが判明しました。理由は以下のコメントを参照してください。ありがとうsilentsod！

今あるCurrentUserからストレージに取得する方法を考え出す...

Answer 1

は、ブートストラップは、エントリコンポーネントの設定、およびCurrentUserが、それはエントリコンポーネントではありません共有サービスであることとされ、CurrentUserをブートストラップしないでください。ここで

は、ドキュメントは、次のとおりです。https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-entry-component-defined

Any component that Angular loads imperatively by type is an entry component,

A component loaded declaratively via its selector is not an entry component.

<...>

Most application developers won't need to add components to the entryComponents.

またHttpがあなたのコンストラクタで利用可能であることについて質問をしました。あなたのapp.module.tsでは、実行する必要があります。あなたはあなたのようにしてください周りに注入するためのHTTPプロバイダをインスタンス化します

import { HttpModule } from "@angular/http"; 

@NgModule({ 
<...> 
imports: [<...>, HttpModule] 
}) 

を。