I am using ionic2 build .
I did ionic plugin add cordova-plugin-file and used following code.
import {File} from 'ionic-native';
#Injectable()
export class GlobalVars {
constructor(platform:Platform) {
platform.ready().then(() => {
this.appRootFolder = cordova.file.documentsDirectory;
}
}
}
then I did ionic build android and I got this error
Cannot find name 'cordova'
After 2 hour of struggling , I resolved the issues by following commands
npm install -g typings
typings install dt~cordova --save --global
typings install dt~cordova/plugins/filesystem --save --global
This helped in building android , but still fails for iOS. when I run this ionic build ios I still get
Cannot find name 'cordova'
I wrote this line(declare var cordova:any;) at the top of file
import {File} from 'ionic-native';
declare var cordova:any;
And the problem is solved for me.
As of lately, you can do this:
In CLI, from your project folder:
ionic plugin add cordova-plugin-file
Then, in your component/class file:
import { File } from 'ionic-native';
declare var cordova: any;
const fs:string = cordova.file.dataDirectory;
File.checkDir(this.fs, 'mydir')
.then(_ => console.log('yay'))
.catch(err => console.log('boooh'));
Many native plugins are now well implemented and documented by the Ionic Team :)
Source: Ionic Native docs
Try copying cordova.d.ts file and plugins folder from here - https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/cordova230
And paste this folder and file in your project/typings directory.
Related
Context
For a long time I was using Bootstrap and other libraries by sources. I mean I was including it as below:
- static
- vendor
- jquery
- popper
- bootstrap
- ...
But nowadays, I need to improve myself in managing my web dependencies. For some reasons :
Less sources in repositories and a more efficient team project
Greater support to choose version or test migrations
Saving time for later projects with same dependencies
I need to include a library which is only provided through NPM which is codemirror
So I am currently trying to manage dependencies via NPM, in a django project. But I'm stuck at a very basic step I guess. I don't know where to continue after npm install --save jquery popper.js bootstrap. I'm disturbed by all examples which are for node.js application...
Where I'm stuck
I have an index.js at the same level of my main package.json. I thought I had to import my scripts in this file, then include this script in my page. So I tried require Jquery then bootstrap, but I get errors on bootstrap required because jquery is undefined.
I don't have much code to show, the more I need is to understand how it works step by step rather than having it done to me.
Questions
My primary goal is to manage my main javascripts, I mean scripts that must appear through the whole site. Wrap them into one script, then include this script in my base.html assuming I'm in a django project.
I know that bootstrap < v5 depends on Jquery and popper.js, but it comes with its own package.json, isn't that enough ? Do we have to npm install jquery popper.js them anyway, as some people suggest in some SO thread or else ? Even after running npm install inside the node_module/bootstrap ? Additionally, the bootstrap.bundle.js contains popper.js, and node_modules inside bootstrap contains jquery. Why not use those ? See Bootstrap import with webpack Otherwise why are they there ?
How to bundle my javascript dependencies ? Via webpack ? For example, Jquery from bootstrap/node_modules/jquery/dist/jquery.js with bootstrap/dist/js/bootstrap.bundle.js ? Then I will have same versions used by bootstrap developers.
Then how to compile the wanted scripts into one script, and minify it for example ? Then I could get those scripts by collectstatic function into the folder where I group all my desired statics.
Perhaps I'm not clear, because all of this blurred my mind.
Webography
Use Sass/css within django, NPM way
Add react in django project, via NPM
Bootstrap package manager
Bootstrap import with webpack
Npm install jquery, poper, bootstrap
React with webpack
Editions with my progress
package.json
{
"name": "static_src",
"version": "1.0.0",
"description": "Static files from NPM.",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx webpack -c webpack-conf.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.5.3",
"codemirror": "^5.58.2",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
},
"devDependencies": {
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0"
}
}
webpack-conf.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index.js',
output: { path: __dirname, filename: 'dist/bootstrap-bundle.js' }
};
index.js
import $ from 'jquery';
import {} from 'popper.js';
import 'bootstrap'
npm run build
> npx webpack -c webpack-conf.js
[webpack-cli] Compilation finished
asset dist/bootstrap-bundle.js 169 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1.13 KiB 5 modules
cacheable modules 508 KiB
./index.js 71 bytes [built] [code generated]
./node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
./node_modules/bootstrap/dist/js/bootstrap.js 140 KiB [built] [code generated]
./node_modules/popper.js/dist/esm/popper.js 86.4 KiB [built] [code generated]
webpack 5.6.0 compiled successfully in 4541 ms
Result
Well for now I manage to include this bundle into my site, but an error occured, and it seems not including Jquery : ReferenceError: $ is not defined. Notably it occurs on this snippet for example :
$(function () {
$('[data-toggle="popover"]').popover()
$('[data-toggle="tooltip"]').tooltip()
})
Any idea ?
Answer to Q1, assuming you have run npm install bootstrap and you can find 'popper' and 'jquery' in the node_modules folder:
Add import 'bootstrap'; in your index.js (https://getbootstrap.com/docs/4.0/getting-started/webpack/)
NOTE:
IF you cannot find 'popper' and 'jquery' in the node_modules folder, THEN It's worthwhile to install them via npm using npm install #popperjs/core & npm install jquery
IF you had to install popper and jQuery manually for some reason, THEN Add import $ from 'jquery'; & import {} from '#popperjs/core'; in your index.js
I came to a great solution !
webpack-conf.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {path: __dirname, filename: 'dist/bootstrap-bundle.js'},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
};
index.js
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import {} from 'popper.js';
import 'bootstrap'
Then importing this script works well. Thanks to #Karanveer that unblurred my mind to put me on the right way. And this thread about webpack issues
I just started playing around with AWS CDK yesterday and I found something very weird.
First of all, I'm using TypeScript for my CDK app (I used cdk init --language typescript to generate the project files and I tried to import aws-ec2 module so this is what I did:
import cdk = require('#aws-cdk/core');
import ec2 = require('#aws-cdk/aws-ec2');
export class vpcStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
//.... all other codes go here....
However, when importing the aws-ec2 module this way, I got this error when trying to deploy the stack:
тип Unable to compile TypeScript:
lib/cdk-type_script-stack.ts:2:22 - error TS2307: Cannot find module '#aws-cdk/aws-ec2'.
2 import ec2 = require('#aws-cdk/aws-ec2');
~~~~~~~~~~~~~~~~~~
Subprocess exited with error 1
This is very weird because the API docs right here clearly stated that this is how I should import the aws-ec2 module in TypeScript
You need to install the node package before you could import and use it
Execute below on the command line to install npm package for aws-cdk
npm i #aws-cdk/aws-ec2
npm install (for install lib)
npm run build (for compile your code)
After that, you can run:
cdk synth
cdk deploy
You may have a version of npm that is incompatible with the version of #aws-cdk/pipelines as explained here: https://github.com/aws/aws-cdk/issues/13541#issuecomment-801606777
In addition to #juned-ashan 's answer, verify that you are installing the correct module version that corresponds to your cdk version (and other cdk modules installed).
For example:
$ npm install --save #aws-cdk/aws-ec2#1.10.0
Note: not enough points to add this as a comment in Juned's answer.
I'm building an Ionic 2 (RC0) application and I'm trying to use node-uuid by following the official documentation.
I've done:
$ npm install --save node-uuid
$ npm install --save #types/node-uuid
node-uuid seems to be using the default export approach, so I'm importing it in my typescript file like this:
import uuid from 'node-uuid';
And using it as follows:
console.log(uuid.v4);
However, my app doesn't come up and I see this error in the logs:
TypeError: des$3 is undefined
What am I missing?
Most resources for Angular 2 recommend using the typings CLI to install the type definitions, but this made no difference for me. I tried:
$ npm install --global typings
$ typings install --save node-uuid
$ ionic info
Your system information:
Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS
Node Version: v6.6.0
******************************************************
Dependency warning - for the CLI to run correctly,
it is highly recommended to install/upgrade the following:
Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`
******************************************************
Please note that node-uuid is deprecated. They merged with another project and now it's only called uuid. Everything up to the point of installing the #types library is correct. (note that you will have to redo those steps using just 'uuid' not 'nod-uuid')
However,
console.log(uuid.v4);
does not generate an id. As per the documentation you need to specify in your import which version of uuid you want to use and then call your variable as a method: uuid();
From docs: [Deprecation warning: The use of require('uuid') is deprecated and will not be supported after version 3.x of this module. Instead, use require('uuid/[v1|v3|v4|v5]') as shown in the examples below.]
Here is a code example using uuid/v1:
import { Component } from '#angular/core';
import uuid from 'uuid/v1'; //here change 'v1' with the version you desire to use
#Component({
selector: "page-uuid",
templateUrl: "uuid.html"
})
export class uuidTestPage {
id = uuid();
constructor() {
console.log(this.id); // outputs id. For example: 298da400-1267-11e8-a6e5-3148ee6706e9
}
}
After you serve your app and enter the uuidTestPage you should see the id logged to the console. The format of the id will vary depending on the version you use:
Version 1 (timestamp): my example.
Version 3 (namespace)
Version 4 (random)
etc...
Happy coding!
you can try it: (angular2-uuid)
npm install angular2-uuid --save
......
import { UUID } from 'angular2-uuid';
...
let uuid = UUID.UUID();
it works on angular 2 & ionic 2
I am deploying an Ember CLI app through jenkins and publishing it using nginx. Here is by jenkins build script:
npm install
bower install
node_modules/ember-cli/bin/ember build --environment=production
The nginx configuration simply directs sub.domain.com to jenkins\jobs\lastStable\archive\dist. That works fine, but when I go the page, it is blank and the following output in the console:
TypeError: Ember.Handlebars.compile is not a function vendor-92ab6507ac60a5bf7c6819aa8fc418d6.js:18
ReferenceError: Swag is not defined spa-client-9b01c6124f5b2a4cd2e95b62be7f5ba5.js:1
I am guessing that the two errors are related, but I can't figure out what is causing them. I have tried this answer to what appears to be a similar question, but it doesn't work for me. Everything works fine in my dev environment, and I can't see anything suspicious in the Brocfile.js.
I have same issue with one of third-party libraries I'm using.
I'm using this solution: https://github.com/rwjblue/_____ember-cli-test/commit/1a26911def6f04a4badee94c8a62d8205258867b
My Brocfile.js diff:
-var app = new EmberApp();
+var app = new EmberApp({
+ vendorFiles: {
+ 'handlebars.js': {
+ production: 'bower_components/handlebars/handlebars.js'
+ }
+ }
+});
Production uses handlebars-runtime which does not include Ember.Handlebars.compile. The reason is that it's smaller to use that in production and it's more effective to precompile which ember-cli does for you automatically.
Lots of discussion on the PR found here
I encountered this same problem with the bootstrap for ember package. The temporary solution (from GH) was to inlcude the entire handlebars.js file in production:
var fileMover = require('broccoli-file-mover');
var vendorTree = fileMover('vendor', {
files: {
'handlebars/handlebars.js': 'handlebars/handlbars.runtime.js'
}
});
var app = new EmberApp({
vendorFiles: {
'handlebars.js': {
production: 'vendor/handlebars/handlebars.min.js'
}
}
});
I am learning to configure Laravel Echo Socket.js and following an article here
Code in bootstrap.js is below
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001'
});
When I run the above code, it says, Cannot find module "laravel-echo"
I am not using pusher and redis. In the above reference page, I think, there is no installation guidelines given for only socket.io
Can somebody explain if I am missing anything?
I solved the same problem installing the following packages:
npm install --save laravel-echo pusher-js
I needed to install below packages.
npm install -g laravel-echo-server
then following the step by step instruction as give here
Finally put below code before any js file.
<script src="http://{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
the issue is here:-
import Echo from "laravel-echo"
you will write it as:-
import Echo from 'laravel-echo';