I want to use require.js in ionic 2.
I uses something like
var createLogger = require('redux-logger');
var persistState = require('redux-localstorage');
However, the browser complaint about "Uncaught ReferenceError: require is not defined". I could not think of a way to include requirejs to my ionic 2 project. Please help.
I am also trying to integrate RequireJs with Ionic 2.
For your problem try this
declare var require: any;
use it after all your imports and before #Component or #Service
Related
I stuck for days trying to make it work “open-native-settings” on my ionic 3 project,.
So, following the documentation,
https://ionicframework.com/docs/native/open-native-settings
add this on app.modules.ts:
import { OpenNativeSettings } from '#ionic-native/open-native-settings/ngx';
and add OpenNativeSettings in providers list.
Then en my .ts file:
import { OpenNativeSettings } from '#ionic-native/open-native-settings/ngx';
Adding on constructor:
constructor(private openNativeSettings: OpenNativeSettings) { }
but when trying call open() method I get:
(…) is not a function. (???)
this plugin work fine on Ionic 3??
I need try this on Ionic 3, not Ionic 4.
I know that /ngx is for Ionic 4. Then, I trying the normal method:
import { OpenNativeSettings } from ‘#ionic-native/open-native-settings’;
But doing this, I get this errors on the editor:
Error on source app.modules.ts
Error on source .ts file
any suggestions??
Thanks.
Have a look at this thread:
https://forum.ionicframework.com/t/ionic-native-issue-in-ionic-app/154152/19
I think the short answer is that to get this working in Ionic 3, you need to install the native plugin with the #4 version appended. Then import without the /ngx. But when working in Ionic 4, you need to do what you've done above. The only caveat is that you need to be consistent across all the native modules you use.
I've got the standard Angular 5 build and I'm trying to include a Leaflet map. The documentation gives me an error when I follow it. I'm trying to import Leaflet through NPM and include it but I can't find documentation.
I know I need the CSS, ID tag, and imports...
I've downloaded "leaflet" into my "node_modules folder".
Now what? What is the import code for the Leaflet module that I need to put into my "app.module.ts" file?
Firstly, for better development, install through npm #types/leaflet to get leaflet types in application. After that, you need to create component with Map property (imported from leaflet) and use factory function map (also imported from leaflet). The most of examples show configuration using id, but you can pass HTMLElement.
constructor(private element: ElementRef) {}
ngAfterViewInit() {
this.map = map(this.element.nativeElement, {...options})
}
At this moment, I develop library to integrated leaflet with Angular 5 using components. First stable will be released in next week, but I have first beta release on npm here.
I am trying to send an HTTP put request from an ionic 2 app using an http native plugin, however, from the doc, I see only post and get request methods are implemented.
First: I would like to know if http methods delete and putare not really implemented (as I might not be looking at right place in the docs).
Second: If those are not implemented, how we can generate put and delete from an ionic 2 app? Is it possible to do it at low level, yet without the need to do modification to the plugin native/library code?
Thanks in advance.
Update 1: There is a pull request for put, delete and postJSON implementation (https://github.com/wymsee/cordova-HTTP/pull/105), however from September 2016 till now April 2017 it is not merged with master.
Update 2: First I would like to thank #Jamil Hijjawi for the answer. That solved the problem. But in the way, I would like to mention the solution 2 requires some server configuration to get around CORS, so I chose the first one. Also there is a nice article https://www.joshmorony.com/using-cordova-plugins-in-ionic-2-with-ionic-native/ that explains how to use a cordova plugin that is not in "Ionic Native", I do recommend to go through it. I would like to point out a section, as:
The way in which you use a non Ionic Native plugin in Ionic 2 is the same as the way you would use it in any Cordova project, which is however the plugin’s documentation says you should use it. However, there are some extra steps you need to take because TypeScript will cause some problems.
Going further it explains that we need to declare the globally exported variable cordovaHTTP by the plugin in somewhere like declarations.d.ts so typescript knows about that. Once declared, no dependency injection is needed. Following is a code snippet I have used in a random Component function.
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
private _platform: Platform
) {
this._platform.ready().then(() => {
// ========== We need this part
cordovaHTTP.put('http://192.168.0.5:8081/test-route', {
really: "Yea!"
}, {}, (res: any) => {
console.log(res);
}, (err: any) => {
console.log(err);
});
// ========== till here, as for the example of usage
});
}
}
Option 1:
The cordova-http plugin only support GET and POST, so if you want to use PUT install the plugin directly from the author who made the pull request repo https://github.com/spuentesp/cordova-HTTP using this command ionic plugin add https://github.com/spuentesp/cordova-HTTP
but there is no implemented declaration for these APIs from ionic-native, so you can declare cordovaHTTP namespace in declarations.d.ts and use the API you want
Option 2:
Use the Http service in angular
this.http.put(url, JSON.stringify(hero), {headers: headers}).map(res => res.json());
Http class doc https://angular.io/docs/ts/latest/api/http/index/Http-class.html
I'm trying to implement a camera to my Ionic 1 project.
But I can't find any reliable examples of how to do that.
I found:
https://www.thepolyglotdeveloper.com/2014/09/use-android-ios-camera-ionic-framework/
and
https://github.com/apache/cordova-plugin-camera
and some older Stack Overflow entries.
Still, I haven't got it running myself.
You're on the right track already! What you found is the most popular camera plugin for Cordova:
https://github.com/apache/cordova-plugin-camera
This is a pure Cordova plugin though, meaning that it's not adjusted in any way for Ionic. This means, you just add it to your project and can use it as soon as Ionic is ready:
ionic.Platform.ready( function() {
navigator.camera.getPicture(onSuccess, onFail, options);
});
But passing callbacks as params is indeed not the angular way to do this. So on top of the basic Cordova camera plugin you can add ngCordova to enhance the handling.
To install and add ngCordova to your project follow these instructions:
http://ngcordova.com/docs/install/
To wrap it up:
Install ngCordova via bower
Add js reference to your index.html
Add the ngCordova module as a dependency to your app.js
In case you've added everything correctly, inject $cordovaCamera in your controller, directive or service to use it.
This allows you to access the camera the angular way, more about it you can find here:
http://ngcordova.com/docs/plugins/camera/
/**
* taken from the docs linked above
* you can now make use of promises here!
*/
$cordovaCamera.getPicture(options).then(function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}, function(err) {
// error
});
Hope this helps integrating the camera successfully in your project. ;)
I am looking for an example about combining the four technologies in the title :) I have a working ReactJS application using Play, Scala and WebJars, it's here on GitHub.
Now I would like to add RequireJS, but I'm not sure how to go, especially because it seems to require a different JSXTransformer? If anybody has a pointer (or even a PR) it would be very appreciated.
This is not the easiest thing to do, but I was able to pull it off. I will give you some tips here. I also uploaded my own project to github. This is a very simple snake game built using React and RequireJs. It based on Webjars and Play Framework.
Remember that RequireJs is part of Play Framework. Here's a step by step guide to create React/RequireJs/WebJars/Play integration:
In your plugins.sbt add addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2"). This is a plugin which transforms JSXes into JSes and also strips flow types if you want that.
In your main scala.html file add #helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url). This will add add a script tag with data-main and src attributes that are used to bootstrap your RequireJs app.
Create react.js file in your assets/javascripts folder:
define(['../lib/react/react-with-addons'], function(React) {
window.React = React;
return React;
});
Create main.jsx file in your assets/javascripts folder:
require.config({
// standard requirejs config here
});
require(['react', 'components/YourComponent'], function(React, YourComponent) {
'use strict';
$(document).ready(function() {
React.render(<YourComponent />, document.getElementById('container'));
});
});
Your standard React component goes to assets/javascripts/components/YourComponent.jsx and is defined like standard RequireJs module. Remember to return a React class:
define(function(require) {
var React = require('react');
var AnotherComponent = require('components/AnotherComponent');
return React.createClass({ ... });
}
I hope that helps. If you have any questions, please let me know.
Someone said to have got the text plugin working with sbt-rjs: https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc
I would attempt with the text plugin first, as it's the simplest plugin of all, right? Once this is successful, move on to the JSX plugin:
https://github.com/philix/jsx-requirejs-plugin
Have a look at: https://github.com/nemoo/democratizer
This is an example project that uses play framework, scala, slick, mysql as a restful backend.
The client is a javascript single page application (SPA) written in react. It uses react router for client site routing and ES6 javascript.
The build process combines webpack and play activator which enables simple automatic browser refresh for server and client side code.