My company added an Angular app to the existing ASP.NET MVC project last year. The Angular index host webpage is a .cshtml file that contain razor code, eg #RenderSection("SharedCss", false) .
It works fine until we upgrade to Angular 12 last week. When build the Angular app with optimization option ( ng build --optimization ), the output index.cshtml file is modified erroneously.
Original index.cshtml file
<!DOCTYPE html><html lang="en">
<head>
<base href="/">
<!-- razor code start-->
#RenderSection("SharedCss", false)
<!-- razor code end-->
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Expected result
<!DOCTYPE html><html lang="en">
<head>
<base href="/">
<!-- razor code start-->
#RenderSection("SharedCss", false)
<!-- razor code end-->
<style>:root{--blue:#007bff;.........</style>
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
<app-root>Loading...</app-root>
<script src="runtime-es2015.js" ............ </script>
</body>
</html>
Erroneous result
<!DOCTYPE html><html lang="en">
<head>
<base href="/">
<!-- razor code start-->
</head><body>#RenderSection("SharedCss", false)
<!-- razor code end-->
<style>:root{--blue:#007bff;.........</style>
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
<app-root>Loading...</app-root>
<script src="runtime-es2015.js" ............ </script>
</body>
</html>
The </head><body> html is erroneously moved to before the razor code (see line between <!-- razor code start--> and <!-- razor code end-->). It seems during the build optimization process, when Angular cannot parse the unexpected html syntax (eg. razor code) in the head tag, then it would append the </head> tag to end the html head element.
Note:
To eliminate the upgrade factor, I create new empty Angular app, and the issue still exist.
this occurs after Angular 12+
I have not be able to find anyone mention this behavior/issue. I would still want to turn the optimization flag on when build for production environment. Please help!
My colleague found the workaround solution base on this stack overflow post
We apply the same fix by disabling the inlineCritical option.
here is an example workspace configuration
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
}
Related
I am trying to embed Bokeh plots in to portable html slideshows using WebSlides (note that Reveal.js doesn't suit my needs).
The problem is illustrated below with the toolbar being misaligned:
My steps were:
1) I downloaded the source code for WebSlides
2) ran a simple Bokeh plot obtaining the div and script components
3) Inserted the relevant html links, div and scripts components in to 'index.html' from the WebSlides folder. The components were inserted using the Component Instructions for Bokeh 0.12.10. The div was inserted in to a blank component of the WebSlides.
Does anyone know how I might prevent the toolbar misalignment? Any advice, however vague is appreciated as I am loathe to dropping Bokeh for this application.
A copy of the html doc is here and a snippet without the javascript is below:
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.js"></script>
<BOKEH SCRIPT IS PLACED HERE>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
</head>
<body>
<main role="main">
<article id="webslides" class="horizontal">
<section>
<div class="bk-root">
<div class="bk-plotdiv" id="dac8b20e-c981-49a6-8c18-cf0ca0ddc43a"></div>
</div>
</section>
</article>
</main>
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>
Toolbars were reimplemented almost from scratch in bokeh 0.12.11dev1 and they don't use fragile float positioning anymore, so this shouldn't be an issue. You can follow our developer guide to get you started with dev version of bokeh. However, if the issue persists in 0.12.11dev1, please submit an issue with a complete, reproducible example.
I've been struggling for hours to include the Bootstrap CSS file into my file. My code snippet is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-
1">
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css"> <!--Works fine now, but not with local path -->
<title>Welcome</title>
</head>
<body>
<section>
<div class="jumbotron">
<div class="container">
<h1> Hello </h1>
<p> world </p>
</div>
</div>
</section>
</body>
</html>
This works perfectly and the Bootstrap shows up just fine. However, I wish to include the localized files. The moment I change the link in the head of the code to <link rel="stylesheet" href="resources/bootstrap.css" type="text/css">, The bootstrap disappears.
Just to make sure and convince you that the bootstrap.css is indeed there at resources/bootstrap.css I included <%# include file="/resources/bootstrap.css"%> at the top of the code and it actually showed me the entire content of the file.
What am I missing? How do I resolve this?
If you have this project structure (I suggest trying this,because resource folder content is not used for static web contentnt ):
|_webapp
|_css
|_bootstrap.css
you can load the css by
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.css" type="text/css">
I am new to ionic framework. In my app, i am trying to input something and when the user hits the add button i want it to save in my database. How do i define the controller for that? And what backend should i use for routing here? I am really confused here where to start. Please help me out. Any lead will be helpful. Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-header-bar class="top">
<h1 class="Title">Ionic App</h1>
</ion-header-bar>
<ion-content>
Add URL: <input>
<button>Add</button>
</ion-content>
</body>
</html>
Some receipes to get you started:
create a view with form elements backed by a controller that holds an initial (model) value for every element.
get familiar with "2-Way-Data-Binding" using the ngModel directive. This basically connects your form elements with the model values.
in the controller create a function that for example saves your model to a DB (something like $scope.saveData(){...};)
add the ngClick directive to your "save" button: <button ng-click"saveData()">Add</button> to call the function.
Have a look at $http or $resource and learn about RESTful Webservices to connect to your backend.
Implement a REST endpoint on your server that saves the data to the DB
See here for a tutorial that will take you further. There are plenty of such tutorials on the web.
Good luck! :-)
I have one page in particular that uses a stylesheet however none of the other pages within my website use it so I do not want to put it in the global main.scala.html file as all pages will then reference it. How can I make an IF statement in the play framework to say that when testpage.html is active, use teststylesheet.css?
According to the official docs you can use moreScripts and moreStyles equivalents approach:
#(title: String, css: Html = Html(""), scripts: Html = Html(""))(content: Html)
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<!-- common stylesheets <link rel="stylesheet"> -->
#css
<!-- common scripts -->
<script src="xyz.js")
#scripts
</head>
<body>
#content
</body>
</html>
and in sub template
#css = {
<link rel="stylesheet" media="screen" href='#routes.Assets.at("stylesheets/teststylesheet.css")'>
}
#scripts = {
<script src='#routes.Assets.at("javascripts/test.js")' type="text/javascript"></script>
}
#main("title", css, scripts) {
<div class="bodyOfView">rest of templating...</div>
}
Other option is using separate layouts containing only required JS / CSS for the given page.
Figured out what I needed was this in the main.scala.html:
#if(activeMenu.equals("pricing")){
<link rel="stylesheet" href="#routes.Assets.at("stylesheetname.css")">}
I have the following HTML in a web directory:
<!doctype html>
<html xmlns:ng='http://angularjs.org'>
<script src='lib/angular-0.9.18.min.js' ng:autobind></script>
<script src='angular-controller.js'></script>
<head>
<title>My Page</title>
<link rel='stylesheet' type='text/css' href='my.css'/>
</head>
<body>
Template stuff used by angular.
</body>
</html>
I would like something like:
<!doctype html>
<html xmlns:ng='http://angularjs.org'>
<script src='../web/lib/angular-0.9.18.min.js' ng:autobind></script>
<script src='angular-controller-stub.js'></script>
<head>
<title>My Page</title>
<link rel='stylesheet' type='text/css' href='../web/my.css'/>
</head>
<body>
Template stuff used by angular.
</body>
</html>
Note that the only differences are the .js and .css paths. If I were dealing with a language like Java, I would extract out a method and pass in the filepaths as arguments (or extract out a class and set the fields to the filepaths). How do I achieve a similar effect in HTML?
The second page is for testing the 'look' of the page. As such, allowing the page to be loaded via file:// allows for really quick turnaround. angular-controller.js does xhr stuff and fills in variables. angular-controller-stub.js just stubs those variables.