smartbanner.js breaking all Angular unit tests - javascript

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?

Related

Remove webfont.js as render-blocking resource - lighthouse

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>

threejs cannot be found

Hi I am trying to build the "get started" application from the threejs website. https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
I made a html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script>"/js/three.min.js"</script>
<script type="module" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>
I specified my view.js as a module since I want to be able to use the import statement to import my typescript files, but when I try to show my application in the browser I get the message THREE not found.
I tried adding it with yarn but it does not work.
This is my structure
Your three.min.js file is wrongly included. Your HTML should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>

TweenMax GSAP not animating, only works in codepen?

Just started with GSAP Tweenmax, but i ran in some issues. Probably it's a stupid mistake i made, but i can't figure it out.
When i run this code on Codepen it works, but when i run it from my webserver it doesn't do anything.
HTML:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="./js/main-test.js"></script>
<style>
#svg{position: absolute;}
</style>
</head>
<body>
<div id="svg"><p>testtesttesttest</p></div>
</body>
</html>
And this is the js:
var anim = document.getElementById('svg');
TweenMax.to(anim, 2, {left:"100px"})
Can someone please tell me what i'm doing wrong?
Thank you,
Michael
I already found the issue, i loaded the js script in the header.
The only thing i needed to do was to replace the script at the end of the html file so it could find the 'id' of the div to animate.

JS needs to be placed before </body>, but I can only add it to the head

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 */};

How to get AngularJS sanitizer to parse a block of html?

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

Categories