Angular 6 Module - angular not defined - javascript

im very new to Angular and i started a test Project with Angular Cli.
All works fine but i have installed a 3.rd Party Module (angular-ui-carousel).
Now i get following error:
Uncaught ReferenceError: angular is not defined
at Module../node_modules/angular-ui-carousel/dist/ui-carousel.js (ui-carousel.js:21)
ui.carousel.js (only the first rows..)
'use strict';
(function (angular) {
// Create all modules and define dependencies to make sure they exist
// and are loaded in the correct order to satisfy dependency injection
// before all nested files are concatenated by Gulp
// Config
angular.module('ui.carousel.config', []).value('ui.carousel.config', {
debug: true
});
// Modules
angular.module('ui.carousel.providers', []);
angular.module('ui.carousel.controllers', []);
angular.module('ui.carousel.directives', []);
angular.module('ui.carousel', ['ui.carousel.config', 'ui.carousel.directives', 'ui.carousel.controllers', 'ui.carousel.providers']);
})(angular); //error points here
'use strict';
is there any workaround to run this module in Angular 6?

You're confusing Angular and AngularJS.
angular. references are applicable to AngularJS(AngularJS 1.x)
And Angular(Angular 2+) don't have angular. references.
angular-ui-carousel is a library for AngularJS and NOT Angular
Please consider using some other library that is meant for Angular, like ng-simple-slideshow

Related

How to inject ngRoute into Jasmine / Karma AngularJS unit test?

