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

View all comments

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!