角4ページが読み込まれない

Question

私は今角4を学んでいて、それについての本を買った。 残念ながら、この本にいくつかの誤りがあります。私はいくつかの誤りを作っているので、コードは最初の試行では実行されません。しかし今まで私は自分自身で解決することができました。しかし、今、私はいくつかのエラーが発生していると、ページが読み込まれない、と私は今なぜです。 この本では、ピザ用のウェブショップを作成します。私が最後にしたのは、ログインシステムを追加することでした。このアプリケーションはうまくいきましたが、ブックに変更が加えられ、ページがロードされず、ブラウザコンソールにエラーが発生しました。

AppComponent_Host.html:1 ERROR Error: No provider for Account! 
at injectionError (reflective_errors.ts:71) [angular] 
at noProviderError (reflective_errors.ts:105) [angular] 
at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500) [angular] 
at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543) [angular] 
at ReflectiveInjector_._getByKey (reflective_injector.ts:404) [angular] 
at ReflectiveInjector_.get (reflective_injector.ts:349) [angular] 
at AppModuleInjector.get (module.ngfactory.js? [sm]:1) [angular] 
at AppModuleInjector.getInternal (module.ngfactory.js? [sm]:1) [angular] 
at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141) [angular] 
at resolveDep (provider.ts:504) [angular] 
at createClass (provider.ts:368) [angular] 
at createDirectiveInstance (provider.ts:192) [angular] 
at createViewNodes (view.ts:291) [angular] 
at createRootView (view.ts:223) [angular] 



AppComponent_Host.html:1 ERROR CONTEXT 
DebugContext_ {view: Object, nodeIndex: 1, nodeDef: Object, elDef: Object, elView: Object} 

Unhandled Promise rejection: No provider for Account! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for Account! 
at injectionError (reflective_errors.ts:71) [angular] 
at noProviderError (reflective_errors.ts:105) [angular] 
at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500) [angular] 
at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543) [angular] 
at ReflectiveInjector_._getByKey (reflective_injector.ts:404) [angular] 
at ReflectiveInjector_.get (reflective_injector.ts:349) [angular] 
at AppModuleInjector.get (module.ngfactory.js? [sm]:1) [angular] 
at AppModuleInjector.getInternal (module.ngfactory.js? [sm]:1) [angular] 
at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141) [angular] 
at resolveDep (provider.ts:504) [angular] 
at createClass (provider.ts:368) [angular] 
at createDirectiveInstance (provider.ts:192) [angular] 
at createViewNodes (view.ts:291) [angular] 
at createRootView (view.ts:223) [angular] Error 
at injectionError (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:1238:86) [angular] 
at noProviderError (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:1276:12) [angular] 
at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:2777:19) [angular] 
at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:2816:25) [angular] 
at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:2748:25) [angular] 
at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:2617:21) [angular] 
at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:236:129) [angular] 
at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:415:51) [angular] 
at AppModuleInjector.NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:3563:44) [angular] 
at resolveDep (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:10931:45) [angular] 
at createClass (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:10792:91) [angular] 
at createDirectiveInstance (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:10628:37) [angular] 
at createViewNodes (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:11978:49) [angular] 
at createRootView (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:11883:5) [angular] 

Error: Uncaught (in promise): Error: No provider for Account! 
Error 
at injectionError (reflective_errors.ts:71) [angular] 
at noProviderError (reflective_errors.ts:105) [angular] 
at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500) [angular] 
at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543) [angular] 
at ReflectiveInjector_._getByKey (reflective_injector.ts:404) [angular] 
at ReflectiveInjector_.get (reflective_injector.ts:349) [angular] 
at AppModuleInjector.get (module.ngfactory.js? [sm]:1) [angular] 
at AppModuleInjector.getInternal (module.ngfactory.js? [sm]:1) [angular] 
at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141) [angular] 
at resolveDep (provider.ts:504) [angular] 
at createClass (provider.ts:368) [angular] 
at createDirectiveInstance (provider.ts:192) [angular] 
at createViewNodes (view.ts:291) [angular] 
at createRootView (view.ts:223) [angular] 
at injectionError (reflective_errors.ts:71) [angular] 
at noProviderError (reflective_errors.ts:105) [angular] 
at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500) [angular] 
at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543) [angular] 
at ReflectiveInjector_._getByKey (reflective_injector.ts:404) [angular] 
at ReflectiveInjector_.get (reflective_injector.ts:349) [angular] 
at AppModuleInjector.get (module.ngfactory.js? [sm]:1) [angular] 
at AppModuleInjector.getInternal (module.ngfactory.js? [sm]:1) [angular] 
at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141) [angular] 
at resolveDep (provider.ts:504) [angular] 
at createClass (provider.ts:368) [angular] 
at createDirectiveInstance (provider.ts:192) [angular] 
at createViewNodes (view.ts:291) [angular] 
at createRootView (view.ts:223) [angular] 
at :3000/node_modules/zone.js/dist/zone.js:654:33 [<root>] 

