I am new to Angular and I have been having a problem trying to use Bootstrap or jQuery JavaScript includes. Below is a snippet of my code. Chrome developer tools tells me:
Request URL:http://localhost:4200/js/jquery.min.js
Request Method:GET
Status Code:404 Not Found
Remote Address:127.0.0.1:4200
Referrer Policy:no-referrer-when-downgrade
Am I doing anything wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyTestApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<!--Load JQuery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/metismenu/jquery.metisMenu.js"></script>
<script type="text/javascript" src="js/plugins/blockui-master/jquery-ui.js"></script>
<script type="text/javascript" src="js/plugins/blockui-master/jquery.blockUI.js"></script>
</body>
</html>
<base href="/">
refers to the root path, therefore, if you don't have those files in your root path they won't load.
You can put them in assets folder (for example) and change the src to assets/....
If you are using angular cli, the 'proper' way would be referencing them in app.scripts in .angular-cli.json
Another option would be installing the jquery library (npm install --save jquery) and declaring "$" as jquery variable.
Related
I am using vue cli within wordpress. Wordpress has it's own way of adding scripts to the DOM. Because of this I do not need vue cli to add the script the final index.html file. When I run npm run build I get something like this:
<!DOCTYPE html>
<html lang="en">
<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="/favicon.ico">
<title>my-app</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
I want when I run build to not have the tags and css injected. What's happening is when the html file is run I get a bunch of 404 errors. So it would be great if there is a way to stop the injection completely but still build the actual bundle files.
You can do that by disabling injection in the HTML Webpack Plugin options. Add the following to your vue.config.js file.
chainWebpack: (config) => {
config.plugin('html').tap((args) => {
args[0].inject = false
return args
})
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="login.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="navbar" class="navbar">
</div>
</body>
<script src="/response.js" type="text/jsx"></script>
</html>
I am trying to create a component using ReactJS to set elements in the navigation bar. The problem is that the script I've written does not link to the html file. The value returned to the html tag is a list including nav, ul, and li tags.
How can I solve the problem of linking the script?
Thank you for the help.
Some browsers (e.g. Chrome) will fail to load the file unless it’s served via HTTP, which means that you’ll now need a server to view your page. A good one is http-server which can be installed from npm with the following command:
npm install -g http-server
And started frpm your project’s root directory like so:
http-server
Your page will now be viewable at http://127.0.0.1:8080/
This is frustrating, I'm trying to load a simple script inside my index.html but I get 404.
index.html
<head>
<meta charset="utf-8">
<title>Login</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="./app/scripts/angular-cookies.js"></script>
</body>
</html>
This is my project structure
This is the error I get - 404
The file is there and it's not empty. I tried also:
<script type="text/javascript" src="../app/scripts/angular-cookies.js">
and
<script type="text/javascript" src="app/scripts/angular-cookies.js">
and
<script type="text/javascript" src="/app/scripts/angular-cookies.js">
Any help would be appreciated, thanks!
As I've mentioned in comment, any external resource should be placed in assets folder and for your case referenced like <script type="text/javascript" src="assets/scripts/angular-cookies.js"> considering assets contains a folder named scripts which contains your angular-cookies.js file. After building the code the resulted www folder will be like:
assets -> which contains the external files
build -> which contains your ts files transpiled into js files
index.html
other files
Try this and it will be fine:
<script type="text/javascript" src="/src/app/scripts/angular-cookies.js">
Or maybe
<script type="text/javascript" src="src/app/scripts/angular-cookies.js">
I have an angular2 application which uses nodejs server api's.
I build the app using nd b, which created the files in dist folder. Where can I specify the production url for the production build, so that all the css, js files loads properly.
And also, whether I need apache server to host these build. Or Can I use node server itself to host it?
Index.html:
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="assets/styles/css/custom.css"/>
<script src="assets/vendor/pace/pace.js"></script>
</head>
<body>
<app-root>
<div class="loading"></div>
</app-root>
</body>
</html>
Thanks
By analyzing your html file i am seeing an issue with the <base>tag.
You need to provide ./ instead of /which is wrong.
Corrected html document is given below.
<!doctype html>
<html>
<head>
<base href="./"> <!-- use ./ instead of / -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHEPHERD SHIELD</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="assets/styles/css/custom.css"/>
<script src="assets/vendor/pace/pace.js"></script>
</head>
<body>
<app-root>
<div class="loading"></div>
</app-root>
</body>
</html>
For development and testing purpose you can specify the urls for the css from the dist folder. If you are going for production, then you can copy the minified version of css and js files and put them in style and js folders for example, also set the urls in the html file from these folders.
I am facing an issue while running my AngularJS application in IE11.
When application runs in debugger mode, it does it properly. The issue comes only when I run it normally not in debug mode.
Also, I noticed that, if I run it without deploying it on server, it works perfectly fine. The issue comes only in deploy mode (To run it in deploy mode I made a grunt task that minifies the application and deploys it on server).
Here is my index.html:
<!doctype html>
<html lang="en">
<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">
<!-- Stylesheets -->
<link href="styles/css/ncs_components.css" rel="stylesheet" type="text/css">
<link href="styles/css/adv_master.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<![endif]-->
<script src="scripts/ext/require.js" data-main="scripts/main.js">
</script>
</body>
</html>
How can I solve this?