No provider for UrlHelperService

Question

I am just running through an example of how to build an ionic app. When I serve the app however I get this error,

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)

my 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 {}

my 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();
    });
  }
}

I am using Ionic Framework: 3.7.0 Ionic App Scripts: 3.0.0 Angular Core: 4.4.3 Angular Compiler CLI: 4.4.3 Node: 6.11.0 OS Platform: Windows 10 Navigator Platform: Win32

Answer 1

As per sample application, I found this. Please add:

import { OAuthModule } from 'angular-oauth2-oidc';

Add OAuthModule.forRoot() to imports inside app.module.ts file.

Answer 2

To Fix this,

In app.module.ts add UrlHelperService to be imported from angular-oauth2-oidc

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

In Provider array in the same file (app.module.ts), add UrlHelperService

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

Answer 3

This error shows up when you are using some service (In your case UrlHelperService) in your application but you haven't added it to providers.

Make sure when you create and use any services in your application you MUST import them in providers in @NgModule

import { SomeService } from "../services/some-service.service";

@NgModule({
        declarations: [ // Components ],
        imports: [ // Modules ],
        bootstrap: [IonicApp],
        entryComponents: [// Entry Components],
        providers: [ SomeService ] // <==== HERE
})
export class AppModule {}