时间戳

首页 > 解决方案 > 向 Angular 组件添加服务时遇到问题

angular - 向 Angular 组件添加服务时遇到问题

问题描述

我有一些 Angular 项目正在使用服务并且运行良好，但是对于我的生活，我无法弄清楚这个项目发生了什么。每次应用程序加载时，我都会收到以下错误消息：

Unhandled Promise rejection: StaticInjectorError(Uu)[e -> t]: 
  StaticInjectorError(Platform: core)[e -> t]: 
    NullInjectorError: No provider for t! ; Zone: <root> ; Task: Promise.then ; 
Value: Error: StaticInjectorError(Uu)[e -> t]: 
  StaticInjectorError(Platform: core)[e -> t]: 
    NullInjectorError: No provider for t!

经过大量谷歌搜索和 StackOverflowing 之后，我确定向组件或应用程序提供服务的方式存在问题。我尝试将服务添加到我的 app.module.ts：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';
import { OnsenModule, OnsNavigator, Params } from 'ngx-onsenui';

import { AuthService } from './services/auth.service';

import { NavigatorComponent } from './pages/appnavigator';
import { LoginComponent } from './pages/login/login.component';
import { PickdrillComponent } from './pages/pickdrill/pickdrill.component';
import { RecordmeasurementsComponent } from './pages/recordmeasurements/recordmeasurements.component';

@NgModule({
  declarations: [
    NavigatorComponent,
    LoginComponent,
    PickdrillComponent,
    RecordmeasurementsComponent
  ],
  entryComponents: [
    LoginComponent,
    PickdrillComponent,
    RecordmeasurementsComponent
  ],
  imports: [
    BrowserModule,
    OnsenModule,
    FormsModule
  ],
  providers: [
    AuthService
  ],
  bootstrap: [ NavigatorComponent ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {
}

我已经尝试从 app.module.ts 中删除它们并将它们定义为每个单独组件的提供程序，但我仍然遇到相同的错误。这是一个组件示例。

import { Component, OnInit } from '@angular/core';
import { OnsNavigator } from 'ngx-onsenui';
import { PickdrillComponent } from '../pickdrill/pickdrill.component';
import { User } from '../../models/user.model';

import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'ons-page[login]',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [ AuthService ]
})
export class LoginComponent implements OnInit {
  username: string;
  password: string;
  errorMessage: string;

  constructor(
    private authService: AuthService,
    private navi: OnsNavigator
  ) { }

  ngOnInit() {
  }

  async login() {
    // calling the AuthService, yadda yadda yadda
  }

}

如果我从我的组件中删除服务并构建应用程序，一切都会很好，因此我将范围缩小到将这些服务添加到组件中。任何帮助将非常感激。

编辑：哎呀！忘记发布服务本身。这是 auth.service.ts：

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

import { BaseService } from './base.service';
import { User } from '../models/user.model';

@Injectable()
export class AuthService extends BaseService {
  constructor(protected http: Http) {
    super(http);
  }

  async login(user: User) {
    return this.post('login', user, true);
  }

  async forgotPassword(email: string) {
    return this.post('forgotPassword', {email: email}, true);
  }

  async resetPassword(password: string, resetToken: string) {
    return this.post('resetPassword', {password: password}, false, resetToken);
  }

  async register(user) {
    return this.post('register', user, true);
  }

  logout() {
    localStorage.removeItem('Authorization');
    sessionStorage.removeItem('Authorization');
  }
}

这当然是从具有需要 Http 的构造函数的基础服务中提取的。

标签： angulardependency-injectionangular-servicesonsen-ui

解决方案

所以，我得到了答案，不幸的是，我不知道它对其他人有多大帮助。我正在使用科尔多瓦通过以下方式构建应用程序

c:/angulardirectory/cordova/cordova run browser

这通过一个钩子开始了一个角度构建：

ng build --prod --output-path cordova/www/ --base-href .

那里一定有什么东西丢失了，因为一旦我进入一个目录并运行一个角度发球，一切又开始工作了。这是我能找到的唯一改变。超级诡异。

c:/angulardirectory/ng serve

推荐阅读