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.
Related
I am programming an angularjs application in visual studio using typescript. I want to include the ngImgCrop module link into my application but have not been successful at doing so. Here's how I tried to include the module in my component
import {ngImgCrop} from 'ng-img-crop-full-extended'
I already installed the package using
npm install ng-img-crop-full-extended
inside my angular application directory and included the required reference to
ng-img-crop.js and ng-img-crop.css
scripts in my index.html. The javascript version requires me just to include the module like this
angular.module('app', ['ngImgCrop'])
However, I have no idea on how to include it into my version of angularJs using typescript. Any help will be great thank you.
The problem is you are using a Javascript import which does not actually inject the ngImgCrop module into your AngularJS project.
You still have to include the module in your app's AngularJS module as you mentioned above using the following code:
angular.module('app', ['ngImgCrop']);
(This assumes you want to name your application's module app.)
The other javascript import you are doing, ie the import {ngImgCrop} from 'ng-img-crop-full-extended, can be used to import the Typescript classes so they can be used in the vscode intellisense, but it is not actually used by the AngularJS framework at all. If the ngImgComp code isn't a Typescript file then there is no need to import it using the javascript import at all.
If you want the intellisense for the ngImgCrop code, you can see if there is a Definitely Typed file for ngImgCrop and install that using
npm install #types/<ngImgCrop project name>
Then include the index.d.ts file from that installed project in the build.imports.d.ts file for your project by adding the following line, replacing ngImgCrop with the correct name.
/// <reference path="mode_modules/#types/<ngImgCrop project name>/index.d.ts />
I want to do some conditional operations inside my angularjs application for different versions of my app. How do I import the version property of my bower/package.json file from my Angular app locally.
I seem to get module not founderror when trying to import the json file (actually anything that's not .ts file). I am not planning to use $http.get(..) to read the json file asynchronously nor installing node/express packages to use require module.
I want to simply use the ES6 or SystemJS module loader for doing this task. Thank you :)
Solution in AngularJS Controller:
var appVersion = require('electron').remote.app.getVersion();
THE PROBLEM
I am trying to integrate yfiles for HTML into an Angular 2 application that uses the Angular CLI. I am using the latest version of Angular 2 and the latest BETA release of the CLI.
I have installed the types using npm install --save #types/yfiles.
I have placed the required yfiles folders in my project and have updated angular-cli.json to include the required sytles and scripts:
"styles": [
"../lib/yfiles.css"
],
"scripts": [
"../lib/license.js",
"../lib/yfiles/view-component.js",
"../lib/yfiles/view-layout-bridge.js",
"../lib/yfiles/layout-hierarchic.js",
"../lib/yfiles/layout-tree.js",
"../lib/yfiles/router-polyline.js",
"../lib/yfiles/router-other.js"
],
I have confirmed that a build includes these scripts in the bundled scripts output after running ng build.
When trying to reference yfiles the autocomplete works in the IDE (latest Webstorm):
graphComponent: yfiles.view.GraphComponent;
constructor(private element: ElementRef,
injector: Injector,
resolver: ComponentFactoryResolver) { }
ngAfterViewInit() {
let containerDiv:HTMLDivElement =
this.element.nativeElement.getElementsByClassName('graph-control-container')
[0];
this.graphComponent = new yfiles.view.GraphComponent(containerDiv);
}
The project compiles and runs when ng serve is issued BUT when I navigate to a route that activates the component that is trying to use yfiles, an error is thrown and reported in the console:
error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./BrowseVisualisationsComponent class BrowseVisualisationsComponent - inline template:0:0 caused by: Cannot read property 'GraphComponent' of undefined
I have tried importing the yfiles modules - for example:
import 'yfile/view-component'
This just prevents ng serve from building the application:
ERROR in ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts
Module not found: Error: Can't resolve 'yfiles/view-component' in '/home/VMdev/Documents/iotahoe_client/src/app/shared/table-relationship-visualisation'
# ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts 12:0-31
# ./src/app/app.module.ts
# ./src/main.ts
# multi main
Any assistance appreciated.
The scripts provided in the app.scripts array will just be loaded as if they would have been referenced with regular <script> tags - no module resolving will take place at all.
However, the yFiles modules you provided in the scripts array are "meta modules" that would load the actual implementation files using AMD/CommonJS-style define/require statements.
Therefore, in order to load the yFiles functionality with angular-cli, you will have to provide the actual implementation files directly:
"scripts": [
"./assets/yfiles/license.js",
"./assets/yfiles/lib/yfiles/impl/lang.js",
"./assets/yfiles/lib/yfiles/impl/graph-core.js",
"./assets/yfiles/lib/yfiles/impl/core-lib.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-core.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-default.js",
"./assets/yfiles/lib/yfiles/impl/algorithms.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-template.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-other.js",
"./assets/yfiles/lib/yfiles/impl/graph-binding.js",
"./assets/yfiles/lib/yfiles/impl/layout-core.js",
"./assets/yfiles/lib/yfiles/impl/graph-layout-bridge.js",
"./assets/yfiles/lib/yfiles/impl/layout-polyline.js",
"./assets/yfiles/lib/yfiles/impl/layout-router.js",
"./assets/yfiles/lib/yfiles/impl/layout-tree.js",
"./assets/yfiles/lib/yfiles/impl/layout-hierarchic.js"
],
It's unfortunate that the modules can't be resolved automatically with this approach even though the yFiles modules adhere to the UMD pattern, but I don't see a better option to make this work with angular-cli right now.
To generate the list of the yFiles implementation modules in the correct order, you can use our yeoman generator with the "script-tags" option:
https://www.npmjs.com/package/generator-yfiles-app
this sound like a simple question but i am a newbie with angular, basicly i want to use AngularFileUpload to upload images on my website, so i did this when i initialize my app:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
before i installed the angularFileUpload module trough npm, so my module is inside node_modules, but i get an error evertyme i start my app
error:
Failled to instantiate module due to:
'fn' is not a function, got string.
someone know what is happening?
That happens because you are injecting the modules in a wrong way.
You are inserting two arrays:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
Instead you should insert just one array with all modules:
var app = angular.module('myApp',['ui.router','angularFileUpload']);
You should use bower instead of npm for loading your client side dependencies in AngularJs. There are following steps required to correctly load your module:
Download using following bower command
bower install angular-file-upload
Then include this library in the script tag, by providing correct location to minified js.
Last inject modules in correct way
var app = angular.module('myApp',['ui.router','angularFileUpload']);
And that's it. Please let me know if it helped you!
I'm currently trying to update my angular 1 application from typings to #types.
First I got following error message:
Identifier 'angular' must be imported from a module
After some searching I found out, that angular isn't accessible globally anymore. Or anleast I didn't find out how...
With typings, angular was global and I could use it without imports or anything. My problem is, that an import of angular, like this:
import * as angular from 'angular';
breaks my application: Unfortunately SystemJS is now trying to load angular and because of this it's not available when ui-bootstrap and other libs are loaded with script tags.
To fix this, I would have to rewrite a huge part of the build-pipeline. So I'm asking again: Is there another way to use angular with TypeScript 2 and #types, that doesn't end in a require('angular')?
I found the answer. Do this and everything will work finr.
import * as _angular_ from 'angular';
declare global {
const angular: typeof _angular_;
}