I've been working on setting up Visual Studio Code specifically to work with a Angular 1.5 codebase that we have at work. Here's what I've done up to this point:
Installed TSD
Ran tsd query -r -o -a install angular -s
Add a reference at the top of my file to tsd.d.ts like so:
/// <reference path="../typings/tsd.d.ts" />
(function() {
'use strict';
angular.module('moduleName').controller('CtrlName',
['$scope', '$window',function ($scope, $window){
}
})();
At this point, it looks like I have partial success; when I hover over the angular keyword I see type-specific information (i.e. namespace angular, var angular: ng.IAngularStatic) but none of the type information is coming through in the angular specific dependencies, i.e. when I hover over $window, it tells me it is of any type.
My questions:
What more do I have to do to get intellisense to work properly?
Is there a way around having to add the reference at the top of every single JS file I have in the codebase to be able to get intellisense working?
After some digging around, I found that this used to be supported in VS Code once upon a time but support was lost in the latest versions. Source: https://github.com/Microsoft/vscode/issues/8163
Related
I just upgraded from Angular 4.3.3 to Angular 5.2.1. With doing so now when I build in dev (ng build --dev) the project build just fine. But when building in prod (ng build --prod) and the application loads in the console I get "Uncaught ReferenceError: define is not defined". I have verified that I have updated all the depreciated syntax in my project.
Does anyone else have any other ideas.
I am using a third party package called Wijmo, but I have already updated that to their latest stable release.
Please find the answer here:
The build started working for me after I replaced Wijmo AMD modules (from the NpmImages\wijmo-amd-min folder) with CommonJS modules (from the NpmImages\wijmo-commonjs-min folder).
This looks like not a problem with Wijmo AMD, the details below.
Below are the details of the investigation.
The problem is caused by the Build Optimizer process, controlled by the “--build-optimizer” flag, true by default for “—prod” builds with Angular 5 (false for Angular 4).
The build works without problems if to use non-minified Wijmo AMD modules from the NpmImages\wijmo-amd-src folder.
I checked the minified wijmo.js module and it’s absolutely correct (details below), which means that Build Optimizer just contains a bug that doesn’t allow it to correctly parse a minified AMD module.
Below are some details about how CollectionView class is exported from the wijmo.js module.
A. Non-minified wijmo.js:
A.1) Here’s the AMD ‘define’ function declaration:
define(["require", "exports", "wijmo/wijmo"], function (require, exports, wjcSelf) {
A.2) Here’s the beginning of the CollectionView class definition:
var CollectionView = (function () {
function CollectionView(sourceCollection, options) {
var _this = this;
this._idx = -1;
this._srtDsc = new ObservableArray();
this._grpDesc = new ObservableArray();
A.3) Here the CollectionView export statement:
exports.CollectionView = CollectionView;
Note that it uses ‘exports’ parameter passed to the ‘define’ callback function in #1 (bolded).
B. Now let’s check how this stuff looks in the minified wijmo.js module:B.1) AMD define:
define(["require","exports","wijmo/wijmo"],function(t,e,n)
Note that ‘exports’ parameter from A.1 is renamed to ‘e’.
B.2) Beginning of the CollectionView class definition:
Mt=function(){function t(t,e){var n=this;this._idx=-1,this._srtDsc=new xt,this._grpDesc=new xt,
“var CollectionView” from A.1 is renamed to Mt here.
B.3) Export statement
e.CollectionView=Mt;
‘e’ is the ‘e’ parameter from the ‘define’ callback function from B.1, which is a minified version of the ‘export’ parameter from A.1.
I.e. the minified wijmo.js module exports CollectionView absolutely correctly, and it seems that the problem is in the Build Optimizer. We can do nothing here.
So the workaround could be to use non-minified Wijmo AMD modules.
But as I said before – the right way is to use CommonJS format, this will save from problems like this!
~Manish
I'm attempting to make use of this library: https://github.com/MagicTheGathering/mtg-sdk-javascript in an Angular2 application.
Unfortunately, I've been going in circles trying to load it into my application.
Firstly, on the TypeScript side if I import it using:
import { } from 'mtgsdk';
there are no types to load into the {}.
If I attempt to load it using something similar to:
import * as mtg from 'mtgsdk'
I'm unable to because it says that it's unable to find a module named mtgsdk.
I've installed the module using
npm install --save mtgsdk
Also, npm installs work fine for other modules.
The application compiles fine if I load it in using require via something similar to this:
var mtg = require('mtgsdk');
Taking that approach, I'm able to compile and launch but in the browser I get a number of errors about modules that it can't find. I figure they are prerequisites for the sdk that didn't get loaded so I start bringing them in via package.json.
For every one that I bring in, I then have to go to systemjs.config.js and add an entry pointing to the module's entry point and often have to specify a default extension using blocks like this:
pointer
'mtgsdk': 'npm:mtgsdk/lib/index.js',
'request-promise': 'npm:request-promise/lib/rp.js',
'ramda': 'npm:ramda/dist/ramda.js',
'emitter20': 'npm:emitter20/index.js',
'bluebird': 'npm:bluebird/js/browser/bluebird.js',
'request': 'npm:request/index.js'
default extension
'request-promise':
{
defaultExtension: 'js'
}
I'm not sure if that's the right approach though because the more dependencies I add, the more that I end up requiring. At one point I had literally gotten up to 50 extra dependencies added because every time I launched, the browser console would find more that were needed.
Is there any easier way to load all of these in?
Also, some of them (such as tough-cookie and request-promise-core) were very problematic to load and I couldn't get the browser console to stop complaining about them. Finally, some of them seemed very basic such as url, http, https. Those seem like they should already be present.
Using systemjs was utilized in the previous versions of Angular 2, However Angular 2 has evolved to Angular 4, with super new features like Angular CLI.
I recommend your use Angular CLI, with #angular/cli.
Importing Node modules
Since mtgsdk is a node-module, you can easily import it using
import * as mtg from 'mtgsdk'
However for your program to compile, you must install a type definition for it. or declare one for it in /typings.json or your app might not build.
Importing Client Scripts
For client scripts like firebase.js you won't need to add client scripts as entries in systemjs.config.js again.
Using #angular/cli, you would easily add them in the scripts[] array in your angular-cli.json for automatic compilation.
Then access them like this
declare const firebase: any;
Here is a quickstart tutorial to set up Angular with #angular/cli.
I recently installed OpenCV through npm using the following guide:
https://www.npmjs.com/package/opencv
My question is pretty simple. How do I actually use the OpenCV library in my project?
On that site, there is a face detection example that looks like this:
cv.readImage("./examples/files/mona.png", function(err, im){
im.detectObject(cv.FACE_CASCADE, {}, function(err, faces){
for (var i=0;i<faces.length; i++){
var x = faces[i]
im.ellipse(x.x + x.width/2, x.y + x.height/2, x.width/2, x.height/2);
}
im.save('./out.jpg');
});
})
The cv. variable is where I'm stuck at. Typically whenever I install a new package using npm, I would add it to my app.js file like so:
angular
.module('App', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.sortable',
'firebase',
'angular-toArrayFilter'
])
Similarly in any of my controllers, I would add the name of the module as a parameter to the controller:
angular.module('App')
.controller('LoginCtrl', function ($scope, UserAuth, $window, $firebaseArray, fireBaseRef)
I can't seem to find the dependency name for OpenCV to even allow me to use it in the first place. None of the guides that I've looked at to date ever mention how to include it into your project.
Thanks for your time!
You can't use OpenCV in browser-side javascript projects. OpenCV is a native library and node-opencv allows you to use it on the server, but you cannot use it directly in the browser.
From the installation instructions for node-opencv:
You'll need OpenCV 2.3.1 or newer installed before installing
node-opencv. Note that OpenCV 3.x is not yet fully supported.
Follow the installation instructions for whatever your operating system is (i.e. Mac OSX, Windows, Linux/Debian). Instructions for the most popular systems can be found here: https://www.npmjs.com/package/opencv.
Then, before using the 'cv' variable you must require the 'opencv' module.
var cv = require('opencv');
If you receive an error, it will usually be a dependency issue. Verify that you have correctly installed all the dependencies for node-opencv. On my first install I needed
npm install buffers
and
npm install node-pre-gyp
Depending on where you installed your opencv bundle, you may need to explicitly include the file path to the opencv.js file like so
var cv = require('/path_to_node-opencv-master/lib/opencv');
I recommend reading the intro to OpenCV articles and the documentation on the OpenCV website at http://opencv.org/ to learn more.
I'm attempting to use a jQuery plugin (in this case 'fitText') in an Ember project.
In the ember-cli-build.js (that replaced the Brocofile recently...) - I import the dependency (which I have already installed with bower).
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});
app.import('bower_components/fittext/fittext.js');
return app.toTree();
};
In my console, I can type in 'fitText' and I DO get the object back. So, it's global now, and I should be able to use it anywhere. BUT "Uncaught TypeError: $(...).fitText is not a function"
#Tom Netzband pointed out that the bower version of fitText was the one that #adacio maintains and is vanilla JS. I've since switched it out for a app.import('vendor/jquery.fittext.js'); (the JS is really only 20 lines or so)
Previously I needed to import it in the controller or route where I want to use it - but the docs don't reference that anymore. In the docs with moment.js as the example, it seems to become a global.
I've put it in the ready hook in app.js - next to similar jQuery things that work fine... but no luck. In this case I only want to affect a few words on the index.hbs / route
UPDATE
This has really just become another question now. I thought it was still the same problem but it's not. So awarding answer and asking a new one. Thanks.
It looks like bower install fittext doesn't install the jQuery plugin version of fitText, it only installs the plain js version of it.
If you look at your bower_components/fittext/fittext.js file, you'll see jQuery isn't passed in or used, and the example from the example.html file shows usage as being:
fitText(document.getElementById('fittext'), 1.2)
So if you want the jQuery version you might have to download it straight from github and throw it in your vendor folder and include it outside of bower.
UPDATE
Looks like the version registered with bower is a forked version from the jQuery version where jQuery has been removed: https://github.com/adactio/FitText.js
There is in fact a Bower version of the jQuery version of the library.
bower install FitText.js --save
I think Dave Rupert has a jQuery version in his crates as well.
$ bower install jquery-fittext --save
I am working on jhipster Release 0.7.0 and I have multiple type of directive modules in our jhipster app.first for index page and second for commmon directive.
When we run on Prod profile i got an exception :-
[31mPhantomJS 1.9.7 (Windows 7) ERROR[39m Error: [$injector:nomod]
Module 'common-services' 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.
http://errors.angularjs.org/1.2.11-build.2192+sha.e2173f9/$injector/nomod?p0=common-services
at
D:/github_repo/gather-our-code/src/main/webapp/bower_components/angular/angular.js:1531
same code is working on develop profile ..
Please help me to solve this bug ASAP
The "prod" profile uses JavaScript minification (run by Grunt), which will reduce the size of your JavaScript file.
As this modifies your JavaScript code, it can cause issues, depending on how you write your dependency injection code.
Have you looked at the sample directives that are provided ? Or at the sample controllers ? You must write your dependency injection in the same style.
For example, to inject the $scope:
jhipsterApp.controller('MainController', ['$scope',
function ($scope) {
}]);
This will ensure the minification process won't break dependency injection of the "$scope" variable.
If you can't make it work, you can also exclude your files from the minification process: it depends on your load, but for most applications this is overkill. This is configured in your Gruntfile.js file.