angular - 没有 UrlHelperService 的提供者

Question

我只是在运行一个如何构建 ionic 应用程序的示例。但是，当我为应用程序提供服务时，出现此错误，

Error: No provider for UrlHelperService!
at injectionError (http://localhost:8100/build/vendor.js:1527:90)
at noProviderError (http://localhost:8100/build/vendor.js:1565:12)
at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/vendor.js:3007:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/vendor.js:3046:25)
at ReflectiveInjector_._getByKey (http://localhost:8100/build/vendor.js:2978:25)
at ReflectiveInjector_.get (http://localhost:8100/build/vendor.js:2847:21)
at resolveNgModuleDep (http://localhost:8100/build/vendor.js:9847:25)
at _createClass (http://localhost:8100/build/vendor.js:9898:32)
at _createProviderInstance$1 (http://localhost:8100/build/vendor.js:9858:26)
at resolveNgModuleDep (http://localhost:8100/build/vendor.js:9843:17)

我的 app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import {HttpModule} from '@angular/http';

import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {LoginPage} from "../pages/login/login";
import {OAuthService} from "angular-oauth2-oidc";


@NgModule({
  declarations: [
    MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage  ],
      providers: [
    OAuthService,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

我的 app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { OAuthService } from 'angular-oauth2-oidc';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
SplashScreen, oauthService: OAuthService) {
    if (oauthService.hasValidIdToken()) {
      this.rootPage = TabsPage;
    } else {
      this.rootPage = LoginPage;
    }
    platform.ready().then(() => {

  statusBar.styleDefault();
  splashScreen.hide();
    });
  }
}

我正在使用 ionic 框架:3.7.0 ionic 应用程序脚本:3.0.0 Angular 核心:4.4.3 Angular 编译器 CLI:4.4.3 节点:6.11.0 操作系统平台:Windows 10 导航器平台:Win32

Answer 1

要解决这个问题，

在 app.module.ts 中添加要从 angular-oauth2-oidc 导入的 UrlHelperService

import {OAuthService, UrlHelperService} from "angular-oauth2-oidc";

在同一个文件(app.module.ts)的Provider数组中，添加UrlHelperService

providers: [
    OAuthService,
    StatusBar,
    SplashScreen,
    UrlHelperService,
    OAuthService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]