編集：だからここ

コード

app.component.ts

import {Component} from '@angular/core'; 
import {MenuItem} from 'primeng/primeng'; 
import {Router} from "@angular/router"; 
import {AuthService} from './login/ts/services/auth.service' 

@Component({ 
selector: 'pizzaconnection', 
templateUrl: 'app/app.html', 
styleUrls: ['app/css/styles.css'], 
}) 

export class AppComponent{ 

private items: MenuItem[]; 

constructor(private _router:Router, private _authService:AuthService) { 

    localStorage.removeItem('auth_token'); 

     this.items = [{ 
     label: 'Speisekarte', 
     icon: 'fa fa-cutlery', 
     routerLink: [''] 
    }, 
    { 
     label: 'Warenkorb', 
     icon: '', 
     routerLink: ['/cart'] 
    }] 
} 

logout() { this._authService.logout(); } 

login() { this._router.navigate(['login']); } 

isLoggedIn() { return this._authService.isLoggedIn(); } 

}

app.module.ts

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {AppComponent} from './app.component'; 
import {FormsModule} from '@angular/forms'; 
import {InputTextModule, ButtonModule, MenubarModule, DataGridModule, PanelModule, 
    DataListModule, GrowlModule, DataTableModule, DropdownModule} from 'primeng/primeng'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {routing} from './app.routes'; 
import {PizzaListComponent} from './pizza/ts/components/pizzalist.component' 
import {HttpModule, JsonpModule} from '@angular/http'; 
import {PizzaListService} from './pizza/ts/services/pizzalist.service'; 
import {PizzaDetailService} from './pizza/ts/services/pizzadetail.service'; 
import {PizzaDetailComponent} from './pizza/ts/components/pizzadetail.component'; 
import {CartComponent} from './cart/ts/components/cart.component'; 
import {CheckoutComponent} from './checkout/ts/components/checkout.component'; 
import {Cart} from './cart/ts/models/cart.model'; 
import {CheckoutService} from './checkout/ts/services/checkout.service'; 
import {OrderOptionComponent} from './order-option/ts/components/order-option.component'; 
import {LoginComponent} from './login/ts/components/login.component'; 
import {AuthService} from './login/ts/services/auth.service'; 
import {Account} from './login/ts/models/account.model'; 
import {ConfirmationComponent} from './confirmation/ts/components/confirmation.component' 
import {AccountCreatorComponent} from './account-creator/ts/components/account-creator.component'; 
import {AccountCreatorService} from './account-creator/ts/services/account-creator.service'; 

@NgModule({ 
imports:  [BrowserModule, 
       InputTextModule, 
       ButtonModule, 
       FormsModule, 
       BrowserAnimationsModule, 
       routing, 
       MenubarModule, 
       HttpModule, 
       JsonpModule, 
       DataGridModule, 
       PanelModule, 
       DataListModule, 
       GrowlModule, 
       DataTableModule, 
       DropdownModule], 
declarations: [AppComponent, 
       PizzaListComponent, 
       PizzaDetailComponent, 
       CartComponent, 
       CheckoutComponent, 
       OrderOptionComponent, 
       LoginComponent, 
       ConfirmationComponent, 
       AccountCreatorComponent], 
bootstrap:  [AppComponent], 
providers:  [PizzaListService, 
       PizzaDetailService, 
       Cart, 
       CheckoutService, 
       AuthService, 
       Account, 
       AccountCreatorService] 
}) 

export class AppModule {} 

です

これはプロジェクトのファイルです。おそらく役立つかもしれません。

私は私がログに表示されるものとコメントで

Answer 1

を写真へのリンクを掲載します、これは サービスまたは任意のプロバイダーをインポートし、コンポーネントのメタデータのプロバイダに

import {Servicename} from serviceURL 
@Component({ 
    providers : [Servicename] 
}) 

それらを宣言働くかもしれません

他の方法は、それ自体ではないアカウント私はスクリーンショットで見るものによるとNgModule

@NgModule({ 
providers : [Servicename] 
}) 

Answer 2

に依存関係を宣言することですサービスである場合にのみ、プロバイダ配列にアカウントを追加する必要があります。

Answer 3

問題は解決しました。 ath.service.ts

import {Account} from '..//models/account.model'; 

にタイプミスがありましたその罰金今

import {Account} from '../models/account.model'; 

にそれを変更しました。ありがとうございました。