We Keep Coding

Auth0 with Angular 1.5.8 and webpack

I'm trying to integrate Auth0 into my Angular project that I'm bundling with webpack. When I launch the app I get the error:
Error: [$injector:modulerr] Failed to instantiate module auth0.lock due to:
Error: Auth0Lock must be loaded.
My Config.js looks like:
import 'auth0-lock';
import 'angular-lock';
import 'angular-jwt';
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import loginController from 'components/login/login.controller';
import authService from 'shared/auth/auth.service';
const app = angular.module('app',[uiRouter, 'auth0.lock', 'angular-jwt']);
app.config(($stateProvider, lockProvider, $urlRouterProvider, $locationProvider) => {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login',{
url:'/login',
template: require('components/login/login.view.html'),
controller: loginController,
controllerAs: 'vm'
})
lockProvider.init({
clientID: 'xxx',
domain: 'xxx'
});
$locationProvider.html5Mode(true);
});
app.service('authService',authService);
export default app;
And my index.js is
import angular from 'angular';
import appModule from './config';
angular.bootstrap(document, [appModule.name]);
run.$inject = ['$rootScope', 'authService', 'lock'];
function run($rootScope, authService, lock) {
// Put the authService on $rootScope so its methods
// can be accessed from the nav bar
$rootScope.authService = authService;
// Register the authentication listener that is
// set up in auth.service.js
authService.registerAuthenticationListener();
// Register the synchronous hash parser
lock.interceptHash();
console.log('success');
}
I've read on a few places that setting window.Auth0Lock in the webpack config would fix it, but still no luck.
new webpack.ProvidePlugin({
"window.Auth0Lock" : "auth0-lock"
}),
My problem is exactly the same as this question, but alas it remains unanswered. I would appricate any help.
Edit: The below solution doesn't seem to solve my problem and I'm still stuck. I believe I'm requiring all the required dependencies.

So I do need lock.min.js, and when I tried to require it in my config file webpack would throw up. I also tried downloading and requiring the distributable, but that also was giving me problems. I gave up and now I'm referencing the CDN directly on my index.html. I think you can use webpack script-loader as well.
<script type="text/javascript" src="https://cdn.auth0.com/js/lock/10.5/lock.min.js"></script>
<script src="bundle.js"></script>
Hope this helps.

angularjs - ui-router add module

I have a main.html with multiple subpages:users.html,usergroups.html,... which all of them have their own app files and controllers separately: mainapp.js,usersapp.js,usergroupsapp.js,...
And I use ui-router to route to particular sub page as needed:
var myApp = angular.module("myApp",['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('users', {
url: "/users",
templateUrl: "pages/users.html",
controller : 'UsersCtrl'
})
.state('usergroups', {
url: "/usergroups",
templateUrl: "pages/usergroups.html",
controller : 'UsergroupsCtrl'
})
...
Everything works fine until I need to use one of the module multiselect.jsin my usergroups.html. When I added it directly to UsergroupsCtrl in usergroupsapp.js:
var app= angular.module('myApp',['am.multiselect']);
...
But immediately I have an error:
Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
Which MainCtrl is from main app.js.
How can I resolve this issue?

