Angular JS 1 - Error when add framework - javascript

I already use Angular JS 1 in my projects and always works.
But I recieved one project that is using python and django and some pages are using angular, the page that I need to work have no angular code, then I put the call for the main script:
<script src="/static/angular/1.5.5/angular.min.js"></script>
And I get the following error:
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=public&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.5%2F%24injector%2Fnomod%3Fp0%3Dpublic%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A6%3A412%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A25%3A235%0A%20%20%20%20at%20b%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A24%3A282)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A25%3A20%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A39%3A374%0A%20%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20bb%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A21%3A19)%0A%20%20%20%20at%20yc%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A21%3A332)
Note: I have created nothing yet, nor app.js neither controller.js
I changed for the angular no minified and the error is more especific:
Error: [$injector:nomod] Module 'public' 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
Thanks for any suggestion

I discovered what happened, someone write in a hide pag a ng-controller="public". for this, angular was saying no have this controller.

Related

Failed to execute 'define' on 'CustomElementRegistry':

I'm facing the following issue. I've started migrating my app to react and i've created my first module. So I have my legacy code which is loading my react app bundle.js so I can use the new react module.
When I use my navigation to go to the new react module everything works fine. When I use the same link again I get the following error and the page is blank:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "input-mask" has already been used with this registry
Any suggestions to fix this problem?
I had the same error. These two references coexisted in the same javascript file.
require("inputmask");
require("inputmask/dist/jquery.inputmask.js");
Removing the first one solved the issue for me.

require module error in a Controller

I've been trying to understand how to set up Stripe for my app but am having problems with the implementation of the module. Normally when using a module i would require it in the top of the file to be able to use it but when i do it in the paymentCtrl file it doesn't work and i get the two errors below: where am i supposed to declare it for me to be able to use it? Well as you see i'm quite new to this and would like to understand how to structure this so that the payments work.
errors:
require is not defined
at paymentCtrl.js:1
and
Failed to instantiate module paymentController due to:
Error: [$injector:nomod] Module 'paymentController' 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.
paymentCtrl:
var stripe = require('stripe')('sk_test_....');
angular.module('paymentController', [])
.controller('paymentCtrl', function($scope) {
});
app.js:
angular.module('userApp', ['appRoutes', 'userControllers', 'userServices', 'ngAnimate', 'mainController', 'authServices', 'managementController', 'paymentController'])
.config(function($httpProvider) {
$httpProvider.interceptors.push('AuthInterceptors');
});
Stripe's Node.js library is meant to be used in server-side code. You should not embed it in client-side code, as doing so would reveal your secret API key.
In your client-side code, you can use Checkout or Elements to collect and tokenize payment information.

angular with datatables injector error

I'm trying to get angularjs working with jquery datatables, i'm using the samples found here:
https://l-lin.github.io/angular-datatables/#/angularWay
I've included the required scripts, but when I update my module to include datatables I get an error:
var testModule = angular.module("testModule", ['ngResource', 'ngRoute', 'ngSanitize', 'datatables']);
I get the following error:
Uncaught Error: [$injector:modulerr]
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.
removing the 'datatables' from there and it works but without datatables. I've included the below scripts in the following order:
jquery.min.js
jquery.dataTables.min.js
angular.min.js
angular-datatables.js
test-module.js
In the examples I don't see anything to indicate where the datatables would come from it not from the angular-datatables.js file.
it looks like "datatables" module may not have been registered. How are you loading you JS files ?

Failed to instantiate module ngJoyRide

I am using ng-joyride for the first time.
I did bower install ng-joyride --save. And included it in my modules along with other modules like :
angular.module('some', [ 'ionic','ngJoyRide','ui.router',])
And now I am not able to see the view part of my app. And the console says
Uncaught ReferenceError: jQuery is not defined
and
Uncaught Error: [$injector:modulerr] Failed to instantiate module XYZ due to:
Error: [$injector:modulerr] Failed`enter code here` to instantiate module main due to:
Error: [$injector:modulerr] Failed to instantiate module ngJoyRide due to:
Error: [$injector:nomod] Module 'ngJoyRide' 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.
But before including ngJoyRide, I didn't get any issue with Jquery.
script tag with jquery in my index.html looks like :
<script src="bower_components/jquery/dist/jquery.js"></script>
I sense this might be a very silly mistake done by me. But not sure where I went wrong, help is much appreciated.
Thanks in advance.

How to avoid or skip module load error in Angular.js?

//index.html
<html ng-app="app">
//app.js
angular.module('app', 'test-module')
If I don't register the test-module in any of my scripts like below:
angular.module('test-module', [])
I will get errors below in brower and the whole website will not be loaded:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module test-module due to:
Error: [$injector:nomod] Module 'test-module' 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.
Q: How to ensure the website page will be loaded even through there are any unknown modules loaded errors ?
I think you should look on this problem from other side.
If you use test-module (module for testing) you in development process. You could configure your backend for work in several environments. For example dev, test and prod. You can handle sub domain and decide on backend which modules need to be loaded. dev.yourdomain.com (for dev environment), yourdomain.com (for production environment) and test.yourdomain.com (for tasting).
You can generate such script:
<script type="text/javascript">
var MyModules = ['test-module'];
</script>
And handle it so:
angular.module.apply(angular, 'app', MyModules);
I found solution to you answer :)
Angular have array of requires for each module, so you can easily push some requires if you want to use this module.
In your case you can do this
//index.html
<html ng-app="app">
//app.js
angular.module('app', [])
//test-module.js
angular.module('test-module', [])
angular.module('app').requires.push('test-module');
So if you load test-module.js to your browser, you automatically inject dependency to your app.

Categories