When I'm using sanitizer and ui-router together in a single module it's causing this error:
VM103 angular.js:9101 Parse Error: <!DOCTYPE html><html lang="en" ng-app="sbAdmin2" class="ng-scope"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> </div> </div><!-- /#wrapper --></body></html>
Here is my code in a jsfiddle.
The error occurs with this statement:
var app = angular.module('myApp', ['ngSanitize','ui.router']);
I have found this article which says to define these in separate modules.
The module name is ui.router not ui-router
Related
iOS smart app banners have proven impractical in my Angular SPA. So, I've opted for a 3rd party library, ain/smartbanner.js: https://github.com/ain/smartbanner.js
Unfortunately, this breaks all of my unit tests with the following message:
Error: No options detected. Please consult documentation.
The setup instructions are simple. I've installed smartbanner.js locally, included my script and style tag the Angular way (in angular.json 'scripts' and 'styles' arrays, respectively), and added my configuration meta tags to index.html:
index.html
<!DOCTYPE html>
<html lang="en" translate="no">
<head>
<meta charset="utf-8" />
<title>my title</title>
<base href="/" />
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Start SmartBanner.js configuration -->
<meta name="smartbanner:title" content="Smart Application">
<meta name="smartbanner:author" content="SmartBanner Contributors">
<meta name="smartbanner:price" content="FREE">
<meta name="smartbanner:price-suffix-apple" content=" - On the App Store">
<meta name="smartbanner:price-suffix-google" content=" - In Google Play">
<meta name="smartbanner:icon-apple" content="https://is4-ssl.mzstatic.com/image/thumb/Purple123/v4/17/96/c5/1796c5bb-fd24-d656-81e9-1819879a6053/AppIcon-0-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-6.png/230x0w.jpg">
<meta name="smartbanner:icon-google" content="http://lh3.ggpht.com/f4oX61ljZ6x8aYDELZOgxlvdUEu73-wSQ4fy5bx6fCRISnZP8T353wdaM43RO_DbGg=w300">
<meta name="smartbanner:button" content="VIEW">
<meta name="smartbanner:button-url-apple" content="https://apps.apple.com/app/id/myappstoreid">
<meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=com.myplayurl">
<meta name="smartbanner:enabled-platforms" content="android,ios">
<meta name="smartbanner:close-label" content="Close">
</head>
<body>
<app-root></app-root>
</body>
</html>
Digging into the smartbanner.js file, located HERE, I can see the error message refers to:
key: "publish",
value: function publish() {
if (Object.keys(this.options).length === 0) {
throw new Error('No options detected. Please consult documentation.');
}
Where options appears to refer to the meta attributes such as name, content, etc. So it seems something is fundamentally broken that smartbanner.js can't recognize these meta tags of mine.
Has anyone else experienced this and has anyone gotten this relatively popular 3rd party library to work with Angular?
I'm currently trying to optimize my site and load font family asynchronously
At first it was an issue with material icons like in image below
After getting rid of this issue by using webfontloader in index.html I now have this error, which hasn't been as easy to get rid of
To try and solve it I changed the CDN link <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> to webfont.js to using npm i webfontloader and loading it locally, but the issue is still there. How can I get webfont.js to not be render-blocking?
index.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<title>My App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/logo.ico">
<script src="../node_modules/webfontloader/src/core/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Material+Icons']
}
});
</script>
</head>
<body>
<app-root>
</app-root>
</body>
</html>
I build a website using Sails js and Angularjs and I want to create facebook share button but I found a problem, it seems they cannot read my meta:og in my layout.ejs file. I am using https://developers.facebook.com/tools/debug/ but the result is :
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Missing Properties
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
Here is my code
<meta property="og:title" content="Facebook Open Graph META Tags"/>
<meta property="og:image" content="https://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>
<meta property="og:site_name" content="David Walsh Blog"/>
<meta property="og:description" content="Facebook's Open Graph protocol allows for web developers to turn their we">
<meta name="description" content="{{meta.metaDescription()}}">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="keywords" content="{{meta.metaKeywords()}}">
<meta name="author" content="BLAH inc">
<meta name='subject' content='my subject'>
<meta name='copyright' content='BLAH inc'>
<meta name='language' content='ID-id'>
<meta name='robots' content='index,follow'>
<meta name='revised' content='Wednesday, 09-Aug-2017, 14:21'>
<meta name='abstract' content='my abstract'>
<meta name='topic' content='my topic'>
<meta name='summary' content='my summary'>
<meta name='Classification' content='Business'>
<meta name='owner' content='my owner'>
<meta name='url' content='https://www.mywebsite.com'>
<meta name='identifier-URL' content='https://www.mywebsite.com'>
<meta name='directory' content='submission'>
<meta name='pagename' content='blah'>
<meta name='category' content='blah'>
<meta name='coverage' content='..'>
<meta name='distribution' content='..'>
<meta name='rating' content='..'>
<meta name='revisit-after' content='1 days'>
<meta name='subtitle' content='..'>
<meta name='target' content='all'>
<meta name='HandheldFriendly' content='True'>
<meta name='MobileOptimized' content='320'>
<meta name='date' content='Aug. 22, 2016'>
<meta name='search_date' content='2017-05-09'>
<meta name='DC.title' content='...'>
What is my mistakes?
I am trying to get this working in an extension for a little existing CMS.
The problem is: This script needs to be placed before </body>, but the CMS only allows me to place it to the head of the page.
Now I tried something like this:
$(function() {$('p').selectionSharer();}); - this works for the Twitter and Mail-function, but it does not recognize the Facebook App ID in the page.
The Facebook-ID is in the heading swell:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://127.0.0.1:8080/index.php/">
<meta property="twitter:card" content="summary_large_image">
<meta name="fb:app_id" content="123456789">
<meta property="og:site_name" content="Pagekit">
<meta property="og:title" content="Home">
<meta property="og:description" content="Globale Meta">
<meta property="og:url" content="http://127.0.0.1:8080/index.php/">
<script>
$(function() {$('p').selectionSharer();});
</script>
<script src="/selectionshare/app/assets/selection-sharer/dist/selection-sharer.js?v=7e08"></script>
Any idea how I could get this working?
This what jQuery.ready is for.
$(document).ready(function() {/* my code */ });
This functions similarly to adding code to the end of the body.
<script>
$(document).ready(function() {
$('p').selectionSharer();}
});
</script>
Of course you can try
window.onload = function(){/* my code */};
I have a very basic AngularJS app, from which I am trying to resolve the below error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=HelloWorld&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.min.js%3A19%3A463)
All the online references I have found lead to correcting improper use of ng-app in one way or another, however I find that my code is as close as vanilla and correct as it can possibly get.
So being that this is a basic issue and I cannot seem to find the solution for it, could anyone please enlighten me as to the obvious mistake?
JavaScript
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
HTML
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>
If you are trying to make this example in plunkr for example, don't forget to reference your script file, script.js.
Check here.
I added <script src="script.js"></script>. Without it I get the exact error you describe. Basically Angular can't find a corresponding module declaration for the ng-app="HelloWorld" application.
So don't forget to include your actual application JS, containing the angular.module part.
You get this error since you are using ng features before importing Angular and you are not importing the file where you initialize your app module.
Do as shown below:
HTML:
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
</script>
<script type="text/javascript" src="app.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
</body>
</html>
App.js:
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
I hope I've been helpful.