Cannot deploy Angular application on IIS
Question
I am trying to deploy an Angular application on IIS. It's working when I do Sites -> RightClick -> Select Add Web Site as mywebapp in IIS. But It does not work if I do Default Web Site -> RightClick -> Select Add Application as mywebapp in IIS.
In the first case, the Url of application is http://localhost .
In second case Url of application is http://localhost/mywebapp
In the second case, it gives an error in the browser console.
GET http://localhost/scripts.bundle.js 404 (Not Found)
So the error is understood that my application is trying to access http://localhost/scripts.bundle.js , but it's not present, it should access http://localhost/mywebapp/scripts.bundle.js in the second case.
Html of startup page Index.html.
<!doctype html>
<html lang="en" dir="ltr" style="height:100%">
<head>
<meta charset="utf-8">
<title>mywebapp</title>
<base href="/">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="author" content="">
<meta name="description" content="">
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.dataTables.net/1.10.15/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class="theme-red">
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
Steps to deploy app:
- Run
ng buildfrom the Angular folder in command prompt. - Copy the dist folder files to some abc folder.
- Add abc folder as Virtual Directory.
1 answers
solution1
2 ACCPTED 2018-08-15 08:13:38
When you have a tag in your markup, this is an instruction to the browser to always attempt to load resources referenced with relative paths relative to the absolute path specified in the href element of the <base> element, instead of the default behaviour which to treat those relative paths as relative to the current URL.
In your case, you have the base path set to the site root ( / ), so the browser will attempt to load the relative path inline.bundle.js from domain/inline.bundle.js ( http://localhost/inline.bundle.js as you are using the localhost hostname in IIS).
If you want to host the application in a virtual directory in IIS, you need to set the <base> element to point to the virtual directory - in your case, <base href="/mywebapp/"> when deploying to the virtual directory (note: the trailing forward slash is important ). If you're using the Angular CLI, you can do this through ng build using the --base-href argument.
Note that if you set the base path in this way it will only affect resources that are referenced with relative paths, so all assets must be referenced with paths that do not start with a / . For an Angular application this typically means the paths should be a bare filename for CSS and JavaScript, an start with assets/ for any files published in the assets folder.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.