I'm trying to get a basic unit test example working. It all works fine with this app.js
var whapp = angular.module('whapp', [])
.filter('reverse',[function(){
return function(string){
return string.split('').reverse().join('');
}
}]);
and this spec.js
describe('Filters', function(){ //describe your object type
beforeEach(module('whapp')); //load module
describe('reverse',function(){ //describe your app name
var reverse, rootScope;
beforeEach(inject(function($filter){ //initialize your filter
reverse = $filter('reverse',{});
}));
it('Should reverse a string', function(){ //write tests
expect(reverse('rahil')).toBe('lihar'); //pass
});
});
});
with this karma files config
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-mocks/angular-route/angular-route.js',
'node_modules/angular-mocks/angular-ui-router/release/angular-ui-router.js',
'app/js/*.js',
'tests/*.js'
]
The problem occurs when I try to inject ngRoute into my module in app.js like so
var whapp = angular.module('whapp', ['ngRoute'])
.filter('reverse',[function(){
return function(string){
return string.split('').reverse().join('');
}
}]);
In which case I get the following error in karma [UPDATE: this error occurs even if I don't load the angular-mock.js library into karma as shown above]
TypeError: undefined is not a constructor (evaluating 'reverse('rahil')') in tests/spec.js (line 9)
So... how do I inject ngRoute into spec.js correctly? I've tried a variety of things, none of which worked.
Apparently, you get this error because PhantomJS fails to instantiate your main Angular module whapp. One possible reason is, that the file node_modules/angular-mocks/angular-route/angular-route.js is missing.
Obviously, you are using npm to manage your dependencies. So try to replace your current file with:
node_modules/angular-route/angular-route.js
The same for the ui-route module:
node_modules/angular-ui-router/release/angular-ui-router.js
I hope this will help you.

Adding Webpack to an existing Angular app

I'm working on an existing (and working) Angular 1.5.5 app. It's very small and has a controller, a directive and a couple of services, all split into individual files.
I'd now like to move to Webpack and make the minimum number of changes to the app to support that. A lot of the Webpack/Angular demos I've found have been about creating a new Angular app with web pack built in from the start, but I don't want to rebuild the existing app, just make whatever changes are necessary to use a webpack-produced bundle. It's also using regular JS, whereas most of the tutorials I've seen are for ES6.
I've got grunt-webpack installed and working, it's creating the bundle.js file and I can see inside the bundle that it's pulling in Angular, Angular-aria and Angular-animate (my module dependencies)
However, when I run the site I see an error:
Uncaught TypeError: angular.module is not a function
My webpack task is as follows:
module.exports = {
dist: {
entry: './Static/js/Ng/app.js',
output: {
path: './Static/dist/js',
filename: 'bundle.js'
}
}
};
As I say, the actual Webpack bundling seems to be working as expected and creates the bundle.js file.
The main entry file (app.js) is as follows:
(function () {
'use strict';
var angular = require('../vendor/angular.js');
var ngAria = require('../vendor/angular-aria.js');
var ngAnimate = require('../vendor/angular-animate.js');
angular.module('app', [ngAria, ngAnimate]);
}());
If I log out the angular variable in this file, it's just an empty object, even though I can see the Angular source in the bundle.
What am I missing?
You probably shadow the global angular property by your local var angular variable. Try this:
(function () {
'use strict';
require('../vendor/angular.js');
require('../vendor/angular-aria.js');
require('../vendor/angular-animate.js');
angular.module('app', [ngAria, ngAnimate]);
}());

Foundation for apps: Creating separate files for angularjs controllers, services etc

I just got started with Foundation for Apps, but I was having trouble adding my angular controllers in a separate folder and using them.
I have this current structure in my assets' js folder:
js/
app.js //this has all the controllers etc. by chaining
but I want it to be
js/
app.js
controllers/
home.controller.js
main.controller.js
I don't want to keep a single large js file developed by chaining my controllers, services etc. I want a more modular structure as specified.
When I changed it to the modular structure, I got following three errors:
1. 'HomeCtrl' not defined.
2. Uncaught SyntaxError: Unexpected token < at the 1st line of home.controller.js
3. Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8079/assets/js/home.controller.js". at the point where I am including 'home.controller.js' in index.html
Here's my template:
---
name: home
url: /
controller: HomeCtrl
---
<div class="grid-container">
<h1>Welcome to Foundation for Apps!</h1>
<p class="lead">This is version <strong>1.1 Weisshorn</strong>.</p>
</div>
home.controller.js:
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.temp = 'hello';
}]);
app.js:
var app = angular.module('application', [
'ui.router',
'ngAnimate',
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
}
function run() {
FastClick.attach(document.body);
}
To solve this I tried adding my controller reference in gulpfile.js by referring this
I also referred this but I still cannot get it to work. Any idea what I am doing wrong?
Inside gulpfile.js check this line. You'll see that only client/assets/js/app.js is used when coupling your minimized file. You need to make it copy all your controller's .js files too :
// These files are for your app's JavaScript
appJS: [
'client/assets/js/app.js',
'./client/assets/js/controllers/*.js',
]
You can also use an angular module to hold all your controllers & services then injecting it to your app module. This is how I'm using it here and this is how it is also done in this great ready to use Fork : https://github.com/CreativityKills/foundation-apps-template
Note: remember to restart gulp after each modify of its config file and check if your code has been well included in the built JS file ( by default is /build/assets/js/app.js )

Uglifyjs changes Angular scripts

To compress js files via gulp I have tried using both gulp modules
gulp-uglifyjs
gulp-uglify
but it changes the variable I define.
for eg:
var app = angular.module('myApp', [])
.config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[').endSymbol(']}');
});
is compressed to:
var app = angular.module("myApp",[])
.config(function(n){n.startSymbol("{[").endSymbol("]}")});
while using Angularjs with Twig I have to change the mustaches {{ }} to {[ ]} and the angularjs doesn't recognize the n instead of $interpolateProvider.
Any suggestions how to tell uglifyjs not to change my variables while compression?
This is when you need to include ng-min task into your build as well as it will protect your angular from minification problems.
Or by hand, but thats just silly...
var app = angular.module('myApp', []).config(['$interpolateProvider', function($interpolateProvider){
$interpolateProvider.startSymbol('{[').endSymbol(']}');
}
]);
Some docs on Angular minification issues scroll down to 'A Note on Minification.'

Angular ngResource still not recognising $resource

My app has this line at the top, like most angular apps. I assume here it's pulling in ngRoute and ngResource
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngResource']);
how ever I create a service below:
myApp.factory('NewsService', function($resource) {
return $resource('/api/news/:id', {id: '#id'}, {update: {method: 'PUT'}})
})
and in my console I get this message:
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- NewsService
In my angular folder I have all the js files associated with angular, from angular-animate.js through to angular-touch.js including obviously angular-resource.js, I'm wondering why it is complaining, or what I can do to narrow down to the specific error.
I'm not using the min files at the moment because the errors aren't verbose enough.
In my controllers I just do this:
function newsCreateController($scope, NewsService) {}
You need to make sure you include the appropriate angular files, and application files in your index.html, eg:
<!-- angular related files -->
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular-resource/angular-resource.js"></script>
<!-- application related files -->
<script src="/apps/myapp/services/newsservice.js"></script>
<script src="/apps/myapp/app.js"></script>
Obviously this is an example, and depends on your file structure.
Once everything is included, you need to make sure your modules are setup correctly, and injected accordingly.

Categories