I am attempting to use the ion-bottom-drawer component in my app but i keep running into errors. The component does not seem to be recognized
Steps to reproduce :
create ionic4 project
npm i ion-bottom-drawer --save
npm i hammerjs#2.0.8 --save
npm i #types/hammerjs#2.0.36 --save
import IonBottomDrawerModule in app.module.ts
add component to homepage
<ion-bottom-drawer
[(state)]="drawerState"
[minimumHeight]="minimumHeight"
[dockedHeight]="dockedHeight"
[shouldBounce]="shouldBounce"
[distanceTop]="distanceTop"
>
<div class="drawer-content">
Bottom Drawer Content
</div>
</ion-bottom-drawer>
The component is not recognized despite following all steps in the documentation
You should use the appropriate values.
Please use as below.
<ion-bottom-drawer [minimumHeight]=50 [dockedHeight]=350
[shouldBounce]=true [distanceTop]=50>
<div class="drawer-content">
Bottom Drawer Content
</div>
</ion-bottom-drawer>
Here is an example
https://stackblitz.com/edit/ionic-bottom-drawer?file=pages%2Fhome%2Fhome.ts
Look in your homepage.module.ts and import it in there as well:
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
IonBottomDrawerModule
],
declarations: [HomePage]
})
export class HomePageModule {}
I'm still learning myself, but I think this is because of the lazy loading feature. Every page gets its own module.
I finally figured it out. I had to create a component module and import IonBottomDrawerModule there then include CUSTOM_ELEMENTS_SCHEMA as a schema in the module and just use the component the way the documentation states.
Related
There are a lot of tutorials and articles of how to include Font Awesome in an Ionic 3 project but I struggled finding any on how to add Font Awesome into an Ionic 4 project. So this poses the question, how do you add and use Font Awesome in an Ionic 4 project?
I have tried using the following tutorial without much success. I tried following the steps outlined in the following StackOverflow answer which did not work either.
To get Font Awesome working in an Ionic 4 project you can follow the steps below.
Firstly, you need to install all the npm packages, the first two are required but you can decide whether you need the solid, regular or brands icons, I will be using all of them. Go ahead and execute the following npm commands in your terminal:
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/angular-fontawesome
npm i --save #fortawesome/free-solid-svg-icons
npm i --save #fortawesome/free-regular-svg-icons
npm i --save #fortawesome/free-brands-svg-icons
Once you have done that, navigate to your app.module.ts in your project and add the following:
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { library } from '#fortawesome/fontawesome-svg-core';
Depending on which font packages you installed, add the following:
import { fas } from '#fortawesome/free-solid-svg-icons';
import { far } from '#fortawesome/free-regular-svg-icons';
import { fab } from '#fortawesome/free-brands-svg-icons';
Once they have been imported at the top of your file you will need to include the FontAwesomeModule in your imports:
.....
imports: [...., FontAwesomeModule],
.....
Once again, depending on what icons you chose you will need to add them to the Font Awesome library that was imported earlier. Add this underneath your last import (above #NgModule()):
library.add(fas, far, fab);
Then navigate to the module of the page that you would like to use the fonts in i.e. home.module.ts and then import and add the FontAwesomeModule:
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome'
....
#NgModule({
imports: [
...
FontAwesomeModule
...
],
})
Then finally you can use the icon in that page's HTML by inserting the following where you'd like the icon:
<fa-icon [icon]="['fas', 'graduation-cap']" slot="end"></fa-icon>
You can replace, fas with the correct library i.e. far, fas & fab and then the name of the icon, which in this case was graduation-cap.
Run the following command:
npm install --save-dev #fortawesome/fontawesome-free
Then, in angular.json append this on "styles":
{
"input": "node_modules/#fortawesome/fontawesome-free/css/all.css"
}
Just in case if someone deals with FontAwesome PRO. I've recently bought FontAwesome pro icons and integreted them like this:
copy the FontAwesome webfonts folder in src/assets/
copy the FontAwesome scss folder in src/theme/
change the $fa-font-path in _variables.scss with assets/webfonts !default;
add in global.scss
#import './theme/[YourDirectoryfontawesomeScss]/fontawesome.scss';
#import './theme/[YourDirectoryfontawesomeScss]/solid.scss';
#import './theme/[YourDirectoryfontawesomeScss]/brands.scss';
#import './theme/[YourDirectoryfontawesomeScss]/light.scss';
#import './theme/[YourDirectoryfontawesomeScss]/regular.scss';
Finally you can use them with the i tag. For example
<i class="fas fa-stack-overflow"></i>
you can find more details about the fa- classes here
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
I was racking my brain trying to get this working with Ionic 5/Angular 10 and couldn't get it working. I figured it in the end, should anyone else require it.
For Ionic 5/Angular 10
Run ng add #fortawesome/angular-fontawesome#latest in your project folder and select the icons you require.
In app.module.ts add the following:
import { FaIconLibrary, FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { fas } from '#fortawesome/free-solid-svg-icons'; //Solid icons
import { far } from '#fortawesome/free-regular-svg-icons'; // Regular icons
import { fab } from '#fortawesome/free-brands-svg-icons'; // Brand icons
And import FontAwesomeModule to the imports declarables so it looks like this:
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent],
})
And then export a library constructor as so...
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far, fab);
}
}
Go to the module you wish to use Font Awesome (e.g. mypage.module.ts) and import the FontAwesomeModule.
Finally in your HTML, e.g. mypage.page.html simply use <fa-icon icon="home"></fa-icon> to display an icon.
If you run in to any issues, make sure you stop Ionic first and run ionic serve again as this should recompile the framework.
Also take a look at https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/features.md for a full list of the features available in its usage.
The easiest way for the Angular user is to write ng add #fortawesome/angular-fontawesome#latest
I need to run the code “this.backgroundMode.enable()” in my project, but it shows me the following error:
"Object(...) is not a function"
It imports it in app.module.ts in the following way:
import {BackgroundMode} from '# ionic-native / background-mode / ngx';
...
providers: [
...
BackgroundMode
...]
And in the page (in my case is in app.component.ts, after deviceready, like the official documentation says) i use like:
import {BackgroundMode} from '# ionic-native / background-mode / ngx';
constructor(private backgroundMode: BackgroundMode) { }
...
this.backgroundMode.enable();
Please I need to run this plugin in my project
I have answered a similar question here https://stackoverflow.com/a/54398403/6617276
Check your project type in ionic.config.json file.
If the type is "ionic-angular", then install 4.x.x version.
npm i -s #ionic-native/background-mode#4.20.0
If the type is "angular", then install 5.x.x-beta version
npm i -s #ionic-native/background-mode#5.0.0-beta.24
Note:
Add ngx at the end of import only if you are using Angular 6
import { BackgroundMode } from '#ionic-native/background-mode/ngx';
if not remove ngx from the import both in app.module.ts and app.component.ts
import { BackgroundMode } from '#ionic-native/background-mode';
I'm facing following issue: If I try to build my Ionic 3 app for ios with the --prod flag, I get following error:
typescript error
Cannot determine the module for class OverlayPortal in
C:/.../node_modules/ionic-angular/umd/components/app/overlay-portal.d.ts!
Add OverlayPortal to the NgModule to fix it. Cannot determine the module for class IonicApp in
C:/.../node_modules/ionic-angular/umd/components/app/app-root.d.ts!
Add IonicApp to the NgModule to fix it. Cannot determine the module for class ClickBlock in
C:/.../node_modules/ionic-angular/umd/components/app/click-block.d.ts!
Add ClickBlock to the NgModule to fix it.
Build command used:
ionic cordova build ios --prod
The error does not appear if I build without the --prod flag or if I use ionic serve. I'm not using any of the classes mentioned in the error message in my code.
I resolved the issue by searching through my code and removing any reference to Ionics Page class, which is suggested here.
Example: Turn let page : Page; into let page;
Also make sure to remove any imports of the Page class, which might look like this:
import { Page } from 'ionic-angular/umd/navigation/nav-util';
Steps to reproduce:
$ ionic --version
3.19.1
$ cordova --version
8.0.0
Follow the ionic docs to the letter:
ionic start showbug blank
cd showbug
ionic generate component gaga
Then add GagaComponent to the declarations of app.modules.ts:
...
import { GagaComponent } from '../components/gaga/gaga';
#NgModule({
declarations: [
MyApp,
HomePage,
GagaComponent
],
...
Now the issue can be observed, but only if building a release for Android:
ionic serve works
ionic cordova build android works as expected
ionic cordova build android --release --prod yields
typescript error
Type GagaComponent in PATH_TO_APP/showbug/src/components/gaga/gaga.ts is part
of the declarations of 2 modules: AppModule in
PATH_TO_APP/showbug/src/app/app.module.ts and ComponentsModule in
PATH_TO_APP/showbug/src/components/components.module.ts! Please consider moving
GagaComponent in PATH_TO_APP/showbug/src/components/gaga/gaga.ts to a higher
module that imports AppModule in PATH_TO_APP/showbug/src/app/app.module.ts and
ComponentsModule in PATH_TO_APP/showbug/src/components/components.module.ts.
You can also create a new NgModule that exports and includes GagaComponent in
PATH_TO_APP/showbug/src/components/gaga/gaga.ts then import that NgModule in
AppModule in PATH_TO_APP/showbug/src/app/app.module.ts and ComponentsModule in
PATH_TO_APP/showbug/src/components/components.module.ts.
In Ionic 3, when you generate a component, it creates the component related ts and scss pages and also a component.module.ts.
The component will be declared in component.module.ts.
#NgModule({
declarations: [
GagaComponent,
//any other generated components
],
imports: [
IonicModule
],
exports: [
GagaComponent,
//any other generated components
]
})
You need to import this module to app.module.ts
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
ComponentsModule,//here
],
Or you can set in imports in any of the page modules where you need to use it
Remove GagaComponent from declarations of component.module.ts
I am using create-react-app and trying to install mapbox-gl-draw.
npm install #mapbox/mapbox-gl-draw
This works with some npm warnings. I then try to pull mapbox-gl-draw into a component like this:
import React,{Component} from 'react';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import ReactMapboxGl from 'react-mapbox-gl';
import MapboxDraw from '#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'
console.log(MapboxDraw)
I just get an empty object.
I am using create-react-app. Do I need to use a different webpack .config file.
What is the best way to import mapbox modules like this?
If you're using webpack, you need to alias to use mapbox-gl dist file, here is how I have done it using webpack2:
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx', '.json', '.css', '.svg'],
alias: {
// mapbox-gl related packages in webpack should use dist instead of the default src
'#mapbox/mapbox-gl-draw': path.resolve(root, 'node_modules/#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js'),
},
},
Variable "root" was defined earlier in the file to refer to the root directory of the project, on the same level as package.json etc.
The same problem can happen in react-map-gl-alt where you need to alias 'mapbox' to 'node_modules/mapbox/dist/distfilehere.js'.
To expand upon medv's answer, at current, in your package.json, you need to add the mapbox-gl v0.270 - v0.38.0, like:
"mapbox-gl": ">=0.27.0 <=0.38.0 when using "#mapbox/mapbox-gl-draw": "^1.0.1".
This is explained at the 'Requires' line here & if you look at the peerDependencies in the package.json.