角度7:未定义注入的服务 [英] Angular 7 : Injected service is undefined
问题描述
我尝试在LoginService中注入AccountService,但不会这样做,accountService未定义,但另一方面authServiceProvider已定义.
I tried to inject AccountService in the LoginService but it won't ,the accountService is undefined but in the other hand the authServiceProvider is defined .
相反,它完美地注入了footerComponent.
Contrarily it injected perfectly in footerComponent.
那么为什么将AccountService完美地注入FooterComponent并导致LoginService出现错误.
So why the AccountService is injected perfectly in FooterComponent and it bugs in the LoginService.
我不知道问题是从哪里来的.
I do not know where the problem came from .
import { Injectable } from '@angular/core';
import { AccountService } from 'app/core/auth/account.service';
import { AuthServerProvider } from 'app/core/auth/auth-jwt.service';
@Injectable({ providedIn: 'root' })
export class LoginService {
constructor(public accountService: AccountService, private authServerProvider: AuthServerProvider) {
console.log(this.accountService); // is undefined
console.log(this.authServerProvider); // is defined
}
这是AuthentificationService
This is the AuthentificationService
@Injectable({ providedIn: 'root' })
export class AuthServerProvider {
constructor(private http: HttpClient, private $localStorage: LocalStorageService, private $sessionStorage: SessionStorageService) {}
这是AccountService
This is the AccountService
@Injectable({ providedIn: 'root' })
export class AccountService {
private userIdentity: any;
private authenticated = false;
private authenticationState = new Subject<any>();
constructor(private languageService: JhiLanguageService, private sessionStorage: SessionStorageService, private http: HttpClient) {}
我尝试在其他组件中使用AccountService,并且注入完美
I tried to use AccountService in other component and it injected perfectly
import { Component } from '@angular/core';
import { AccountService } from 'app/core';
@Component({
selector: 'jhi-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent {
constructor( private accountService: AccountService) {
console.log(this.accountService); // It is defined
}
}
这是app.module.ts
this is the app.module.ts
import './vendor.ts';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
import { Ng2Webstorage } from 'ngx-webstorage';
import { NgJhipsterModule } from 'ng-jhipster';
import { AuthInterceptor } from './blocks/interceptor/auth.interceptor';
import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor';
import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor';
import { SharedModule } from 'app/shared';
import { CoreModule } from 'app/core';
import { AppRoutingModule } from './app-routing.module';
import { HomeModule } from './home/home.module';
import { AccountModule } from './account/account.module';
import { EntityModule } from './entities/entity.module';
import * as moment from 'moment';
// jhipster-needle-angular-add-module-import JHipster will add new module here
import { JhiMainComponent, NavbarComponent, FooterComponent, PageRibbonComponent, ActiveMenuDirective, ErrorComponent } from './layouts';
@NgModule({
imports: [
BrowserModule,
Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-' }),
NgJhipsterModule.forRoot({
// set below to true to make alerts look like toast
alertAsToast: false,
alertTimeout: 5000,
i18nEnabled: true,
defaultI18nLang: 'en'
}),
SharedModule.forRoot(),
CoreModule,
HomeModule,
AccountModule,
// jhipster-needle-angular-add-module JHipster will add new module here
EntityModule,
AppRoutingModule
],
declarations: [JhiMainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: AuthExpiredInterceptor,
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorHandlerInterceptor,
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: NotificationInterceptor,
multi: true
}
],
bootstrap: [JhiMainComponent]
})
export class AppModule {
constructor(private dpConfig: NgbDatepickerConfig) {
this.dpConfig.minDate = { year: moment().year() - 100, month: 1, day: 1 };
}
}
这是core.module.
and this is the core.module .
import { NgModule, LOCALE_ID } from '@angular/core';
import { DatePipe, registerLocaleData } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Title } from '@angular/platform-browser';
import locale from '@angular/common/locales/en';
@NgModule({
imports: [HttpClientModule],
exports: [],
declarations: [],
providers: [
Title,
{
provide: LOCALE_ID,
useValue: 'en'
},
DatePipe
]
})
export class CoreModule {
constructor() {
registerLocaleData(locale);
}
}
预先感谢您的帮助.
推荐答案
您应该始终在根注入器中提供服务,除非 在某些情况下,您希望仅在以下情况下才可以使用该服务: 消费者导入特定的@NgModule.
You should always provide your service in the root injector unless there is a case where you want the service to be available only if the consumer imports a particular @NgModule.
尝试添加要在core.module
import { NgModule, LOCALE_ID } from '@angular/core';
import { DatePipe, registerLocaleData } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Title } from '@angular/platform-browser';
import locale from '@angular/common/locales/en';
@NgModule({
imports: [HttpClientModule],
exports: [],
declarations: [],
providers: [
AccountService,
Title,
{
provide: LOCALE_ID,
useValue: 'en'
},
DatePipe
]
})
export class CoreModule {
constructor() {
registerLocaleData(locale);
}
}
,然后在您的AccountService中将@Injectable({ providedIn: 'root' })
替换为@Injectable()
and in your AccountService replace @Injectable({ providedIn: 'root' })
with @Injectable()
@Injectable()
export class AccountService {
private userIdentity: any;
private authenticated = false;
private authenticationState = new Subject<any>();
constructor(private languageService: JhiLanguageService, private sessionStorage: SessionStorageService, private http: HttpClient) {}
这篇关于角度7:未定义注入的服务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!