After installing all needed dependencies and importing them in App Module it throws error for File and File path. Like it can't be included inside providers.
import { Camera } from '#ionic-native/camera';
import { MyApp } from './app.component';
import { File } from '#ionic-native/file';
import { Transfer } from '#ionic-native/transfer';
import { FilePath } from '#ionic-native/file-path';
#NgModule({
declarations: [MyApp],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
EmojiPickerModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [MyApp],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
},
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
AuthProvider,
TokenProvider,
MessageProvider,
File,
Transfer,
Camera,
FilePath,
PostProvider,
UsersProvider,
]
})
export class AppModule {}
Why it doesn't allow to implement these 2 ones in the providers section? How can this be fixed? We are using Ionic 3
Related
I have a component and service, I try to inject service (ListUserService) in component.
I import the service, I request it and I get an error, when I delete the service it works well, what is the error?
import { Component, OnInit } from '#angular/core';
import {ListUserService} from './list-user.service';
#Component({
selector: 'app-list-user',
templateUrl: './list-user.component.html',
styleUrls: ['./list-user.component.scss'],
providers: [ListUserService]
})
export class ListUserComponent implements OnInit {
constructor(private listUserService: ListUserService) {
console.log(this.listUserService);
}
}
and this is the service:
import {Injectable} from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class ListUserService {
constructor(public http: HttpClient) {
this.http.get(`http://localhost:8080/user/getUsers/`)
.subscribe(response => {
console.log(response);
});
}
}
this is the error:
ERROR
Error: StaticInjectorError(AppModule)[ListUserService -> HttpClient]:
StaticInjectorError(Platform: core)[ListUserService -> HttpClient]:
NullInjectorError: No provider for HttpClient!
this is the file app.module.ts
import {HttpClient} from '#angular/common/http';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {ListUserComponent} from './list-user/list-user.component';
import {ListUserService} from './list-user/list-user.service';
#NgModule({
declarations: [AppComponent, ListUserComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
HttpClient,
StatusBar,
SplashScreen,
ListUserService,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule {
}
You have failed to add HttpClientModule in imports of app.module.ts
import { ListUserComponent } from './list-user/list-user.component';
import { ListUserService } from './list-user/list-user.service';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [AppComponent, ListUserComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule],
providers: [
StatusBar,
SplashScreen,
ListUserService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Add your Service to the providers: [ListUserService] in your app.module.ts
https://angular.io/guide/ngmodules
EDIT: HttpClient must be added to providers: [ListUserService, HttpClient] aswell as import {HttpClient} from '#angular/common/http';
i've been trying to fix this for some hours now. My ionic app while running keeps bringing this error 'No provider for http client'. i have added a HttpModule and also included it in imports f my app.module.ts but still get this dreaded error.
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HttpModule } from '#angular/http';
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 { SettingsPage } from '../pages/settings/settings';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { WeatherProvider } from '../providers/weather/weather';
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
SettingsPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
SettingsPage
],
providers: [
HttpModule,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
WeatherProvider
]
})
export class AppModule {}
Actually Discovered that i was including 'httpModule'instead of 'httpClient' .
i fixed it by replacing it in my code
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HttpModule } from '#angular/http';
import { HttpClient } from '#angular/common/http';
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 { SettingsPage } from '../pages/settings/settings';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { WeatherProvider } from '../providers/weather/weather';
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
SettingsPage
],
imports: [
BrowserModule,
HttpClient,
HttpModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
SettingsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
WeatherProvider
]
})
export class AppModule {}
I have added QQoutesPage in Ionic, if I add in app.modules.ts at the #NgModule list I am getting the Error saying
QQoutesPage is part of the declarations of 2 modules: AppModule and
QQoutesPageModule!*
if I remove the QQoutesPages from the #NgModules list I am getting --
Error: Component QQoutesPage is not part of any NgModule or the module
has not been imported into your module.
app/modules.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { FavoritesPage } from '../pages/favorites/favorites';
import { LibraryPage } from '../pages/library/library';
import { QuotePage } from '../pages/quote/quote';
import { SettingsPage } from '../pages/settings/settings';
import { tabsPage } from '../pages/tabs/tabs';
import { QQoutesPage } from '../pages/q-qoutes/q-qoutes';
import { QuotesServices } from '../services/quotes';
#NgModule({
declarations: [
MyApp,
FavoritesPage,
LibraryPage,
QuotePage,
SettingsPage,
tabsPage ,QQoutesPage,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
FavoritesPage,
LibraryPage,
QuotePage,
SettingsPage,
tabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
QuotesServices,QQoutesPage
]
})
export class AppModule {}
Error:
I am facing a problem when I run the code via ionic serve
I get an error of
Runtime error: Cannot find module "."
App.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { SigninPage } from '../pages/auth/signin/signin';
import { SignupPage } from '../pages/auth/signup/signup';
import { LandingPage } from '../pages/landing/landing';
import { AuthService } from '../services/auth.service';
#NgModule({
declarations: [
MyApp,
SigninPage,
SignupPage,
LandingPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
providers: [
StatusBar,
SplashScreen,
AuthService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
I haven't mention the entrycomponents
and all the components contains the default code. AuthService is also empty
If I remove the AuthService form Providers in app.module file Code runs succesfully. But if I have to access the authService I must provide it in the Providers
IonicPageModule is missing from your project.
In your app.module.ts include
import { IonicPageModule } from 'ionic-angular';
And your import should looks like this:
imports: [
BrowserModule,
IonicPageModule.forChild(HomePage)
IonicModule.forRoot(MyApp)
],
after that run npm run-script build
NOTE: IonicPageModule is an NgModule that bootstraps a child IonicPage in order to set up routing.
I have an Ionic 2 application where I make use of Storage.
When I start the app, it crashes with the error message: Can't resolve all parameters for Storage: (?, ?).
I can't seem to find the error, who can help me?
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Storage } from '#ionic/storage';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { EthylenePage } from '../pages/ethylene/ethylene';
import { PropylenePage } from '../pages/propylene/propylene';
import { TemporaryResultPage } from '../pages/temporary-result/temporary-result';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
EthylenePage,
PropylenePage,
TemporaryResultPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
PropylenePage,
EthylenePage,
TemporaryResultPage,
HomePage,
TabsPage
],
providers: [
{provide: ErrorHandler, useClass: IonicErrorHandler},
StatusBar,
SplashScreen,
Storage
]
})
export class AppModule {}
In my package.json I have added this to my dependencies section:
"#ionic/storage": "1.1.7"
Please check this http://ionicframework.com/docs/storage/
The documentation state
import { IonicStorageModule } from '#ionic/storage';
and
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
You don't need to add Storage on providers part