Here is correct way to add am.multiselect module dependency to your main myApp module:
var myApp = angular.module("myApp", ['ui.router', 'am.multiselect']);
In usergroupsapp.js you should just have module getter, not setter (don't recreate module once again). Note, that there are no [...] when you retrieve existing module:
var app = angular.module('myApp');

Failed to load modules

Hello i am trying to develop a web app with angular. I have added the ng-app="appApp" to the html file and also the .js files.
main.controller.js
(function () {
'use strict';
// register the controller as MainController
angular
.module('appApp.main')
.controller('MainController', MainController);
/**
* #ngdoc function
* #name appApp.main.provider:MainController
* #description
* Provider of the {#link appApp.main.controller:MainController MainController}
*
* #param {Service} $scope The scope service to use
* #param {Service} $http The http service to use
*/
// MainController.$inject = [];
function MainController() {
var vm = this;
}
})();
main.js
(function () {
'use strict';
// register the route config on the application
angular
.module('appApp.main', ['ui.router'])
.config(configMainRoute)
// inject configMainRoute dependencies
configMainRoute.$inject = ['$stateProvider', 'mainMenuProvider'];
// route config function configuring the passed $stateProvider
function configMainRoute($stateProvider, mainMenuProvider) {
var mainState = {
name: 'main',
url: '/',
authenticate: true,
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'vm'
};
$stateProvider.state(mainState);
mainMenuProvider.addMenuItem({
name: 'Home',
state: mainState.name,
order: 1
});
}
})();
app.js
(function () {
'use strict';
angular
.module('appApp', [
// Add modules below
'ngCookies',
'ngResource',
'ngSanitize',
'ngMessages',
'ngMaterial',
'ui.router',
'btford.socket-io',
'appApp.main'
])
.config(appConfig)
.run(appRun);
...........
When i run the app i get this errors:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
Uncaught Error: [$injector:nomod] Module 'appApp.main' 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.
How can i fix that errors? Thank you

The first thing is :
In the html you've written
ng-app="appApp"
But in the module definition you've written
angular
.module('appApp.main', ['ui.router'])
The module names should be same unless you've another appApp module and you add the "appApp.main" module as dependency.
Another thing is as you've using "ui-router" you need to link the js library file of ui-router in the html along with angular library file.
Just check the sequence of js files. At first angular, then all library js, then app, main, main controller

I think,
1.You should call ng-app="appApp.main" or
2.You should initially declare appApp module. You should replace some code in main.js
angular.module('appApp.main', []);
angular.module('appApp', [
'ui.router',
'appApp.main'
])...
Also, remove [ui.router] in main.js. It has declared in app.js

MVC4 & AngularJS error when using ngAnimate as a dependency

I'm new to Angular and dependency injection. I'm receiving the following error on page load. I'm attempting to create a form wizard like this example in .Net/MVC4. Any help is greatly appreciated.
Uncaught Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile
Scripts loading in view head:
<script src="#Url.Content("/Scripts/bower_components/angular/angular.js")"></script>
<script src="#Url.Content("/Scripts/bower_components/angular-ui-router/release/angular-ui-router.js")"></script>
<script src="#Url.Content("/Scripts/bower_components/angular-animate/angular-animate.js")"></script>
<script src="#Url.Content("/Scripts/modules/long-form-app-module/LongFormApp.js")"></script>
<script src="#Url.Content("/Scripts/modules/long-form-app-module/LongFormController.js")"></script>
HTML Markup
<div class="application">
<!-- Inject partial view from router -->
<section ui-view></section>
</div>
LongFormApp.js Script
(function () {
'use strict';
// Create our app and inject ngAnimate and ui-router
angular.module('GllApp', ['longFormController'])
.config(function ($stateProvider, $urlRouterProvider) {
// Catch all route
// By default send user to question one
$urlRouterProvider.otherwise('/home');
$stateProvider
// Route to show start of form
.state('home', {
url: '/home',
templateUrl: 'LongForm.html',
controller: 'LongFormController'
})
// Route to show start of form
.state('home.q01', {
url: '/home/q01',
templateUrl: 'LongFormQuestion01.html'
});
});
})();
LongFormController.js Script
(function () {
'use strict';
angular.module('longFormController', ['ngAnimate', 'ui.router'])
.controller('LongFormController', ['$scope', function ($scope) {
// do stuff
}]);
})();

I just fixed this exact problem with my project. The root cause was I was depending on "angular-animate": "~1.3.0", so bower was using Angular v1.3 even though the rest of the project was depending on Angular 1.2.
Just use
"angular-animate": "~1.2.0"
instead of
"angular-animate": "~1.3.0"
in your bower.json file. After a bower install everything should work!

You are creating the module twice, the second one you are loading replaces the first one. I'm not sure what order you want your dependencies in, but you probably just want one app:
var myGllApp = angular.module('GllApp', ['ngAnimate', 'ui.router']);
And load your controller script later and add it to your exising module by not passing the dependency list to angular.module:
angular.module('GllApp')
.controller('LongFormController', ['$scope', function ($scope) {

I've refactored the code you posted and added comments. Try this and see if you receive another error?
This is assuming you are loading: First Snippet > Second Snippet
(function () {
//use this inside of the SC function or else use strict will be used globally
//and cause unexpected results
'use strict';
// Create our app and inject ngAnimate and ui-router
// You don't need to create this variable if it is for scoping reasons,
// since you have already created a defined scope within the Self-Calling function
angular.module('GllApp', ['ngAnimate', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
// Catch all route
// By default send user to question one
$urlRouterProvider.otherwise('/home');
$stateProvider
// Route to show start of form
.state('home', {
url: '/home',
templateUrl: 'form.html',
controller: 'LongFormController'
})
// Route to show start of form
.state('home.q01', {
url: '/home/q01',
templateUrl: 'form-q01.html'
});
});
})();
(function () {
'use strict';
angular.module('GllApp', ['ngAnimate']) //since you are not using stateProvider here you do not need to inject ui.router
.controller('LongFormController', ['$scope', function ($scope) {
// do stuff
}]);
})();

How can I load module on demand?

I know I can load modules (dependencies) in AngulrJS when bootstrap the app like this:
var app = angular.module('myApp', [
'ngSanitize',
'ionic',
]);
I want to load some modules on the given controller, not global.
For example I have two controllers:
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'partials/index',
controller: IndexCtrl
})
.state('addPost', {
url: '/addPost',
templateUrl: 'partials/addPost',
controller: AddPostCtrl
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
});
I want to load ui.tinymce module in AddPostCtrl controller only, so I can use tinymce editor on addPost page. But I don't want to load ui.tinymce when I visit index page.
Is there any way to do it?

You nee to use AngularAMD, it lets you create angular objects on demand:
http://marcoslin.github.io/angularAMD/#/modules
http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs