I followed these instructions for my app:
https://github.com/yeoman/generator-angular#readme
My Index (before build)
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/app.css -->
<link href="app.less" type="text/css" rel="stylesheet/less">
<!-- endbuild -->
My dist Index (in text-editor)
<html ng-app="myApp"> <head> <meta charset="utf-8"> <title>Datavalidering</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> </head> <body>
Dist index (browser)
<head>
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css">
<style type="text/css">body { display: none !important }</style></head>
<body>
The problem may be in gruntfile.js
http://plnkr.co/edit/r2hdhWY7olIw0pBHJ4VF?p=preview
Thank you in advance for your answers!
This happens because of (less.js):
// Simulate synchronous stylesheet loading by blocking page rendering
if (!options.async)
{
css = 'body { display: none !important }';
head = document.head || document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
so, all you need to do is add this before less.js
<script>
less = {
async: true
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
I'm not using Angular, but had a similar problem where this <style type="text/css">body { display: none !important }</style> suddenly appears at the end of head tag, effectively renders the whole page to not displaying anything.
I found out that the culprit was less.js. Simply commenting the line fixes it.
I have found a solution and the culprit.
It comes from the "Jetpack".
This image shows the location of the code in WordPress Directory:
Related
ReDoc displays a remote openapi.json normally:
<?xml version="1.0" encoding="UTF-8"?><html>
<head>
<title>ReDoc - openapi.json</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<redoc spec-url="https://petstore3.swagger.io/api/v3/openapi.json"/>
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js">/**/</script>
</body>
</html>
But if I save openapi.json locally
<?xml version="1.0" encoding="UTF-8"?><html>
<head>
<title>ReDoc - openapi.json</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<redoc spec-url="file:///tmp/openapi.json"/>
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js">/**/</script>
</body>
</html>
it shows this error:
Something went wrong...
process is not defined
Stack trace
resolve#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:301803
resolveExternalRef#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:76499
4182/resolveDocument/<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:77225
4182/r</<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:74930
4182/r<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:74675
resolveDocument#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:77178
3675/t.bundle/<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:33256
3675/r</<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:28947
3675/r<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:28692
3675/t.bundle#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:33035
n#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:579
Mu/</n/e<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1021
Mu/</n/e<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:837
n#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1040
Mu/</<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1261
Mu/</<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1077
Mu/<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1280
Il#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:488153
53/t.unstable_runWithPriority#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:517125
Wo#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:428837
Rl#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:487616
4448/Cl/<#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:487527
D#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:516186
53/w.port1.onmessage#https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:514909
ReDoc Version: 2.0.0
Commit: 5fb4daa
How to display a local OpenAPI definition file with ReDoc?
The easiest way is with Redocly CLI:
npx #redocly/cli preview-docs openapi.json
Source: https://redocly.com/docs/cli/commands/preview-docs/
I'm trying to give my html an css inline style. But this style gets ignored.
This is the HTML string that I'm using for webView.loadHTMLString(htmlBelow, baseURL: Bundle.main.bundleURL)
let fontsize = 16 //This is an dynamic variable
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<meta http-equiv=\"X-UA-Compatible\"content=\"ie=edge\">
<title>Document</title>
<style>
​html {
font-size:\(fontsize)px; */THIS DOESN'T WORK/*
}
</style>
<link rel=\"stylesheet\" href=\"\style.css\">
<script src=\"jquery-3.4.1.min.js\"></script>
<script src=\"script.js\"></script>
</head>
<body>
<div class=\ "sqr-tree-level\"> \(restOfHtml) </div>
</body>
</html>
I'm trying to set the fontsize dynamically.
When I change the font-size in my css file it works, but I want to set it dynamically. That's why I wanna do it like this.
This is how my document.head.innerHTML looks like
For future reference the fix here was to put the styling in to the <body> tag instead of in the head <style> tag.
<body style=\"font-size:\(fontsize)px;\">
In this tutorial it says:
"Opening the spec runner in a web browser will give the expected outcome:"
But does not mention how to do it. How can I do it?
Example code:
var My = {
sqrt: function(x) {
if (x < ) throw new Error("sqrt can't work on negative number");
return Math.exp(Math.log(x)/2);
}
};
Test code:
describe("sqrt", function() {
it("should compute the square root of 4 as 2", function() {
expect(My.sqrt(4)).toEqual(2);
});
});
There should be a SpecRunner.html file that references jasmine, your code, and your spec files. Looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.2</title>
<link rel="shortcut icon" type="image/png" href="libs/jasmine-2.0.2/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="libs/jasmine-2.0.2/jasmine.css">
<script type="text/javascript" src="libs/jasmine-2.0.2/jasmine.js"></script>
<script type="text/javascript" src="libs/jasmine-2.0.2/jasmine-html.js"></script>
<script type="text/javascript" src="libs/jasmine-2.0.2/boot.js"></script>
<script type="text/javascript" src="libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="libs/jasmine-jquery.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src=""></script>
<!-- include spec files here... -->
<script type="text/javascript" src=""></script>
</head>
<body>
</body>
</html>
I have an angular 2 app that I built using the angular cli generator: https://github.com/EdmundMai/angular-2-playing
This is the generator: https://github.com/angular/angular-cli
I ran ng serve and now I have a page I can see when I visit http://localhost:4002
My dist/index.html file in the angular 2 app looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularTwo</title>
<base href="/">
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://carbon.ec2.crowdtap.com/component_importer.js"></script>
</head>
<body>
<angular-two-app>Loading...</angular-two-app>
<script src="vendor/es6-shim/es6-shim.js"></script><script src="vendor/reflect-metadata/Reflect.js"></script><script src="vendor/systemjs/dist/system.src.js"></script><script src="vendor/zone.js/dist/zone.js"></script>
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
<script>
window.carbon.importComponents({ components: ['ct-button', 'ct-button/ct-button-link', 'ct-dialog', 'ct-progress'] });
</script>
</html>
In my rails view, I am trying to include these JS files:
<script src="http://localhost:4200/vendor/es6-shim/es6-shim.js"></script>
<script src="http://localhost:4200/vendor/reflect-metadata/Reflect.js"></script>
<script src="http://localhost:4200/vendor/systemjs/dist/system.src.js"></script>
<script src="http://localhost:4200/vendor/zone.js/dist/zone.js"></script>
<script src="http://localhost:4200/system-config.js"></script>
<script src="http://localhost:4200/main.js"></script>
However, it's not working and complaining that main.ts:1Uncaught ReferenceError: require is not defined
Is there a proper way of doing this?
You need to change the <base href="/"> tag (line 6) in the generated
dist/index.html
to <script>document.write('<base href="' + document.location + '" />');</script>
I've been battling various resource inclusion issues in my migration from Grails 1.3.7 from Grails 2.0, probably not understanding a few things to begin with.
Firstly, what does
<g:javascript library="application" />
do? (this was in the default main.gsp provided in Grails 1.3.7).
Secondly, for including jquery across my application, can I just do
<r:require module='jquery' />
<r:layoutResources />
in the top of my main sitemesh page that does the
<g:layoutHead />
...
<g:layoutBody />
and "be done with it", using the
<r:layoutResources />
a second time after the
<g:layoutBody />
Thanks
Yes I struggled a little with this at first too.
So firstly the <g:javascript library="application" /> refers to a module defined in a config/*.Resources.groovy file (default is config/ApplicationResources.groovy), inside that you have named modules, eg:
modules = {
application {
resource url: 'js/jquery/jquery-ui-1.8.15.custom.min.js', disposition: 'head'
}
}
Secondly by example a Grails2 main.gsp (cutdown a lot here):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><g:layoutTitle default="Grails"/></title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css/redmond', file: 'jquery-ui-1.8.15.custom.css')}" type="text/css">
<g:layoutHead/>
<g:javascript library="jquery"/>
<r:require module="application"/>
<r:layoutResources/>
</head>
<body>
<g:layoutBody/>
<r:layoutResources/>
</body>
</html>
Hope that sets you in the right direction