角4頁不加載

我正在學角4，併購買了一本關於它的書。不幸的是，這本書有一些錯誤，我也做了一些，所以代碼不會在第一次嘗試運行。但直到現在我可以通過我自己解決它們。但是，現在我收到了一些錯誤，頁面無法加載，現在我也不知道爲什麼。在這本書中，我們創建了一家網上商店，用於披薩。我做的最後一件事是添加一個登錄系統，在這個應用程序運行的地方，但隨後出現了本書中進行的一些更改，現在該頁面無法加載，並且瀏覽器控制檯中存在錯誤。角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 {}

這是項目的文件，也許它可能是有用的。

我將張貼在評論

來源

2017-06-15 jupper

你是否也可以發佈你的代碼..看起來你沒有在組件元數據或NgModule中聲明提供者 – praveen

你想要代碼的哪個文件？因爲整個項目包含大約20個文件。 – jupper

AppComponent，模塊，您試圖使用的帳戶服務 – praveen

從我在日誌中看到該鏈接的圖片，這可能工作導入服務或任何供應商和組件元數據的提供者宣佈他們

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

另一種方式是聲明依賴於NgModule

@NgModule({ 
providers : [Servicename] 
})

來源

2017-06-15 13:35:36 praveen

據我的截圖看到帳戶不是SE服務器，並且只有在服務器中，您必須在提供程序數組中添加帳戶。

來源

2017-06-15 16:54:36

因此，我從第四個數據集中移除了帳戶，但錯誤仍然存在。我將這個項目上傳到github。所以如果有人接受了。 https://github.com/jupper/PizzaConnectionClient – jupper

好的，問題解決了。有在ath.service.ts

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

一個錯字將其改爲

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

現在它的罰款。謝謝。

來源

2017-06-16 11:06:43 jupper

回答

相關問題