I tried many hours to get a vertical slider (like ion-range) to work. Seems like the best option is to go with the material slider.
I had a lot of issues getting it to work on mobile devices and at least the imports are not trivial so I'd like to share what worked for me.
First install hammer JS
npm install hammerjs
npm install #types/hammerjs
Then you need to import hammerjs separately
//in app.module.ts
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '#angular/platform-browser';
import { GestureConfig } from '#angular/material';
import { HammerModule } from '#angular/platform-browser';
import 'hammerjs';
Then add it to the imports and also the the providers
//in app.module.ts
imports: [BrowserModule, IonicModule.forRoot(), NgxSliderModule, AppRoutingModule, HammerModule
],
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }
],
Then on your page module, import the slider
//in myComponent.module.ts
import { MatSliderModule } from '#angular/material/slider';
...
imports: [
MatSliderModule,
],
Now you are ready to use it :)
Related
I want to use InAppBrowser to open all target blank links. I follow the documentation and I always get an error when I declare the plugin on constructor:
Can't resolve all parameters for MyApp: (?, ?, ?).
This error appears to me when I put private iab: InAppBrowser on constructor.
My code:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native/in-app-browser';
import { Platform } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public plt: Platform, private iab: InAppBrowser) {
this.plt.ready().then((readySource) => {
console.log("Ready!");
window.open = this.iab.open;
});
}
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 { HomePage } from '../pages/home/home';
import { InAppBrowser } from '#ionic-native/in-app-browser';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Someone knows whats it can be?
Thanks!
Your code looks good, so the problem seems to be because of the #ionic-native/core version that your project uses.
As you can see in the docs the Ionic team has updated the Ionic Native commands in order to avoid this error:
Installation
To add Ionic Native to your app, run following command to install the core package:
npm install #ionic-native/core#4 --save
And...
Usage
Install the Needed Plugins
Install the Ionic Native package for each plugin you want to add.
For example, if you want to install the Camera plugin, you will need to run the following command:
npm install #ionic-native/camera#4 --save
Then install the plugin using Cordova or Ionic CLI. For example:
ionic cordova plugin add cordova-plugin-camera
Notice the #4 in both commands. That allows you to install the right version of the Ionic Native dependencies even if you're using the new CLI.
TLDR; So if you installed the plugin using the #4 you can import it like this: import { InAppBrowser } from '#ionic-native/in-app-browser';
If not, you may be using a newer version of Ionic Native so you need to import it like this: import { InAppBrowser } from '#ionic-native/in-app-browser/ngx'
I have created new Ionic 3 application using the latest version of Ionic CLI v4.9.0 using below
$ ionic start Ionic3Project blank --type ionic-angular
which create V4 Ionic project by default.
Then I followed steps for Native App Version Plugin here
Faced following console error when imported in app.module.ts file
Uncaught Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [StatusBar, ?[object Object]?, ...]
at syntaxError (compiler.js:486)
at compiler.js:15784
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (compiler.js:15752)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15320)
at JitCompiler._loadModules (compiler.js:34413)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)
at JitCompiler.compileModuleAsync (compiler.js:34268)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.bootstrapModule (core.js:5578)
app.module.ts file
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 { AppVersion } from '#ionic-native/app-version';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
AppVersion, <-- Error [[ts]
Type 'AppVersionOriginal' is not assignable to type 'Provider'.
Type 'AppVersionOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory [2322]]
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
UPDATE:Finally I found solution and explanation of this issue here :P
This issue is because of ionic new update(releasing ionic 4)
You have to import your plugins for ionic 3 like this:
import { PluginName} from '#ionic-native/pluginName/ngx';
More info here
This error is thrown because of the new update of ionic 4.
The above given solution would work perfectly.
But, this must be done throughout the project to avoid this error.
The other way could be to roll back to plugin's previous version.
I have 2 pages to use a custom pipe. I have created a folder in src/app named pipes. And created a file pipes.module.ts
import { NgModule } from '#angular/core';
import { TranslatePipe } from './translate.pipe';
#NgModule({
declarations: [
TranslatePipe
],
imports: [],
exports: [
TranslatePipe
]
})
export class PipesModule {}
and im importing it from my first component module file
devices.module.ts
import { PipesModule } from '../pipes/pipes.module';
#NgModule({
imports: [
...
PipesModule
],
declarations: [DevicesPage, ]
})
export class DevicesPageModule {}
this component works well when i use pipe.
but i have another component too.
home.module.ts
import { PipesModule } from '../pipes/pipes.module'
#NgModule({
imports: [
PipesModule,
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
ComponentsModule,
MatPaginatorModule,
],
declarations: [HomePage]
})
export class HomePageModule {}
im calling home page from devices page with a button. But i get error when i click the button.
pipes.module.ts;
import { NgModule } from '#angular/core';
//import custom pipes here
#NgModule({
declarations: [
TranslatePipe
],
imports: [],
exports: [
TranslatePipe
]
})
export class PipesModule {}
I faced with same issue in ionic-V4 app. I solved my issue like this. see this code you will know. I removed pipe from app.module.ts file.
Create a new pipe using the below command:
ionic g pipe translatePipe
Then import this pipe to home.module.ts file.
import { FirstCapsPipe } from '../first-caps.pipe';
Then include it in the declarations of the home.module.ts file.
declarations: [HomePage, FirstCapsPipe]
home.html
<h2>{{data|translatePipe}}</h2>
hope it help you :)
1) Firstly, create pipes folder in src/app folder (in app folder).
2) Second, on cmd "ionic generate pipe pipes/searchfilter" => this will generate two files in pipes.
3 Third, create file in pipes folder with name "pipes.module.ts"
and write below code to => "pipes.module.ts"
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SearchfilterPipe } from './searchfilter.pipe'; //our pipe which we generate
#NgModule({
imports: [
CommonModule
],
declarations: [SearchfilterPipe],
exports: [SearchfilterPipe]
})
export class PipesModule { }
Now we have PipesModule we can generate more pipes and write them in pipesmodule. We will import only PipesModule instead of all pipes.
4) You do not have to import PipesModule in app.module.ts
5) Now go to page which you want to use pipe and open for example "anasayfa.module.ts"
and import "PipesModule" and write it in #ngModel imports(it will be created automatically)
Please be careful you will import PipesModule to something.MODULE.TS not something.page.ts
Ionic 4 Solution:
This is how I got custom pipe working in Ionic 4:
Created custom pipe in pipes folder in the app directory using:
ionic g pipe plural-singular
NOTE: You can create the pipe wherever you please in your project directory, although I recommend placing it in pipes directory for the sake of organization.
In the module of the page where I wanted to use this pipe, I imported the pipe and specified it under providers and declarations, like so:
all.module.ts
import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
providers: [
PluralSingularPipe //---> Here
],
declarations: [PluralSingularPipe] //---> And here
})
Imported the pipe in the TS file of the page where I wanted to use the pipe, like so:
all.page.ts
import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';
Declared the pipe in the constructor of the same page, like so:
all.page.ts
constructor(public pluralSingular: PluralSingularPipe) {}
Used it in my HTML file, like so:
all.page.html
{{ numberOfRecords | pluralSingular: 'coupon' : 'coupons' }}
That's it!
FOR THE CURIOUS: If it helps, here are my versions from package.json file:
"#ionic/angular": "^4.7.1",
"#angular/core": "~8.1.2",
I realized I forgot to import PipesModule for child components in homepage. Problem solved after i imported
save a lot of reading and experiments by just importing the pipe on every module that you need to use it in.
For example if you have a page called home and you want to use the pipe here, go to home.module.ts and import it there, add the pipe in declarations and in exports and you are done!
Now if you have multiple pipes create a module, you can even call it allmypipes.module.ts.
import all the relevant pipes into this module and add them to declarations and exports, then import this module to every page (page.module.ts) you want to use any of the pipes and you are done!
I am new to ionic, it seems like a silly question but I need some help
Using some simple button is throwing error. I am using ionic 4.0.
'ion-button' is not a known element:
1. If 'ion-button' is an Angular component, then verify that it is part of this module.
2. If 'ion-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
<ion-button color="primary">Primary</ion-button>
I think the solution is importing Ionic module in the respective module imports
import { IonicModule } from '#ionic/angular'; <--add this line
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule, <-- add this line
],
})
Try this,
<button ion-button color="primary">Primary</button>
In order to avoid that error message:
Import CUSTOM_ELEMENTS_SCHEMA into app.modules.ts:
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
Add schema: [CUSTOM_ELEMENTS_SCHEMA] to app.modules.ts as below:
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpClientModule,
MomentModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
I've run into this too. Your solution is not the best one as the new Ionic 4 way is to use <ion-button> (https://beta.ionicframework.com/docs/components/#button).
It does work for me fine in a page I have under /src/app/my-page/my-page.html, but when I put it in /src/shared/components/my-comp/my-comp.html it gives the error. The odd thing is that I have other Ionic elements in the same page <ion-grid>, <ion-row> and <ion-col>. Also, this code used to be in my-page.html where it worked without error.
FYI, MyComponent is in components.module.ts as a declaration and an export. Not sure yet what I am missing...
UPDATE 1: Neither moving the components directory under src nor under src/app made any difference.
UPDATE 2: This is my environment:
ionic (Ionic CLI) : 4.0.6
Ionic Framework : #ionic/angular 4.0.0-beta.2
#angular-devkit/core : 0.7.2
#angular-devkit/schematics : 0.7.2
#angular/cli : 6.1.2
#ionic/ng-toolkit : 1.0.0
#ionic/schematics-angular : 1.0.1
UPDATE 3: Still broken in this environment:
ionic (Ionic CLI) : 4.1.0
Ionic Framework : #ionic/angular 4.0.0-beta.3
#angular-devkit/core : 0.7.2
#angular-devkit/schematics : 0.7.2
#angular/cli : 6.1.2
#ionic/ng-toolkit : 1.0.6
#ionic/schematics-angular : 1.0.5
UPDATE 4: After much trial and error, I had to add schemas: [CUSTOM_ELEMENTS_SCHEMA] to my components.module.ts file. I was able to leave the directory structure as-is. I'm not sure why this is required for this scenario, though.
It seems you are not importing the ionicModule in the component module. So, Import the IonicModulein the module.ts, rest of the things will work fine
Import your custom component in the parent module. for example in your app.module.ts:
declarations: [MyComponent],
exports: [
PopoverComponent,
]
yes try this
<button ion-button color="primary">Primary</button>
In Ionic 5, I have a same problem when I build with --prod option.
Since *.module.ts file is not available in components in Ionic 5, I need to add shared module for components and then add CUSTOM_ELEMENTS_SCHEMA schema to that shared module.
ionic g module modules/shared
cat shared.module
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FooComponent } from '../../components/foo/foocomponent.component'; <== Add your components
#NgModule({
declarations: [FooComponent], <== Add your components
imports: [
CommonModule
],
exports: [FooComponent], <== Add your components
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SharedModule { }
I was having this problem in a library that I was building
because I forgot to export the module of that was importing the IonicModule and exporting my component.
So, in my module was importing Ionic lib and exporting my component as below.
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { IonicModule } from '#ionic/angular';
import { MyComponent } from './my.component';
#NgModule({
declarations: [
MyComponent,
],
imports: [
CommonModule,
IonicModule,
],
exports: [
MyComponent,
],
})
export class MyModule {
}
And in the public-api.ts file of my lib, I should have something like this
export { MyModule } from './lib/my.module'; // <--- exporting my module
export { MyComponent } from './lib/my.component';
My issue was that there were errors prior to this error that seemed to cascade down. The error I had was some elements in the declarations that should have been in the providers. Also, one of these was marked private in the constructor when it should have been public.
#NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: DevicesPage }]),
DevicesPageRoutingModule,
TranslateModule.forChild()
],
declarations: [DevicesPage --> remove BLE, LocationAccuracy, DeviceManagerService ],
providers: [BLE, LocationAccuracy, DeviceManagerService] <--Add
})
I was stuck on this for a little while as well until I realized that the problem was I did not create the Ionic Angular project properly. you have to include --type=angular
https://github.com/ionic-team/ionic-cli
exp:
ionic start myApp tabs --type=angular
I faced similar issue after ionic 4, So I added the CUSTOM_ELEMENTS_SCHEMA in app.modules.ts. Then it worked fine
app.module.ts
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
SpineRestServiceProvider,
FingerprintAIO
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Should add in app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
schemas: [CUSTOM_ELEMENTS_SCHEMA] ==> add line**
Hello everyone when i'm compile my app in prod release i got an error
Can't bind to 'ngModel' since it isn't a known property of 'ion-select'.
My code
<ion-select #sel1 [(ngModel)]="Selectedcat" (ngModelChange)="onChange()" >
i make this configuration in appmodule :
imports: [
BrowserModule,
HttpModule,
Ionic2RatingModule ,
FormsModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
IonicImageLoader.forRoot()
]
thanks for yours help
I solved my problem
the problem was because I use in a component so you need to add in components.modules.ts
imports: [IonicModule],
that's all
You need to add this to components modules
import { IonicModule } from '#ionic/angular';
import { FormsModule } from '#angular/forms';
#NgModule({
imports: [
IonicModule,
FormsModule
];
})
import { FormsModule } from '#angular/forms';
Simply, import the above (FormsModule) module in your modules page it will work!