When I am trying to add ionic deploy service on an application I get the Following Error:
if you add Deploy to providers
please remove it and app will run again
You shouldn't add Deploy as a provider. The right way for using Deploy with Ionic is defined on this webpage: https://docs.ionic.io/setup.html#installation
// app.module.ts
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'APP_ID'
}
};
#NgModule({
declarations: [ ... ],
imports: [
IonicModule.forRoot(MyApp),
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [ ... ],
providers: [ ... ]
})
export class AppModule {}
Related
I'm doing an App using Ionic 5 and Capacitor.
package.json
"dependencies": {
"#angular/common": "~9.1.6",
"#angular/core": "~9.1.6",
"#angular/fire": "^6.0.2",
"#angular/forms": "~9.1.6",
"#angular/platform-browser": "~9.1.6",
"#angular/platform-browser-dynamic": "~9.1.6",
"#angular/router": "~9.1.6",
"#capacitor/android": "^2.4.0",
"#capacitor/core": "^2.4.0",
"#capacitor/ios": "^2.4.0",
"#ionic-native/core": "^5.27.0",
"#ionic-native/email-composer": "^5.28.0",
"#ionic/angular": "^5.2.3",
"cordova-plugin-email-composer": "^0.9.2",
"rxjs": "~6.5.1",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
}
I have installed the plugin Email Composer to open the email client of the user to send an email.
Installation with Capacitor:
npm install cordova-plugin-email-composer
npm install #ionic-native/email-composer
ionic cap sync
I have created a service to implement the logic of sending emails:
import {Injectable} from '#angular/core';
import {EmailComposer, EmailComposerOptions} from "#ionic-native/email-composer/ngx";
#Injectable()
export class EmailService {
constructor(
private emailComposer: EmailComposer
) {
}
private get isEmailClientConfigured(): Promise<boolean> {
return this.emailComposer.isAvailable();
}
/**
* Tries to open an email client and populate the fields.
*/
intentToSend(to: string) {
if (this.isEmailClientConfigured) {
const email: EmailComposerOptions = {
to: to,
isHtml: false
};
this.emailComposer.open(email);
} else {
console.log('Could not find an email configured.');
}
}
}
Error in console:
ERROR Error: Uncaught (in promise): NullInjectorError:
R3InjectorError(ContentModule)[EmailService -> EmailComposer ->
EmailComposer -> EmailComposer -> EmailComposer]:
NullInjectorError: No provider for EmailComposer! NullInjectorError:
R3InjectorError(ContentModule)[EmailService -> EmailComposer ->
EmailComposer -> EmailComposer -> EmailComposer]:
NullInjectorError: No provider for EmailComposer!
After seeing this, I have added it on my ngModule:
import {NgModule} from '#angular/core';
import {EmailComposer} from "#ionic-native/email-composer";
#NgModule({
declarations: [
],
imports: [
],
providers: [
EmailComposer
]
})
export class SharedModule {
}
Now I receive this error in console:
core.js:6228 ERROR Error: Uncaught (in promise): Error: Invalid
provider for the NgModule 'SharedModule' - only instances of Provider
and Type are allowed, got: [..., ..., ..., ..., ..., ?[object
Object]?] Error: Invalid provider for the NgModule 'SharedModule' -
only instances of Provider and Type are allowed, got: [..., ..., ...,
..., ..., ?[object Object]?]
Any idea how can I fix this?
My goal is to install and implement the plugin EmailComposer correctly on my project.
Add EmailComposer in AppModule's provider
import {EmailComposer} from "#ionic-native/email-composer/ngx";
#NgModule({
declarations: [AppComponent ],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
],
providers: [
...
EmailComposer
],
bootstrap: [AppComponent]
})
export class AppModule {}
To add onto the answer of Praveen Patel above, try changing the import code from
import {EmailComposer} from "#ionic-native/email-composer";
to this: (note the '/ngx')
import {EmailComposer} from "#ionic-native/email-composer/ngx";
Add useClass with provide
import {EmailComposer} from "#ionic-native/email-composer";
import { IonicNativePlugin } from '#ionic-native/core';
...
...
...
providers: [
...
{ provide: EmailComposer, useClass: IonicNativePlugin}
]
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
Our application uses HttpInterceptor to convert JSON properties from camel-case to snake-case.
I configure pact in karma.conf.js and set pact proxy there.
For my test I use TestBed:
TestBed.configureTestingModule({
imports: [
HttpClientModule
],
providers: [
EmployeeService,
{ provide: SERVER_URLS, useValue: TokenPactMock.SERVER_URLS() },
{ provide: HTTP_RETRY_ATTEMPTS, useValue: TokenMock.HTTP_RETRY_ATTEMPTS() }
],
});
and this is my test:
const employeeService: EmployeeService = TestBed.get(EmployeeServiceService);
employeeService.addEmployee(employee).subscribe(response => {
expect(response.status).toEqual(201);
expect(response.body).toEqual(employee);
done();
}, error => {
done.fail(error);
});
This test runs successfully and pact file is generated. But HttpInterceptor was not trigger and in PACT file I have camel-case properties instead of snake-case.
Does anybody know how to use PACT with HttpInterceptor?
We have found the answer. It was our misunderstanding of difference between HttpClientModule and HttpClientTestingModule.
In HttpClientModule we must explicitly define our listeners:
TestBed.configureTestingModule({
imports: [
HttpClientModule
],
providers: [
EmployeeService,
{ provide: SERVER_URLS, useValue: TokenPactMock.SERVER_URLS() },
{ provide: HTTP_INTERCEPTORS, useClass: HttpNamingInterceptor, multi: true },
{ provide: HTTP_RETRY_ATTEMPTS, useValue: TokenMock.HTTP_RETRY_ATTEMPTS() }
],
});
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
I have added the Page(HomePage) that has a component in it in entryComponents but still getting a error as "Error: Uncaught (in promise): Error: Component HomePage is not part of any NgModule or the module has not been imported into your module."
Code Block--
login.module.ts----
#NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
],
exports: [
LoginPage
],
entryComponents:[HomePage]// Added here
})
export class LoginModule {}
-----
login.ts----------------
#IonicPage()
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
createUserId(){
this.myProvider.createUserId(this.value,data=>{
if(data=="success")
{
this.check_response="UserID created"
this.navCtrl.push(HomePage)//-----Getting an error here
}
else
this.check_response="Failure"
})
//console.log("submit")
}
}
homepage.module.ts-----------
#NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage),
AddExpenseModule
],
exports: [
HomePage
]
})
export class HomePageModule {}
You need to also include HomePage in the declarations array of ngModule. All app components, directives, etc need to do in the declarations array. A good detailed explanation is available here: https://www.joshmorony.com/an-introduction-to-ngmodule-for-ionic-2/