No provider for Auth!

KarolinaB · May 17, 2017, 6:49am

Hi, I am forcing with some problem I tried to follow the tutorial from page but is for Ionic 2 > https://www.raymondcamden.com/2016/11/04/an-example-of-the-ionic-auth-service-with-ionic-2
I got this problem. I fixed Statusbar and splashscreen problem but I don’t know how to fix Auth.
I am beginner so maybe i can’t see correctly

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 { Auth } from '@ionic/cloud-angular';

import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage;

  constructor(platform: Platform, public splashScreen: SplashScreen, public statusBar: StatusBar, public auth:Auth) {
    platform.ready().then(() => {

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

      if(this.auth.isAuthenticated()) {
        this.rootPage = HomePage;
      } else {
        this.rootPage = LoginPage;
      }

    });
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ChatPage } from '../pages/chat/chat';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';

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

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

login.ts - https://pastebin.com/nQvBiAG1 ( rest of the code)

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController } from 'ionic-angular';
import { UserDetails, IDetailedError } from '@ionic/cloud-angular';
import { Auth } from '@ionic/cloud-angular'
import { User } from '@ionic/cloud-angular';
import { HomePage } from '../home/home';


@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})

home.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Auth } from '@ionic/cloud-angular';
import { User } from '@ionic/cloud-angular';
import { LoginPage } from '../login/login';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public user: User, public auth: Auth) {
    console.log(user);
  }

  logout() {
      this.auth.logout();
      this.navCtrl.setRoot(LoginPage);
    }
}

Error

Runtime Error
No provider for Auth!
Stack
Error
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at injectionError (http://localhost:8100/build/main.js:1728:86)
    at noProviderError (http://localhost:8100/build/main.js:1766:12)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3267:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3306:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3238:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/main.js:3107:21)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:4054:52)
    at resolveDep (http://localhost:8100/build/main.js:11427:45)
    at createClass (http://localhost:8100/build/main.js:11296:32)
    at createDirectiveInstance (http://localhost:8100/build/main.js:11124:37)
    at createViewNodes (http://localhost:8100/build/main.js:12474:49)
    at createRootView (http://localhost:8100/build/main.js:12379:5)
    at callWithDebugContext (http://localhost:8100/build/main.js:13510:42)
    at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:12971:12)
Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.2.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36

Sujan12 · May 17, 2017, 8:42am

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

KarolinaB · May 17, 2017, 9:33am

Ok I changed like you wanted

aditya_1027 · May 17, 2017, 9:43am

Import Auth in app.module.ts file

import { Auth } from '@ionic/cloud-angular';

Then add Auth in providers, like this:

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

Now try to run the application (with the changed code) again.

KarolinaB · May 17, 2017, 10:14am

Where is the problem?

Runtime Error
Can't resolve all parameters for Auth: (?).
Stack
Error: Can't resolve all parameters for Auth: (?).
    at d (http://localhost:8101/build/polyfills.js:3:3991)
    at syntaxError (http://localhost:8101/build/main.js:107674:34)
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8101/build/main.js:120524:35)
    at CompileMetadataResolver._getTypeMetadata (http://localhost:8101/build/main.js:120392:26)
    at CompileMetadataResolver._getInjectableMetadata (http://localhost:8101/build/main.js:120378:21)
    at CompileMetadataResolver.getProviderMetadata (http://localhost:8101/build/main.js:120667:40)
    at http://localhost:8101/build/main.js:120597:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:8101/build/main.js:120558:19)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8101/build/main.js:120213:50)
    at JitCompiler._loadModules (http://localhost:8101/build/main.js:131305:64)
    at JitCompiler._compileModuleAndComponents (http://localhost:8101/build/main.js:131264:52)
    at JitCompiler.compileModuleAsync (http://localhost:8101/build/main.js:131226:21)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:8101/build/main.js:5283:25)
    at PlatformRef_.bootstrapModule (http://localhost:8101/build/main.js:5269:21)
Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.2.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Auth } from '@ionic/cloud-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ChatPage } from '../pages/chat/chat';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    ChatPage,
    LoginPage,
    RegisterPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    ChatPage,
    LoginPage,
    RegisterPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Auth,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

aditya_1027 · May 18, 2017, 7:47am

is your issue solved?

KarolinaB · May 18, 2017, 8:20am

no
I was checking all app because maybe i did mistake somewhere but nothing

antonior16 · May 21, 2017, 6:33pm

Did you solve?
Same issue for me

hmtylmz · May 21, 2017, 8:55pm

Problem is circular dependency injection. Be sure you didn’t use circular di. I couldn’t help, beacuse i didn’t know all your code.

KarolinaB · May 22, 2017, 5:54am

which part of the code do you want?

KarolinaB · May 22, 2017, 6:56am

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Auth } from '@ionic/cloud-angular';
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ChatPage } from '../pages/chat/chat';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'my id :P'
  }
};

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    ChatPage,
    LoginPage,
    RegisterPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    ChatPage,
    LoginPage,
    RegisterPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Auth,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

I did some changes and add this like in https://docs.ionic.io/setup.html and nothing change

larssn · June 2, 2017, 2:04pm

You need to study up on dependency injection in Angular 2, and how it works. It a very important concept, that runs deep in angular 2.

Your problem is either:
Having forgot to decorate the Auth class with @Injectable()
OR
Having a dependency in the Auth constructor that you haven’t provided in app.module.ts (like you did with Auth in the first place)
OR
A circular dependency. Example: The injector cant inject Auth in Settings, if Settings gets injected in Auth. The injector cant solve circularities like that.