I'm trying to get my head around using the new capabilities in Angular 1.5 and also using Webpack and ES6 via Babel.
In one case, I want to bring in a module (ngStorage), but ngStorage is written in classic 1.x style. So this file:
import angular from 'angular';
import ngStorage from 'ngstorage';
import UserSettings from './user-settings';
import UserFactory from './user.factory';
let userModule = angular.module('user', [ngStorage])
.service('UserSettings', UserSettings)
.factory('User', UserFactory);
export default userModule;
results in this error at runtime:
Error: [$injector:modulerr] Failed to instantiate module user due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":[["$provide","provider",{"0":"$localStorage"}],["$provide","provider",{"0":"$sessionStorage"}]],"_configBlocks":[],"_runBlocks":[],"requires":[],"name":"ngStorage"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
I'm guessing that I just can't import from ngstorage - it doesn't export anything. Is there a way I can shim 1.x dependencies in order to import them?
Related
I am struggling to include stomp in my project. With both versions jmesnil/stomp-websocket or the subspequent forkJSteunou/webstomp-client.
I tried to import properly:
import Stomp from 'stompjs';//or 'webstomp-client';
import SockJS from 'sockjs-client';
and to load it like:
angular.module('app', [
uiRouter, ngTranslate, ngTranslateStaticFilesLoader, ngResource, ngFilter,
uiBootstrap, Stomp, SockJS
])
But I get the following error (with both versions):
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"VERSIONS":{"V1_0":"1.0","V1_1":"1.1","V1_2":"1.2"}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
(Even if webstomp.js has "function webpackUniversalModuleDefinition(root, factory) " on top, which apparently is not fullfilling its purpose)
It is possible to bypass this errors by importing it "wildly" directly on top the controllers where used, but then all karma tests are not running (error is : Error: Cannot find module "net"), even though node: { net: 'empty', tls: 'empty', dns: 'empty' } is added to webpack.config.js.
At this point anything I am trying just feels like weird black magic.
Is there a "constellation" of lib versions, angular wrappers, etc that is know to work properly with my setup (angular 1.5 / es6 / webpack 1.14 / karma) ?
Do not add it as a dependency to your angular module. The Stomp library is not an angular module. There might be a bridge available, but I don't think it is necessary.
To use Stomp with Webpack 2, simple require it at the tomp of the file where you are using Stomp and then use it as if it was a global variable.
const Stomp = require("stompjs/lib/stomp.js").Stomp;
Inside your controller/service:
Stomp.client(...);
Edit
This solution will be a bit more difficult to unit test, because you will not be able to replace the dependency easily the "angular way". To solve that issue, you might define it in your main module file as a constant and than use the DI provided by AngularJS.
Main Module File
const Stomp = require("stompjs/lib/stomp.js").Stomp;
angular
.module('app', [
// dependencies
])
.constant('Stomp', Stomp)
// other controllers/services/etc.
Controller/Service
function MyController(Stomp) {
Stomp.client(...);
}
I'm trying to upgrade an Angular1.4.0 app to use the latest angular-ui-router, but I can't figure out how to reference this package in code. I'm using webpack 1.12.9 and node 6.10.2. I've installed package "#uirouter/angularjs" version 1.0.3.
Using CommonJs modules, the following used to work with version 0.2.14:
require('angular-ui-router')
I've tried variants of the following, but with no luck:
require('#uirouter/angularjs/lib')
I am getting the error:
Error: [$injector:modulerr] Failed to instantiate module {"core":`{"services":{},"Category": ..... (remaining stack omitted)
Any ideas?
May be this is necroposting but:
I am facing with same issue right now so here is the answer:
Try to use uiRouter.default package when register dependencies.
Like here:
import * as uiRouter from 'angular-ui-router';
const dependencies = [uiRouter.default];
const app = angular.module('app', dependencies);
I'm trying to get ng-file-upload to work with my angularjs project, which uses webpack. I installed ng-file-upload via npm and added it to my main app.js
var ngFileUpload = require('../../node_modules/ng-file-upload/dist/ng-file-upload.min');
module.exports = angular.module('app', [ngFileUpload])
But I'm still getting:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
Could anyone tell me what I'm doing wrong, since I tried to find any information about this with no success.
Look for what ngFileUpload is exporting and what's the name of module. Right now you are injecting the module inside angular dependency but you need to just give name of your ngFileUpload module not the ngFileUpload it self. That's why you are getting this error. It's expecting a name of module but getting a object instead.
I'm converting an Angular 1.5 project to TypeScript and ran into a problem importing angularTranslate.
I try to import both angular and angular-translate like this:
import * as angular from "angular";
import * as angularTranslate from "angular-translate";
console.log(angular, angularTranslate);
I'm using typings installed from DefinitelyTyped/angular-translate.d.ts.
When I compile with TypeScript 1.8 (module: "commonjs") it emits this JavaScript:
"use strict";
var angular = require("angular");
console.log(angular, angularTranslate);
As you can see it has dropped the angularTranslate import even though it's referenced, and the similarly used angular import is preserved. This results in a runtime error ReferenceError: angularTranslate is not defined. This works fine with Babel. How should I import angularTranslate?
Edit:
This also emits nothing:
import angularTranslate = require("angular-translate");
But this emits the expected output:
let angularTranslate = require("angular-translate");
Is there something wrong with the angular-translate module that makes it impossible to use with import in TypeScript?
The problem is that "angular-translate" module exports a namespace. As a temporal solution you can reference old version of angular-translate.d.ts or fork and fix it manually.
angular 1.5 doesn't support module structure of JS nor UMD (it has his own module system). So if you import something from "angular" you are importing just types from definitly typed file from ambient module declaration and typescript transpiler is able to recognize that there is no need to emit CommonJS import definition to resulted JS (only declaration is imported). But in case that you directly define import by CommonJS required syntax (or by ES6 import "module") you create side-effect import which executes angular script when module loader or bundler loads required module.
// Import angular translate
import angularTranslate from 'angular-translate';
then don't use the quotes:
var app = angular.module('myApp', [angularTranslate]);
I am making an app using angular and ionic. I am doing facebook login and I have the following code in app.js init:
var app = angular.module('app', ['... 'ezfb', 'hljs']);
app.config('ezfbProvider', function (ezfbProvider) {
/**
* Basic setup
*
* https://github.com/pc035860/angular-easyfb#configuration
*/
ezfbProvider.setInitParams({
appId: 'iddddddd'
});
});
And I have added a reference to bundle about angular-easyfb.min.js and angular-easyfb.js
But I still get an error on the console saying :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module hljs due to:
Error: [$injector:nomod] Module 'hljs' 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.
Whats the problem I don't get it ?
The problem is that you need to have something call angular.module("hljs", [...]) before you can create your own module that depends on "hljs".
I'm guessing that you haven't included a "hljs" angular module, or that you have but the script tag for it does not appear before the script tag for your own module.