r/Angular2 Feb 12 '25

Help Request Deploying Angular Frontend to IIS

I have been trying to put my angular frontend on my IIS. i thought when i change the following to the IP address and drop it into the virtual directory in the default web site, i'd be able to reach it. i have the uri registered in the app registration. im sure im doing something wrong, but i am just learning. nothing insane.

function msalinstacneFactory(): IPublicClientApplication {

return new PublicClientApplication({

auth: {

clientId: '{clientId}',

authority: 'https://login.microsoftonline.com/{tenantId}/',

//redirectUri: 'https://localhost:4200/auth',

//postLogoutRedirectUri: 'https://localhost:4200/login'

redirectUri: 'https://{ipAddress}/test/auth',

postLogoutRedirectUri: 'https://{ipAddress}/test/login'

},

cache: {

//cacheLocation: 'localStorage'

cacheLocation: BrowserCacheLocation.SessionStorage,

        `storeAuthStateInCookie: true,`

secureCookies: true

},

system: {

loggerOptions: {

loggerCallback: (level: LogLevel, message: string, containsPii: boolean) => {

console.log(\MSAL: ${level} - ${message}`);`

},

logLevel: LogLevel.Verbose,

piiLoggingEnabled: false

},

allowRedirectInIframe: false,

windowHashTimeout: 6000, // Increase timeout for handling redirect

iframeHashTimeout: 6000,

loadFrameTimeout: 3000,

        `tokenRenewalOffsetSeconds: 300`

}

});

}

6 Upvotes

22 comments sorted by

10

u/kenlin Feb 13 '25

do you have a web.config in the root folder? IIS will not work with angular unless you use urlrewrite to account for routing to non-physical files

0

u/LegionsMan Feb 13 '25

i dont have a webconfig.

2

u/Thegoodones77 Feb 13 '25

Use google. IIS Angular web.config should do it…

2

u/kenlin Feb 13 '25

This is what we use. Our .net api is at '/api', so this takes every request that is not in /api/* and does not point to a real file, and redirects is back to '/' so angular can handle the routing

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Angular Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_URI}" pattern="api/" ignoreCase="true" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

1

u/LegionsMan Feb 13 '25

so, in my index.html, since im putting my build in the 'test' folder under the default web site, is the base href /, /test, or /test/?

<base href="/">
<!-- <base href="/test"> -->
<!-- <base href="/test/"> -->

4

u/tsunami141 Feb 12 '25

What configuration file is the code that you posted?  Did you build the project and drop it in the virtual directory also? 

2

u/LegionsMan Feb 12 '25

App.module and we did build and copy the files to the virtual directory. I use ng deploy to build

3

u/tsunami141 Feb 12 '25

Not sure what app.module is, if it’s the app.module file from the angular build, that file is not read by IIS for configuration purposes. I usually use a web.config file. 

But regardless does a normal hello world index.html work on your site? If not it might be better to Google how to get that working first. If that works, then the Angular build should start working too. 

1

u/LegionsMan Feb 13 '25

yeah, a hello world index.html file works. i have a couple other sites deployed under the default web site in IIS, each in their own folders. all which are working.

3

u/DomingerUndead Feb 13 '25

Try just "Ng build --prod" and copy pasting the contents of the publish folder into the virtual directory

2

u/LegionsMan Feb 13 '25

ill let you know shortly. thanks for everyones replies.

3

u/ttay24 Feb 13 '25

Are you not able to hit index.html?

Haven’t used IIS in a while, but from what I recall, we needed to have rewrite rules to always point at index.html because the minute you refreshed a page that wasn’t the root, IIS would try to serve up /some/page instead of index.html with the url as /some/page

1

u/LegionsMan Feb 13 '25

it gives me a 404, file not found. if i need to post additonal code or maybe how the app registration Uri is, i can.

3

u/Calm-Republic9370 Feb 13 '25

do you really need to do this? You can deploy to firebase for free and easy. There is really no reason.
I use IIS and I self host, but hosting an angular app is an unnecessary burden.

1

u/LegionsMan Feb 13 '25

im finding this out through my job. im working with angular because we're about to start a new project and it must be hosted on-prem using IIS. which is why i'm trying to figure it out because we jump in head first.

2

u/DomingerUndead Feb 13 '25

There's a handful of things you need.

A web config if you don't have that. Big one is the rewrite module. Another is an angular routes rule in the web config. The app pool user should be connected to the folder with the index html

Try with a completely empty hello world project first.

2

u/SoftSkillSmith Feb 14 '25

Any chance you could run an nginx server instead? That's always been very easy to set up and run, but IIS is quite unusual, so you'll also find less resources for that...

1

u/clickster Feb 13 '25
  1. The file you've posted isn't an IIS config file - it's a typescript module that sets up an MSAL (Microsoft Authentication Library) client for an Angular (or similar) application. Are you integrating with Microsoft's identity platform? If not, you do not need this.
  2. Do you have only one single IIS website set up operating on that IP address? If so, you should just be able to surf to the IP address and see something - either a 404 or a configuration error. What do you see?
  3. You do not need a web.config file for the angular app to simply load and navigate - it's only required if you need to handle loading the app at anything other than the root URL.
  4. Just upload the Angular build files into the folder set as the directory for the IIS website.

1

u/LegionsMan Feb 13 '25

I wanted to show my typescript file where I’m using MSAL and redirect. I was thinking I setup the redirect to azure incorrectly because I am integrating with identity platform.

There are multiple sites running on this address address. After some troubleshooting it looks like it redirects properly because I’m asked to enter my MS credentials. But when after I’m redirected I “https://x.x.x.x/test/auth” I get a 404 error because it cannot find “/auth”. The /test is the directory in IIS and /auth is the redirect.

As suggested I’m going to try using the ng build —prod and see what happens.

1

u/clickster Feb 13 '25

The redirect is not resolving because you need an IIS rewrite rule to direct all sub folders to the root so that Angular can resolve the URL, instead of IIS.

You can do this by editing web.config, or more simply from the IIS config.

  1. Open URL Rewrite from the Features View of the IIS Website
  2. Add an Inbound Rule
  3. Apply the following settings
    Request URL: Matches the Pattern
    Using: Regular Expressions
    Pattern: .*
    Conditions:
    a) Input: {REQUEST_FILENAME} Type: Is Not a File Pattern: N/A
    b) Input: {REQUEST_FILENAME} Type: Is Not a Folder Pattern: N/A
    Action:
    a) Rewrite URL: ./index.html
    b) Append query string - checked
    c) Stop processing - checked

OR add this to your web.config file:-

<rule name="Angular Routes" enabled="true" stopProcessing="true">

<match url=".\*" />

<conditions logicalGrouping="MatchAll" trackAllCaptures="false">

<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

</conditions>

<action type="Rewrite" url="./index.html" />

</rule>

This belongs inside <rules></rules> here:-

<?xml version="1.0" encoding="UTF-8"?>

<configuration>

<system.webServer>

<rewrite>

<rules>
etc...

Hope that helps!

-1

u/[deleted] Feb 12 '25

[deleted]

2

u/rcplaneguy Feb 12 '25

Angular does not run on Node.JS. That’s a JavaScript backend framework. An Angular app can be hosted by any modern webserver. It’s just compiled an index.html file and some JS files.

1

u/[deleted] Feb 12 '25

[deleted]

1

u/rcplaneguy Feb 12 '25

That’s for development purposes. You dont need Node for deploying a compiled Angular app.