錯誤：角度4或角度6中的StaticInjectorError（AppModule）

Question

這是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { HttpClientModule } from '@angular/common/http';
import { NgxSpinnerModule } from 'ngx-spinner';
import { NgFlashMessagesModule } from 'ng-flash-messages';
import { NgxfUploaderModule } from 'ngxf-uploader';
import { NgxUploaderModule } from 'ngx-uploader';
import { NumberDirective } from './number.directive';
import { FileSelectDirective } from 'ng2-file-upload';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
  declarations: [
    AppComponent,
    FirstPageComponent,
    SavePasswordComponent,
    LoginPageComponent,
    VerifyDetailsComponent,
    HomePageComponent,
    ViewOfferLetterComponent,
    ContactOptionComponent,
    SocialLinksComponent,
    ContactUsComponent,
    CompanyDetailsComponent,
    CompanyVisionComponent,
    SaveInformationComponent,
    AboutUsComponent,
    ComponyHistoryComponent,
    TestimonialComponent,
    AllocateOfficeComponent,
    NumberDirective,
    FacilitiesComponent,
    FirstDayRuleComponent,
    CompanyMediaComponent,
    HeaderPagesComponent,
    TestImageGallaryComponent,
  ],
  imports: [
    BrowserModule,
    MatProgressBarModule,
    HttpModule,
    FormsModule,
    HttpClientModule,
    NgxSpinnerModule,
    NgxfUploaderModule,
    NgxUploaderModule,
    NgFlashMessagesModule.forRoot(),
    NgbModule.forRoot(),
    BsDatepickerModule.forRoot(),
    RouterModule.forRoot(
    appRoutes,  // { enableTracing: true } // <-- debugging purposes only
    ),
    ModalGalleryModule.forRoot() // <----------------- angular-modal-gallery module import
  ],
  providers: [
    GlobalService,
    AuthguardGuard,
    SuperAdmiApiService,
    EmployeeApiService,
    CookieService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

這是我的組件中可能會產生錯誤

       import { Component, OnInit, VERSION, NgModule, Injectable } from '@angular/core';
// import {EventModel} from '../../models/EventModel';
import { BrowserModule } from '@angular/platform-browser';
import { EmployeeApiService } from '../../../config-pages/employee-api.service';
import { GlobalService } from '../../../config-pages/global.service';
import { CookieService } from 'ngx-cookie-service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { GridLayout, Image, PlainGalleryConfig, PlainGalleryStrategy } from 'angular-modal-gallery';
export interface Image {
  id: number;
  text: string;
}
import * as $ from 'jquery';
import { async } from '../../../../../node_modules/rxjs/internal/scheduler/async';
interface JQuery {
  center(): JQuery;
}
@Component({
  selector: 'app-test-image-gallary',
  templateUrl: './test-image-gallary.component.html',
  styleUrls: ['./test-image-gallary.component.css']
})
@Injectable()
export class TestImageGallaryComponent implements OnInit, Resolve<any> {

  name: string;
  compid: any;
  candidateid: any;
  Response: any;
  gallaryData: any;
  responseMessage: any;
  imageUrl: any;
  Image = [];
  isDataAvailable: any;
  data: any;
  i: any;
  asyncResult: any;
  htmlToAdd: any;
  plainGalleryGrid: PlainGalleryConfig = {
    strategy: PlainGalleryStrategy.GRID,
    layout: new GridLayout({ width: '86px', height: '86px' }, { length: 3, wrap: true })
  };
  constructor(private EmployeeApi: EmployeeApiService, private _global: GlobalService, private cookieService: CookieService) {
    this.candidateid = this.cookieService.get('candidateid');
    this.compid = this.cookieService.get('companyid');
    this.imageUrl = this._global.CompanyImagePath;
}
  resolve(route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
   ): Observable<any[]> {
   this.data = this.EmployeeApi.getimagegallarydata(this.compid, this.candidateid ).pipe(map(
      resultArray => {
    this.Response = resultArray;
    if (this.Response.status === 200) {
        this.gallaryData = this.Response.gallarydata;
        for ( this.i = 0; this.i < this.gallaryData.length; this.i++) {
          // alert(this.i);
          this.Image[this.i] =
            new Image(
              this.i,
              { // modal
                img: this.imageUrl + this.gallaryData[this.i].filename,
                extUrl: 'http://www.google.com'
              }
            );
        }
        console.log(this.Image);
      } else {
      this.responseMessage = 'Gallary not available';
      alert(this.responseMessage);
    }
    }
    )
  );
  return void(0);
}
ngOnInit() {
  this.pageload();
}
 // set page ui according to screen size
 pageload() {
  $.fn.center = function () {
    this.css('position', 'absolute');
    this.css('top', Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
     $(window).scrollTop()) + 'px');
     this.css('left', Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + 'px');
       return this;
   };
   $('#abc0').center();
}
}

我在Angular 6中遇到靜態注射器問題，實際上我在app.module.ts中導入了httpclientmodule，並且廣告在導入數組中

Answer 1

您似乎正在嘗試將組件用作解析器。

解析程序旨在提供服務，因為它們應該在模塊的providers數組中注冊-我懷疑這就是為什么您收到進樣器錯誤的原因。

理想情況下，您應該將您的resolve拆分為一個單獨的類，用@Injectable裝飾它，並在模塊的providers數組中引用它。

您的解析器將如下所示：

@Injectable()
export class TestImageGallaryComponentResolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    // Get your data here and return it. This class can receive dependencies in the constructor.
  }
}

您的路由器配置如下所示：

{
  path: 'gallery'
  component: TestImageGallaryComponent,
  resolve: {
    data: TestImageGallaryComponentResolver
  }
}

您的組件可以按以下方式訪問數據：

@Component({
  selector: 'app-test-image-gallary',
  templateUrl: './test-image-gallary.component.html',
  styleUrls: ['./test-image-gallary.component.css']
})
export class TestImageGallaryComponent implements OnInit {
  constructor(activatedRoute: ActivatedRoute) {
    activatedRoute.data.subscribe(resolvedData => {
      // Do stuff with resolvedData.data
    });
  }
}

對我來說，使用組件作為其自己的解析器並不是一件容易的事，但是我很確定它不會起作用。 如果將組件添加到providers數組中，則它可能會很好地運行，但是數據將不會到達您期望的位置。

注入器將提供用於解析的“組件”作為單例，並在視圖請求時提供組件的完全不同的實例。 組件在被請求時被重新實例化，而providers數組中的所有內容都是單例。

角度指南以合理的深度示例介紹了如何使用旋轉變壓器。

Answer 2

您剛剛聲明了TestImageGallaryComponent但未將其導入到app.module.ts

喜歡：

import { TestImageGallaryComponent } from 'Some-path';