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';
Related
I want to use storage in ionic (based on angular), so I did all that described here: https://ionicframework.com/docs/v3/storage/ and import it like this:
import { IonicStorageModule } from '#ionic/storage';
but I get this error:
export 'IonicStorageModule' was not found in '#ionic/storage'
My ionic version is 6.13.1.
The use of storage was changed in ionic and now you need to import it as following:
import { IonicStorageModule } from '#ionic/storage-angular';
As described in details here: https://github.com/ionic-team/ionic-storage
For angular need to install as
npm install --save #ionic/storage-angular
Then
import { IonicStorageModule } from '#ionic/storage-angular';
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'm building an ionic app and would like to add unit tests for a couple of services. I'm trying to get jest working with typescript but it doesn't seem to play well.
I'm getting this error:
/myuser/project/node_modules/#ionic/storage/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { NgModule } from '#angular/core';
^^^^^^
SyntaxError: Unexpected token import
Now I have read that you have to add the babel-plugin-transform-es2015-modules-commonjs and use that in the test env of babel. However I am using babel 7 and this plugin is not available for babel 7. Is there a different solution?
I will also provide my package.json and .babelrc below.
gist
You just need to add #ionic/storage to your transformIgnorePatterns in jest config. For example, here's mine, take note of the #ionic/storage part:
"transformIgnorePatterns": [
"node_modules/(?!#ngrx|moment|#ionic/storage|#ionic-native)"
]
Additionally, make sure in your tsconfig compiler options you have module: 'commonjs'
Also, if you need localstorage mocks, you can just use the following npm module:
npm install --save-dev jest-localstorage-mock
and then (in your setupJest.ts file)
import 'jest-localstorage-mock
Lastly, I recommend taking a look at:
https://github.com/thymikee/jest-preset-angular
for more help with jest + ionic configurations.
I've seen similar questions but still can't find a viable solution.
I'm trying to integrate Jest into a working project, which uses import/export default in hundreds of places. The following test does work for Jest using require:
const bar = require('../../flows/foo');
test('adds 1 + 2 to equal 3', () => {
expect(bar.foobar(1, 2)).toBe(3);
});
when export is:
module.exports = {
foobar: foobar,
fizz: fizz
}
The functions I'll want to be testing however are exported using:
export default {
foobar: foobar,
fizz: fizz
};
So when I try to update my test to import:
import foobar from '../../flows/foo';
With export:
export default {foobar: foobar};
I get the error
SyntaxError: Unexpected token import
All it takes:
// run this command (or npm equivalent)
yarn add #babel/core #babel/preset-env
// add babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
};
Jest automatically picks it up, no other configuration required.
You have not set up a .babelrc file in your project, so transpiling is not happening. You need to transpile the ES6+ syntax (import, export, etc) into browser readable ES5.
I ran into this and solved it this way thanks to this GitHub issue post:
If you're using babel to transpile your code then remember to use the transform-es2015-modules-commonjs plugin.
To use it, you'll need to:
Install the plugin for BabelJS by entering this command in the CLI:
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
Add the plugin to your list of plugins in your babel config
plugins: [
"transform-es2015-modules-commonjs"
]
I am trying to create shim for getstream library for ember-cli as #jmurphyau answered here.
I bower install getstream, then create file
vendor/shims/getstream.js
(function() {
/* globals define, getstream */
function getstreamModule() {
'use strict';
return getstream; // <-- got error here
}
define('getstream', [], getstreamModule);
})();
and add lines to Brocfile.js
app.import('bower_components/getstream/dist/js_min/getstream.js');
app.import('vendor/shims/getstream.js', {
exports: {
'getstream': [ 'default' ]
}
});
and try to import Stream from 'getstream'; in route.
Got Uncaught ReferenceError: getstream is not defined in getstream.js
What's going wrong and how it could be fixed? Thanks for answers.
Have you tried using ember-browsify?
That library doesn't look like it exposes a global variable called getstream which is why your getting that error.
It does however look like it supports CommonJS module syntax so ember-browserify should work.
Install ember-browserify
ember install ember-browserify
Install the CommonJS library as an NPM package
npm install --save-dev getstream
Use the NPM package with regular import syntax
import getstream from 'npm:getstream';