Angular 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'; 

现在很好。 谢谢。