Develop Reference

angularjs ngTable "Module not found: Error: Can't resolve 'angular'" with webpack

I have the error Module not found: Error: Can't resolve 'angular' after adding ng-table.js to my angular module.
The error is referring to this part in ng-table.js
if (typeof define === 'function' && define.amd) {
define(['angular'], function(angular) {
return factory(angular);
});
} else {
return factory(angular);
}
my webpack/angular looks something like this
'use strict';
import './../bower/angular/angular.min.js';
import './../bower/ng-table/dist/ng-table.js';
window.app = angular.module('appName',["ngRoute", "ngTable"]);
// routes
app.config(function ($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'home',
templateUrl: 'partials/views/home.html',
activeClass: 'home'
})
.otherwise({
templateUrl:'partials/views/404.html'
});
$locationProvider.html5Mode(true);
});
require('./ng-controller.js');
Do you know why I need to require('angular') or how to fix this?

Can't inject constant to another module config

The problem is I can't insert constant from one module to another's module config.
Main app:
'use strict';
angular.module('identicaApp', [
'ngRoute',
'identicaApp.common',
'identicaApp.mainPage',
'identicaApp.aboutPage',
'identicaApp.registerPlayer'
]).config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/main'});
}]);
common.js:
angular.module('identicaApp.common', [])
.constant('ROOT_PATH', '/static/angular/identica/');
and the problem module:
'use strict';
angular.module('identicaApp.mainPage', [
'ngRoute',
'identicaApp.common'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/main', {
templateUrl: common.ROOT_PATH + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])
.controller('MainPageCtrl', [function() {
}]);
common.ROOT_PATH is not visible by loader...

I think you missed to inject the actual constant to your config call (e.g. the same way you inject services to controllers), and then you have to reference it by it's name:
'use strict';
angular.module('identicaApp.mainPage', [
'ngRoute',
'identicaApp.common'
])
// Here you must inject your 'ROOT_PATH' constant
.config(['$routeProvider', 'ROOT_PATH', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH + 'main_page/main_page.html', // You must reference it by its name (ROOT_PATH)
controller: 'MainPageCtrl'
});
}])
.controller('MainPageCtrl', [function() {
}]);

You need to include the constant and use it like this:
.config(['$routeProvider', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])
If you want to have multiple constant "variables" under ROOT_PATH do it like this.
angular.module('identicaApp.common')
.constant('ROOT_PATH', {
'URL': '/static/angular/identica/',
'NAME': 'Test',
'ANOTHER_THING': 'Something'
});
Then you can use it this way:
.config(['$routeProvider', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH.URL + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])

How can I call the external module in mean stack application

Here i have created an external module "lang-change" in which i created one service and one directive.
bower_components/lang-change/lang-change.js
angular.module('langChange', [
'angular-translate'
])
.service('MyService', function ($translate, $rootScope, tmhDynamicLocale) {
.............
.............
.............
})
.directive('LanguageChangeSelect', function (MyService) {
'use strict';
return {
.............
.............
.............
};
});
I created this module seperately and link this to bower_components, but when I am using this in my app.js, I am getting error.
error
angular.js:12783 Error: [$injector:unpr] Unknown provider: langChangeProvider <- langChange
app.js
(function() {
'use strict';
angular.module('myApp', [
'ngSanitize',
'ui.router',
'ui.bootstrap',
'pascalprecht.translate',// angular-translate
'tmh.dynamicLocale'// angular-dynamic-locale
])
.config([
'$stateProvider',
'$urlRouterProvider',
'$injector',
'$translateProvider',
'tmhDynamicLocaleProvider',
function(
$stateProvider,
$urlRouterProvider,
$injector,
$translateProvider,
tmhDynamicLocaleProvider
) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html'
})
.state('myapp', {
url: '/myapp',
templateUrl: 'views/myapp.html',
controller: ['$scope', '$state', '$rootScope', '$translate', 'langChange',
function($scope, $state, $rootScope, $translate, langChange) {
// Code goes here
}]
});
}
]);

Angular applications powered by Requirejs - Argument '(contoller)' is not a function, got undefined?

I am trying to work on an Angular application powered by RequireJS, but I am not able to split up the controller files as I keep getting an error of Argument '(contoller)' is not a function, got undefined. Any idea what have I done wrong?
app/main.js,
require.config({
baseUrl: "",
// alias libraries paths. Must set 'angular'
paths: {
'domReady': 'bower_components/requirejs-domready/domReady',
'angular': 'bower_components/angular/angular',
'angular-route': 'bower_components/angular-route/angular-route',
'jquery': 'bower_components/jquery/dist/jquery'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
exports: 'angular'
}
},
// kick start application
deps: ['app/bootstrap']
});
app/app.js,
define([
'angular',
'angular-route',
'jquery'
], function (ng,ngRoute,$) {
'use strict';
console.log($('h1').length);
return ng.module('app', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'view/home.html',
controller: 'HomeCtrl',
controllerUrl: 'app/home'
});
$routeProvider.when('/view1', {
templateUrl: 'view/view1.html',
controller: 'View1Ctrl',
controllerUrl: 'app/view'
});
//$routeProvider.otherwise({redirectTo: '/home'});
}]);
});
app/home.js,
define(['app/app'], function (app) {
app.controller('HomeCtrl', function ($scope) {
$scope.message = "Message from HomeCtrl";
});
});
error,
Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
But if I concat the controllers after ng.module('app', ['ngRoute']).config(...) then they work fine,
app/app.js,
define([
'angular',
'angular-route',
'jquery'
], function (ng,ngRoute,$) {
'use strict';
console.log($('h1').length);
return ng.module('app', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'view/home.html',
controller: 'HomeCtrl',
//controllerUrl: 'app/home'
});
$routeProvider.when('/view1', {
templateUrl: 'view/view1.html',
controller: 'View1Ctrl',
//controllerUrl: 'app/view'
});
//$routeProvider.otherwise({redirectTo: '/home'});
}]).controller('HomeCtrl', function ($scope) {
$scope.message = "Message from HomeCtrl";
}).controller('View1Ctrl', function ($scope) {
$scope.message = "Message from View1Ctrl";
});
});
Why??

This seems to be a problem with the load order of your JS files. You are defining the HomeCtrl in app/home.js and using it it app/app.js. So make sure that home.js is loaded before app.js in your web app.
Split the app.js into two parts - one for just creating the ng.module (module.js), and one for setting the config (module-config.js). Then the dependency tree will be:
app/module-config.js
requires: app/home.js
requires: app/module.js

How to link to different page using Angular framework in my case?

I am using angular to provide the link for my page.
I have something like
//main app configuration
app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(['$routeProvider', function($routeProvider) {
}]);
//test page configuration
test-controller.js
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.
when('/test/:link', {
templateUrl: 'test/:link.html',
constroller: 'Ctrl'
}).
when('/test2/:link', {
templateUrl: 'test2/:link.html',
constroller: 'Ctrl'
})
}).
controller('Ctrl', ['$scope', function ($scope) {
//scope data
}])
for some reason, the $routeprovide in my test-controller.js doesn't work and output module injection error.
Can anyone help me about it? Thanks a lot!

At first glance, it is because you didn't add 'ngRoute' as dependency in the second definition