WE are embedding PowerBi JavaScript SDK in angularJs App. PowerBI Javascript SDK makes use of the Promise.
IE 11 do not support Promises. Lot of posts directed me to make use of ployfill.js for the same.
My Question is how do I Inject PolyFill.js file in angularjs app?
If you are using Webpack for bundling, add the polyfill.js before your main entry script.
module.exports = {
entry: ['polyfill.js', './main.js']
};
If you are using script tags in html, make sure to include the script before any other library that uses promises (PowerBI):
<script src="path/to/polyfill.js"></script>
A more modular approach is to use core-js and include only the polyfill you need:
module.exports = {
entry: ['core-js/fn/promise', './main.js']
};
Related
I'm working on a project with Ionic v1 and AngularJS and Cordova.
I'm trying to include this firebase plugin in my project with no luck so far: https://github.com/dpa99c/cordova-plugin-firebasex
I was told to try out this node module: https://github.com/ionic-team/ionic-native#angularjs
However, I keep getting this error:
Error: [$injector:nomod] Module 'ionic.native' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
<script src="../node_modules/#ionic-native/core/ionic-native-plugin.js"></script>
How can I make this work in my project and how can I import ionic-native properly?
Actually, I'm using ionic-native 5.23.0 in my angularJS project and I believe all 5.x versions have support for this angular version. If you take a look in ionic-native/core you will notice that exists a file called ng1. That file have a function called initAngular1 who iterate across object's properties creating angularJS services. Here's what I did.
First, I opened the script that I use as entry point in my webpack.config to create a bundle (Since I already had webpack installed, I used)
Inside this script, I wrote the following:
require('#ionic-native/core');
const appVersion = require('#ionic-native/app-version');
const sqlite = require('#ionic-native/sqlite');
const statusbar = require('#ionic-native/status-bar');
const toast = require('#ionic-native/toast');
const ng1 = require('#ionic-native/core/ng1')
ng1.initAngular1({
AppVersion: appVersion.AppVersion,
SQLite: sqlite.SQLite,
Statusbar: statusbar.StatusBar,
Toast: toast.Toast
});
Run webpack
Inject ionic.native module in your app.
Inject any plugin you would like to use with a $cordova prefix.
angular.module('myApp', ['ionic.native'])
.controller('MyPageController', function($cordovaToast) {
$cordovaToast.show('Hello from Ionic Native', '5000', 'center');
});
Don't forget to install the cordova plugin used by the ionic-native plugin.
ionic-native stopped the support to angular ionic v1/angular 1,
https://github.com/ionic-team/ionic-native/tree/v3.x
For Ionic V1/Angular 1 support, please use version 2 of Ionic Native. See the 2.x README > for usage information.
I have built an angular website working perfectly fine in chrome, but it is failing in IE because of ES6
I am running angular using cdn with a node server which is only used for serving the webpage, no code is there other than listening to port.
I want to add babel into that, but all the examples I am finding are for server code or using gulp or webpack. Is there any way to directly integrate babel for my purpose or I definitely need to have webpack\gulp configured.
Included the directory structure of the code, all the files are getting linked in index.html
Since babel changes your javascript I don't think you can include it in your html page you need to have it in a grunt or such pipeline so the javascript is transformed and then the transformed javascript is served:
gulp.task('build', [], function () {
return gulp.src('./app/index.html')
.pipe(preprocess({context: production_config.context}))
.pipe(babel({ presets: ['env'] }))
.pipe(gulp.dest('./build');
});
Then serve "build" instead of "app"
Maybe there's a more dynamic way
We have chosen the react JS 0.14.8 for front end because it supports IE 8 browser but Is Node JS or JSX is necessary for React JS development or we can create components without Node JS or Jsx
Yes you can create ReactJs app without nodejs and jsx.
But why you should use JSX?
JSX provides a very clean way to declare your UI component.
You can use your familiar html syntax to declare your user interface.
JSX gets trans-piled and converted to light weight objects representing ui elements.
e.g
You can use following way to declare a react js via
1.jsx
const App = () => {
return (
<div><h1>Welcome to React</h1></div>
);
}
or
2.without jsx
const App = function App() {
return React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"Welcome to React"
)
);
};
You can guess which one is easy to write.
Why should I use nodejs to build browser projects?
nodejs is never required for running websites on browser.
But nodejs ecosystem provides you thousands of npm modules to use in your projects without reinventing them just for your projects.
Without nodejs you could have used cdn providers and added <script> tag to use any library. But with the use of module bundlers and static assets generator such as browserify and webpack you can leverage the powser of nodejs ecosystem directly in your web project( which does not require nodejs runtime environment but rather run in browser).
Below snippet use <script> tag to make reactjs available without nodejs.
const App = () => {
return (
<div><h1>Welcome to React</h1></div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">
</div>
Is node js required for React JS?
Let me split the answer into 2 parts:
In Production:
Server Side: Not needed unless you are using Node.js to create a web server and server your ReactJS files.
Client Side: Only browser is enough.
In development:
Server Side: Needed to download react libraries and other dependencies using NPM. Needed by webpack to create production bundles.
Client Side: Only browser is enough.
Is JSX required for React JS?
Developer can use HTML tags directly inside javascript if JSX(javascript + XML tags) is used. otherwise it becomes difficult to write code as well as to understand the code.
Hope this answer helps, Thank you
They're not strict requirements; you can include react with a script tag and use React.createElement.
That said, almost everyone uses node.js for development tooling and uses jsx. You can use any language for your api server, but you'll use a node.js server in development most of the time.
Usage:
require('node-jsx').install()
If you want to use a different extension, do:
require('node-jsx').install({extension: '.jsx'})
If you want to couple with an additional transform (such as CoffeeScript), do:
var coffee = require('coffee-script');
require('node-jsx').install({
extension: '.coffee',
additionalTransform: function(src) {
return coffee.compile(src, {
'bare': true
});
}
});
If you want to use ES6 transforms available in the JSX tool
require('node-jsx').install({harmony: true})
I am trying to use the Google Maps Javascript Api V3 inside a Angular + browserify app.
I do not use bower.
Previously I was doing that with requirejs, and a plugins on git hub millermedeiros/requirejs-plugins called async.
I was able to load gmaps like this (most of the time, sometimes requirejs was still requireing gmaps too early.
// load gmap as an amd module
define(['config'], function(config){
define('gmaps', ['async!http://maps.google.com/maps/api/js?v=3&sensor=false&libraries=places&key=' + config['google-map-api-key']],
function(){
return window.google.maps;
}
);
});
Browserify is kind of new, I don't see much documentation at this moment, do you guys have any recommendation ?
To include CommonJS incompatible scripts have a look at Browserify-shim transform:
https://github.com/thlorenz/browserify-shim
I need to inject a angularjs module dependency when the app is in production mode. I'm using requirejs to handle script loading.
Currently, I've got some if blocks setup in my asp.net file to set a global variable like:
#if (!HttpContext.Current.IsDebuggingEnabled){
<script type="text/javascript">window.env = "production";</script>
}
and then in my javascript i do:
if(window.env === "production"){
app.requires.push('templates-main');
}
is there a preferred way to handle this?
You may, at least, to achive it via RequireJs optimizer:
You may add this to your build config:
pragmas: {
production: true
},
//>>includeStart("production", pragmas.production);
app.requires.push('templates-main')
//>>includeEnd("production");
More about requirejs pragmas here.