It looks like I can't instantiate my module. Here is my files :
--tv
-- contents (folder)
-- contents.template.html
-- contents.component.js
-- index.html
-- bootstrap.js
Now, here's the code :
Contents.component.js :
angular
.module('contents', [])
.component('myContents', {
controller: contentController,
templateUrl: 'contents/content.template.html',
});
function contentController() {
console.log('Le content est appelée !');
}
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TV</title>
<!-- SCRIPT DE CONNEXION -->
<script src="bower_components/angular/angular.js"></script>
<script src="bootstrap.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
</head>
<body ng-app="app">
<my-contents></my-contents>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>
Finally bootstrap.js :
angular
.module('app', ['ngComponentRouter', 'contents'])
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
})
.value('$routerRootComponent', 'myApp')
.component('app', {
});
And the error catched in the browser console :
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module contents due to:
[$injector:nomod] Module 'contents' 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.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=contents
minErr/<#http://127.0.0.1:8080/bower_components/angular/angular.js:68:12
module/<#http://127.0.0.1:8080/bower_components/angular/angular.js:2082:17
ensure#http://127.0.0.1:8080/bower_components/angular/angular.js:2006:38
module#http://127.0.0.1:8080/bower_components/angular/angular.js:2080:14
loadModules/<#http://127.0.0.1:8080/bower_components/angular/angular.js:4617:22
forEach#http://127.0.0.1:8080/bower_components/angular/angular.js:321:11
loadModules#http://127.0.0.1:8080/bower_components/angular/angular.js:4601:5
loadModules/<#http://127.0.0.1:8080/bower_components/angular/angular.js:461
I made a copy/paste of another project that I built yesterday that works. I have no idea why it's not working.
You are bootstrapping your app, then you load the contents script. Change their order, like this:
<script src="bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
<script src="bootstrap.js"></script>
Related
Hey I want to use this module into mine :
https://github.com/720kb/angular-datepicker
I include css here :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/19f59abbe2.js"></script>
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
<link rel='stylesheet' href='/stylesheets/main.css' />
<link href="/stylesheets/sass/vendors/font-awesome.min.css" rel="stylesheet">
</head>
<body>
and on end body :
</div>
<% include partials/footer.ejs %>
<script src="/javascripts/angular-datapicker.js"></script>
</body>
</html>
And when I open page in console I see error :
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module 720kb.datepicker due to:
[$injector:nomod] Module '720kb.datepicker' 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.
http://errors.angularjs.org/1.6.4/$injector/nomod?p0=720kb.datepicker
also I add inside module :
angular.module('app', ['angular.datepicker'])
How can I repair this?
EDIT:
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/angular-datapicker.js"></script>
<script src="/javascripts/angular-datepicker.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
Why the top link of angular-datapicker.js is showing error "cant include script" in console where second link bottom loading, and all is ok? if that is the same?
This is a complete stab in the dark, as you have not provided any reproducible sample.. but by just looking at the snippet you're provided... my best guess is that you're not using any dependency managers etc, and thus are relying on the order of when your scripts are loaded.
If you're app is then inside the body of the app... and you then only load the date-picker at the end... you'd see the problem you're experiencing.
You also have a typo in your file name.
A potential solution could be:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/19f59abbe2.js"></script>
<script src="/javascripts/angular.js"></script>
<!--move the datapicker script to here-->
<script src="/javascripts/angular-datepicker.js"></script>
<!--rest omitted for brevity-->
</head>
You've misspelled it to angular-datApicker.js
It should be angular-datEpicker.js
I am doing a simple angular 2 tutorial, but i just get 'loading' when trying to run my app.
this is my index.html file
<html>
<head>
<title>Angular CV </title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Still Loading...</my-app>
</body>
</html>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: ''
})
export class AppComponent {
}
full code here: https://github.com/trinajoy/angularcv
Angular-cli changed their system from SystemJS to Webpack since beta.14. It seems you're still using SystemJS, though.
You can migrate to Webpack following these instructions. However, as you're just following a tutorial, I'd recommend to install angular-cli from scratch.
I'm doing some tests with Angular, and wanted to try this cool library to make a test applcation, but it's not working:
ReferenceError: Chart is not defined angular-chart.js:13:5 Error:
[$injector:modulerr]
http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=chartist&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.1%2F%24injector%2Fmodulerr%3Fp0%3Dchart.js
This is my HTML template:
<!DOCTYPE HTML>
<html ng-app="chartist">
<head>
<meta charset="UTF8">
<!-- Plugins/Frameworks !-->
<script type="text/javascript" src="plugins/angular.js"></script>
<script type="text/javascript" src="plugins/angular-route.js"></script>
<script type="text/javascript" src="plugins/angular-chart.js"></script>
<!-- JS !-->
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<!-- <script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/services.js"></script> !-->
<!-- Stylesheets !-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/angular-chart.css">
</head>
<body>
<div ng-view>
</div>
</body>
</html>
And I inject the dependency in the module by this way:
var app = angular.module('chartist', ['ngRoute', 'controllers', 'chart.js']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: 'templates/main.html',
controller: 'mainCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
Why can't I use Chart.js? Is some version problem? I will be glad is someone helps.
If you closely look at error, it does clearly said that
ReferenceError: Chart is not defined angular-chart.js:13:5 Error:
[$injector:modulerr]
Basically angular-chart.js doesn't work stand alone API. It is just wrapper directive to make it compatible very easily with AngularJS code. If you look at angular-chart.js code, you will come to know that it uses Chart object, which is come from chart.js API.
To fix you problem you need to add chart.js reference before angular-chart.js as, Chart object will available render chart.
So do add chart.js cdn reference reference before angular-chart.js to make your code working.
I'd also prefer you to go through the angular-chart.js Getting started Doc
Sample Here
I have been using angular-chart.js with my app locally and I have not had a problem. However, when I deploy my app on Heroku, I my page breaks because it Chart.js is not deployed properly.
Uncaught SyntaxError: Unexpected token < Chart.min.js:1
Uncaught ReferenceError: Chart is not defined angular-chart.min.js:1
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.6/$injector/modulerr?p0=swellsApp&p1=Error%…swells.herokuapp.com%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A463) angular.min.js:38
I don't get these error when I run it on my local server. I'm sourcing the scripts properly and have included my dependencies in my app as well. What I don't understand is that my other scripts have been loading with no problem. It's just Chart.js that is giving me the issue...
Any thoughts???
What I see under Resources in Chrome's DevTools
index.html
<head>
<meta charset="utf-8">
<title>Swells</title>
<!-- For Angular Routing -->
<base href="/">
<!-- CSS -->
<link rel="stylesheet" href="public/assets/libs/normalize-css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/darkly/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="assets/libs/angular-chart.js/dist/angular-chart.min.css">
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- JAVASCRIPT LIBS -->
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular-route/angular-route.min.js"></script>
<script src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script src="assets/libs/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="assets/libs/angular-messages/angular-messages.min.js"></script>
<script src="assets/libs/Chart.js/Chart.min.js"></script>
<script src="assets/libs/angular-chart.js/dist/angular-chart.min.js"></script>
<!-- MAP API -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Controllers -->
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/userCtrl.js"></script>
<script src="app/controllers/mapCtrl.js"></script>
<script src="app/controllers/surfCtrl.js"></script>
<script src="app/controllers/weatherCtrl.js"></script>
<script src="app/controllers/surfReportCtrl.js"></script>
<!-- Services -->
<script src="app/services/authService.js"></script>
<script src="app/services/userService.js"></script>
<script src="app/services/surfService.js"></script>
<script src="app/services/weatherService.js"></script>
<script src="app/services/surfReportService.js"></script>
<!-- Main Angular Files -->
<script src="app/routes.js"></script>
<script src="app/app.js"></script>
<!-- SET VEIWPORT FOR MOBILE -->
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
</head>
app.js
angular.module('swellsApp', [
'appRoutes',
'authService',
'userService',
'surfService',
'weatherService',
'surfReportService',
'mainCtrl',
'userCtrl',
'surfCtrl',
'mapCtrl',
'surfReportCtrl',
'weatherCtrl',
'ngMessages',
'ngAnimate',
'ui.bootstrap',
'chart.js'
])
//application configuration to integrate tokens into our requests
.config(function($httpProvider){
//attach auth interceptor to the http requests
$httpProvider.interceptors.push('AuthInterceptor');
});
I found an alternate solution to this problem. I sourced a CDN for Chart.js and that worked. It seems that Chart.js was deploying with my app for some reason so I decided to source it from a cdn and that did the trick
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
I ahve that error when I have a mistake on the src property of my libs.
check that this line is ok:
<script src="assets/libs/angular-chart.js/dist/angular-chart.min.js"></script>
Maybe you misspell the src path.
What about if you change to this <script src="assets/libs/angular-chart/dist/angular-chart.min.js"></script> I think that angular-chart.js is not the name of the folder
Check your angular.json file for Chart.min.js and change both instances to all lowercase. Heroku is case sensitive.
Worked for me using Angular 13.
My app is "working" fine, but, when I press F5 in browser my problem appears.
My app is organized this way:
nodeJs + express, in Express :
app.use(express.static('public'));
app.use( app.router );
app.use(function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
my angular routes:
app.config(function($locationProvider, $routeProvider) {
$locationProvider
.html5Mode(true)
.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/page/home.html'})
.when('/activate/:token', { templateUrl: '/page/activate.html'})
.otherwise({ redirectTo: '/' });
});
and everything is working fine until i refresh the page,
if i'm on localhost:1234/activate/999
it appear refreshing good the page, but it stamp in console this error
Error: Template must have exactly one root element. was:<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
bla
bla
bla
all my index.html!
what can be the problems?
any solutions?
edit:
my home:
<div>
<section id="feature_slider" class="">
//...
</section>
<div id="showcase">
//...
</div>
<script type="text/javascript" src="/js/index-slider.js"></script>
</div>
mi activate:
<div>
test
</div>
my index.html
<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>tite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/css/bootstrap-overrides.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/theme.css">
<link rel="stylesheet" href="/css/index.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/lib/animate.css" media="screen, projection">
<link rel="stylesheet" href="/css/sign-in.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/myCss.css" type="text/css"/>
</head>
<body class="pull_top">
<navbar>
//...
</navbar>
<ng-view> Loading...
</ng-view>
<!-- starts footer -->
<footer id="footer">
//...
</footer>
<!--Preload-->
<script src="/js/jquery-1.10.1.min.js"></script>
<!-- Scripts -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/theme.js"></script>
<!--Angular-->
<script type="text/javascript" src="/js/angular.min.js"></script>
<!--<script type="text/javascript" src="/js/angular-ui.min.js"></script>-->
<script type="text/javascript" src="/js/ui-bootstrap-0.5.0.min.js"></script>
<script type="text/javascript" src="/angular/app.js"></script>
<!--Angular Controller-->
<script type="text/javascript" src="/angular/login/loginController.js"></script>
<script type="text/javascript" src="/angular/menuNavBar/menuController.js"></script>
<script type="text/javascript" src="/angular/login/logOutController.js"></script>
<script type="text/javascript" src="/angular/login/registerController.js"></script>
<!--Angular Services-->
<script type="text/javascript" src="/angular/alertBox/messageBoxController.js"></script>
<!--Router-->
<script type="text/javascript" src="/angular/router/router.js"></script>
</body>
This is a problem commonly encountered when using a "catch-all" route that returns index.html (which you have to do when using Angular's html5 mode).
I don't know what your public folder structure looks like, but your Angular is making a request for activate.html that doesn't match its actual location (as served by Express). It may be because you have a leading slash in your templateUrl:
{ templateUrl: '/page/activate.html'})
but that depends on what your public folder looks like. "/page/activate.html" assumes that the "page" folder is at the root of your public folder. If it isn't, then that's your problem. You should have:
{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})
which I'm guessing in your case would be something like:
{ templateUrl: 'views/page/activate.html'})
(It doesn't seem likely there would be a folder called "page" at the root of public/.)
Your express middleware attempts to handle the request for
http://localhost:1234/page/activate.html
but nothing successfully handles it, so your catch-all route just returns index.html, which has multiple root elements, causing Angular to throw a fit. Angular expected activate.html but it got index.html instead.
This will happen whenever the client makes a request that Express can't handle, because the catch-all router will return index.html. You can get your browser in an infinite loop as it continuously loads index.html, which loads Angular, which (erroneously) loads index.html, which loads Angular, etc.
Look at the request your browser is making for activate.html and make it match the actual location (as served by Express) of activate.html.
Try use the specify the templateUrl with the absolute path from the root of the views.
For example, suppose you have configured and views is in the public folder
app.set('views', __dirname + '/public');
then change the path to the template to
/public/page/home.html