Angular-cli is generating the index.html file during ng-build.
The app runs on a hardware proxy, meaning that all of it's script tags need to be prefixed with "/some/prefix/". The cli generates the following script tags.
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.b1a79a362dfcae386d67.bundle.js"></script>
<script type="text/javascript" src="main.2b9bcc2dcbe5c9cb526b.bundle.js"></script>
Is there a way to prefix the src of each tag with something?
You need to set --base-href when serving or building, e.g. ng serve --base-href '/some/prefix/' --aot.
--base-href sets the <base href='/some/prefix'> tag in your HTML file and adds such prefix to all scripts and stylesheets that are automatically defined.
Note, however, that setting the base tag manually will not have the same effect and that will be overwritten every time you build your application.
Related
I use a HTML snippet in the Sitecore SXA metadata partial design to add some links in the head of the resulting HTML:
This HTML is:
<link rel="stylesheet" href="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.css" />
<script type="module" src="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.esm.js"></script>
<script nomodule src="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.js"></script>
But I would like to have the base path configurable using for example a token, like:
<link rel="stylesheet" href="$WebComponentsBasePath/sxa-umbrella-webcomponents.css" />
<script type="module" src="$WebComponentsBasePath/sxa-umbrella-webcomponents.esm.js"></script>
<script nomodule src="$WebComponentsBasePath/sxa-umbrella-webcomponents.js"></script>
where the token is set to: "https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents.
But token replacement does not work in the HTML snippet.
Any idea on how to make this base path configurable for the metadata partial design so I can have different configuration for my development environment and the production environment, and have the possibility to easily switch the base path on production to roll forward a version or roll back a version of the files used based on a configured base path?
gotemplates
Hello!
I'm learning Go language now and trying to port some simple WEB code (Laravel 4).
Everything was well, until I tried to reproduce Blade templates into text templates.
I found that Go can load my CSS and JavaScript files only from the catalog with a name "bootstrap" only.
Here is my catalog tree which I tried to use:
start-catalog
bootstrap (link to bootstrap-3.3.1)
bootstrap-3.3.1
css
bootstrap.min.css
js
bootstrap.min.js
jquery
jquery (link to jquery-2.1.1.min.js)
jsquery-2.1.1.min.js
go_prg.go
Here are my templates:
base_js.tmpl
{{define "base_js"}}
{{template "login_1"}}
<script src = "/bootstrap/js/jquery"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
{{end}}
base_header.tmpl
{{define "base_header"}}
<head>
<title>PAGE TITLE</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
</head>
{{end}}
If the catalog name differs from "bootstrap" Go language or Firefox can't load files from the templates above: bootstrap.min.css, bootstrap.min.js, jquery.
If I use not the link but the catalog name directly "bootstrap-3.3.1" than Go or Firefox can't load.
If all required files are moved under "bootstrap" I'm getting the results I expected (exactly the same as in Laravel 4).
To launch go language code the command go run go_prg.go was used.
Environment: Ubuntu 14.04, go-1.3.3, Firefox 31.
Who's wrong: Go language, Firefox or me?
Any help will be highly appreciated!
The problem described was caused by
http.Handle("/bootstrap/", http.StripPrefix("/bootstrap/", http.FileServer(http.Dir("bootstrap"))))
before any template was handled. It allowed access files under the directory 'bootstrap' only.
The problem was fixed by changing to
http.Handle( , http.StripPrefix(, http.FileServer(http.Dir("."))))
and adding to pathes for CSS and JavaScript files. Like so
/bootstrap/js/jquery">.
I am learning Django and as an example I am trying to implement a small site that serves static pages. I am using django.contrib.flatpages app for the same. As part of this, I have a javascript file located in a directory. I am referencing this javascript file in my html page. Accordingly, I have configured the URL pattern in my project's URL Conf file as follows:
url(r'^tinymce/(?P<path>.*)$','django.views.static.serve',{'document-root':'C:/RAKESH/djangowork/cms/cms/templates/admin/flatpages/flatpage/tinymce'}),
But when I try to load the html page, the javascript file doesn't seem to be loaded. The following is the referencing code in my html file:
<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector:'textarea'
});
</script>
Can someone help me fix this problem?
Thanks,
Rakesh.
Don't add an extra URLconf for that! Use the standard way in Django to serve static (non-cms-editable) files: https://docs.djangoproject.com/en/dev/howto/static-files/
Place the tinymce folder inside a static folder in your app folder, then use in your template:
<script type="text/javascript" src="{% static "/tinymce/tinymce.min.js" %}"></script>
I have a Bootstrap theme from https://wrapbootstrap.com/ that I want to use in my MeteorJS application. The issue is it has script tags like:
<!--[if !lte IE 6]><!-->
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script>
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
<!--[if lt IE 9]>
<script src="js/include/selectivizr.min.js"></script>
<![endif]-->
<script src="js/libs/jquery.ui.touch-punch.min.js"></script> <!-- REQUIRED: A small hack that enables the use of touch events on mobile -->
which don't work when added to MeteorJS. I know tags don't work, but how would you acoomodate this designed page to MeteorJS?
Later edit:
I added the script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> above. All the above scripts are added in the <body>. The google.maps library is used in lib/main.js and it doesn't work with MeteorJS because it raises ReferenceError. Outside of Meteor it works fine.
Any ideas on how to add that Google Maps script from the Bootstrap Template?
Later edit:
The Bootstrap template has a lib/main.js file which is the last javascript file imported. Nevertheless, when I add it to Meteor, it seems to be run, but its effects are not seen in UI. For example, it executes this line $(".chzn-select").select2(); but only when I execute it from the Console I can see the UI changes. This file is loaded last by Meteor. I also tried with
function load_scripts() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "lib/main.js";
document.body.appendChild(script);
}
if (Meteor.is_client) {
window.onload = load_scripts;
}
with no success.
These external themes might not be compatible with the default bootstrap included with meteor, so you should remove meteor's bootstrap package:
Remove default bootstrap:
meteor remove bootstrap
Add your theme:
Place your css files in your project's css directory, say /client/css
Place the themes javascript files in /client/lib
Don't worry about the script tags, or linking any of them or anything, meteor should take care of all of that.
Also
Meteor includes JQuery by default so you don't have to worry about including it in your project. To add jquery if for some odd reason you're meteor project might not have it use:
meteor add jquery
External Apis
e.g FB/Google Mapis API/Tracking scripts. Add them in the <head> section of your html file as normal.
Hopefully you find all of this cool!!
In my project I have multiple html files that I've added to the project.properties like this:
# Files can be added in a comma separated form
file.pages = loginapp.html, docapp.html, adminapp.html
The problem is that each of those files needs to load some app-unique scripts. E.g.:
<!-- In adminapp.html: -->
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/mylibs/jquery.tmpl.js"></script>
<script defer src="js/mylibs/knockout.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/helpers.js"></script>
<script defer src="js/app.admin.js"></script> <!-- ** unique for login ** -->
<script defer src="js/app.common.js"></script>
<!-- end scripts-->
<!-- in loginapp.html: -->
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/mylibs/jquery.tmpl.js"></script>
<script defer src="js/mylibs/knockout.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/helpers.js"></script>
<script defer src="js/app.login.js"></script> <!-- ** unique for admin ** -->
<script defer src="js/app.common.js"></script>
<!-- end scripts-->
It works brilliant until I ant build it.
It appears that HTML5 Boilerplate's build script has problems with figuring out what's going on here, and it only creates one concatenated file that contains the common stuff, and leaves the rest out (e.g. app.login.js and app.admin.js get copied into the publish/ folder, but are not linked to in the minified HTML files (which only link to one script and that's the concatenated one).
Is there any way to get this working?