No provider for UrlHelperService

user_5483748 0
Viewed 4817

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

ionic3 angular cordova
3 Answers

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.

user_21226010

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 {}
user_57657950
Related