I am facing very strange issue with AngularJS routes. I have certain folder structure
js -> Angular ->
css -> Bootstrap ->
index.html
All the routes runs fine when hosted on some server like IIS. But I copy the entire directive & paste in some other location or share with someone. If they run with file system they start getting Files not found error.
This is my how index.html looks like.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<base href="" />
<!--css-->
<link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="container-fluid">
<!--content-->
<!--menu tabs-->
<div class="col-md-12" style="margin-top:10px;">
CAR <br/>
Mobile
</div>
<!--angular template placeholder-->
<div ng-view> </div>
<!--footer-->
</div>
<!--js-->
<script src="./js/Angular/Lib/angular.js"></script>
<script src="./js/Angular/Lib/angular-route.js"></script>
<script src="./js/Angular/Config/ngRouteConfig.js"></script>
This 404 issue arises only when I have base tag present in the html.If I remove it, page renders fines. But this stops running angular routing.
I got an email from my senior that I shouldn't be specifying absolute path but I don't find anyplace in my index.html where I have specified absolute path(s).
So how do I specify relative path, so that anyone who has the same folder structure can run the demo app??
Any help/suggestion highly appreicated.
Have you tried:
<base href="/" />
If you are deploying your app into the root context (e.g.
https://myapp.com/), set the base URL to /:
<head>
<base href="/">
...
</head>
If you are deploying your app into a sub-context (e.g.
https://myapp.com/subapp/), set the base URL to the URL of the
subcontext
<head>
<base href="/subapp/">
...
</head>
Angular Docs $location/nobase
Angular Docs $location
In regards to absolute paths, CAR is not quite an absolute path, however it does force the browser to look back at the ROOT directory of the web server to look for the route. So, if someone you share with mounts the app to a sub-directory, then this will most likely cause the error.
In that event, they should set the <base href="to-wherever-they-put-the-thing" /> on their web server, OR you should specify to run it in the ROOT directory of a web server.
Use:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<!--
<base href="" />
-->
<script>
document.write('<base href="' + document.location + '" />');
</script>
<!--css-->
<link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
Related
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app" thisIsAProp="This is what I need"></div>
<!-- built files will be auto injected -->
</body>
</html>
So in my main.js file the app is mounted on #app. In my App.js file I need the properties on the <div id="app"> element. I tried using web-components which did work for a basic app but another requirement is I need to be able to overwrite the CSS variables within the parent web page, and when creating web components, vue creates them with a shadow-dom. Is there a better way to get the values from the vue mount element?
Data can be passed from the the page to entry point either with global variables:
<script>
window.myApp = {
foo: 'bar'
}
</script>
<div id="app"></div>
And accessed inside the app like window.myApp.foo.
Arbitrary string data (including JSON) can be passed through HTML attributes, data attributes commonly serve this purpose:
<div id="app" data-foo="bar"></div>
And accessed inside the app like document.querySelector('#app').dataset.foo.
Solved my problem
I was able to get the properties from the index.html mount into my App.vue file using
beforeMount() {
this.neededData = this.$parent.$el.getAttribute("thisIsAProp");
},
How can I set deployment path in Svelte?
I would like to use it on the webserver in different path like
https://example.com/somewhere-else/index.html
But now right after i run npm build, I must use it like:
https://example.com/index.html
It must be something in the rollup.config.js but I cannot find it out.
I imagine you are using the standard svelte template?
https://github.com/sveltejs/template
The bundles it creates are not restricted to a specific path. You just need to put them in the appropriate path and update the link and script tags in the index.html file appropriately:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'><!-- change this -->
<link rel='stylesheet' href='/global.css'><!-- change this -->
<link rel='stylesheet' href='/build/bundle.css'><!-- change this -->
<script defer src='/build/bundle.js'></script><!-- change this -->
</head>
<body>
</body>
</html>
Does this answer your question, or is your problem more complicated?
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
I am using asp dotnet core for the backend.
This is how asp renders the page (notice how everything with meta etc seems correct, and my tests confirm this):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
<base href="/" />
<link rel="stylesheet" href="/dist/vendor.css?v=nmP2oJlipQWfe1Q9dKUoaAj31lKk6_m4owNSV9fEeqA" />
</head>
<body>
<!-- test from _Layout.cshtml to see if it is its fault -->
àéíôüàéíôüàéíôüàéíôüàéíôü
<!-- it renders it correctly, so it looks like it's Vue.js's fault -->
<div id='app-root'>Loading...</div>
<script src="/dist/vendor.js?v=sZcVpAmM0vrf6nyPyorxXMMIanK-hAW1RhcF2ymtHfk"></script>
<script src="/dist/main.js?v=qjoWhD1Og3eISp302v-McamzVAlCEXm_3gssJzkUnKE"></script>
</body>
</html>
Now in app.vue.html, if I use this template:
<template>
<div>
àéíôüàéíôüàéíôüàéíôüàéíôü
</div>
</template>
<style scoped src="./app.css"></style>
<script src="./app.ts"></script>
The website shows this:
àéíôüàéíôüàéíôüàéíôüàéíôü
�������������������������
<= the first line comes from _Layout.cshtml, while the second line comes from app.vue.html
The Vue version I am using is 2.5.16
This should all just work. You have the utf-8 meta tag in your document. There is certainly no problem with Vue's handling of utf-8. Check your source files (app.vue.html), and your bundle. Open them in vs-code for example and you should see utf-8 on the right of the bottom status bar. Check the character encoding in the HTTP headers of everything, particularly the bundle. A .js bundle sent with bad HTTP encoding header would seem the most likely culprit.
I am developing a SPA (Single page application) using ember.js served from pyramid. The problem is that the routing is not working properly.
In pyramid, I have the following routes defined:
# Route to index.html, i.e. the SPA
config.add_route('index', '/')
# Route to css & js resources
config.add_static_view('', 'myapp:static')
And the index view is:
#view_config(route_name='index')
def index_view(request):
with open('myapp/templates/index.html', 'rt', encoding='utf-8') as fh:
html = fh.read()
return Response(html, content_type='text/html')
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script type="text/x-handlebars" data-template-name="wfw">
<section id="wfw">
<p>here is a page</p>
</section>
</script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="https://raw.github.com/less/less.js/master/dist/less-1.6.0.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
js/application.js:
window.Wfw = Ember.Application.create();
js/router.js:
Wfw.Router.map(function () {
this.resource('wfw', { path: '/t' });
});
When I go to localhost:6543/ I get "Hello, world!", but I don't see "here is a page". If I change the path in js/router.js to '/test' and go to localhost:6543/test, I get a 404. What am I doing wrong? Do I need to somehow disable part of pyramid's routing, or am I doing something wrong with ember?
A few things:
I think you need to move your Ember.js script tags above your application specific tags.
The path you have configured is /t so I don't think it would pick it up /test.
By default, ember doesn't use the html5 history api, so your url would need to be like: localhost:6543/#/t