Angular 4页面无法加载

时间：2017-06-15 13:22:02

标签： angular

我现在正在学习角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 {}

这是项目的文件，可能有用。

我会在评论

中发布指向图片的链接

3 个答案:

答案 0 :(得分：0)

从我在日志中看到的情况来看，这可能会有效 导入服务或任何提供程序，并在组件元数据的提供程序中声明它们

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

其他方式是在NgModule

中声明依赖项 
@NgModule({
 providers : [Servicename]
})

答案 1 :(得分：0)

根据我在屏幕截图中看到的内容，帐户不是服务，只有当它是服务时，您才必须在提供者数组中添加帐户。

答案 2 :(得分：0)

好的，问题解决了。在ath.service.ts中有一个拼写错误

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

将其更改为

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

现在好了。谢谢。

相关问题
最新问题