Проблема с добавлением сервиса в угловой компонент - PullRequest
Новая
       43

Проблема с добавлением сервиса в угловой компонент

0 голосов
/ 10 ноября 2018

У меня есть несколько проектов 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!

После многих поисков в Google и 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.

1 Ответ

0 голосов
/ 10 ноября 2018

Итак, я получил ответ и, к сожалению, я не знаю, насколько это поможет другим. Я создаю приложение с помощью Cordova через 

c:/angulardirectory/cordova/cordova run browser

Это запускает угловую сборку через крючок: 

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

Должно быть, там что-то потеряно, потому что, как только я поднялся в каталог и запустил угловую подачу, все снова заработало. Это единственное изменение, которое я могу найти, что я сделал. Супер странно. 

c:/angulardirectory/ng serve
...