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 build from the Angular folder in command prompt.
Copy the dist folder files to some abc folder.
Add abc folder as Virtual Directory.

wwarby · Accepted Answer · 2018-08-27 08:30:48Z

3

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.

edited Aug 27, 2018 at 8:30

answered Aug 15, 2018 at 8:13

wwarby

2,0911 gold badge27 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Over a year ago

Important last comment. What do I need to do if I use 3rd party framework and it uses "/assets/..." path everywhere in their CSS instead of "assets/...", so the corresponding images are not found, when my Angular app is published to IIS as web app? Is there some setting to override it all at once?

Collectives™ on Stack Overflow

Cannot deploy Angular application on IIS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related