Angular 4 index.html won't load any script - javascript

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">

Related

Vue cli remove script injection

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
})
}

Implement HTML CSS and Javascript Template in Angular 7

I purchased a template which includes HTML, CSS, and Javascript files for a static webpage. I'm trying to use these existing files in my Angular project so I can connect it with a Nodejs app to make it a full stack webpage with backend. However, when I tried to put these files into Angular, everything is broken and is not functioning as it would when I manually open the HTML files on Chrome.
I've tried creating components for each HTML pages and adding the CSS and Javascript files into assets folder. Then I went on angular.json and added each CSS files into the styles array and the Javascript files into scripts array.
The HTML files look something like this:
<!doctype html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<title>Hireo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../assets/css/style.css">
<link rel="stylesheet" href="../../../assets/css/colors/blue.css">
</head>
<body>
.........body code...........
<!-- Scripts
================================================== -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.min.js"></script>
<script src="js/mmenu.min.js"></script>
<script src="js/tippy.all.min.js"></script>
<script src="js/simplebar.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/snackbar.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/counterup.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Anything you put in your assets folder will be available to the application, just remember to provide the relative/absolute path including assets.
If you have files in other folders or have specific errors (e.g. in the Network tab in Dev Tools), please provide more details that so I can advise. Until then, you can find most common solutions in https://lukasznojek.com/blog/2019/03/angular-cli-different-ways-to-include-assets/.
In your angular.json file add the static .html files to the assets array with their respective paths. You can then access the files i.e www.your-domain.com/your-static-file.html

How to link javascript file to angular app html template

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.

Angular2 application build, but file not found while loading the css, js folders

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.

AngularJS not successfully imported

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<script src="js/app.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" /> {{name}}
</body>
</html>
I've got this code above. However, when I run it on http-server {{name}} isn't displayed with whatever is placed in the input field, but rather "{{name}}" is displayed.
Am I incorrectly importing angularjs??
My file system currently looks like
index.html
js -> app.js
node_modules -> angular -> angular.min.js
etc.
Thanks!
I would guess that since you are using node, the node_modules aren't exposed to the public folder or as a static file.
From the documentation:
http-server [path] [options]
[path] defaults to ./public if the folder exists, and ./ otherwise.
Do you have a public folder? If so, then I would guess that's why.
As Claies said above:
angular needs to be loaded before your app.js
<script src="node_modules/angular/angular.min.js"></script>
<script src="js/app.js>

Categories

Resources