Angular 9 universal deploy to azure with web.config file

have created an Asp.NET Core Web Application with Angular 9. I have added Angular Universal to my application. Now I need to publish my application into the Azure app service.

I have used the following command to build an application,

    npm run build:ssr

After building angular universal application it will give two folder structures under the dist folder.

   

       dist/{app-name}/browser
       dist/{app-name}/server

It's working fine locally. Now I need to publish the application in the Azure app service. So far I have searched a lot of things and integrated them. But unfortunately, I did not find any solution to work for the last couple of days.

Here is my web.config file

 <?xml version="1.0" encoding="utf-8"?>
    <configuration>`
      <system.webServer>
        <webSocket enabled="false"/>
        <handlers>
          <add name="iisnode" path="index.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
          <rules>
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
              <match url="^/index.js\/debug[\/]?"/>
            </rule>
            <rule name="StaticContent">
              <action type="Rewrite" url="public{REQUEST_URI}"/>
            </rule>
            <rule name="DynamicContent">
              <conditions>
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
              </conditions>
              <action type="Rewrite" url="index.js"/>
            </rule>
             <rule name="DigitalTalksAngulartest" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/digitaltalkstest/" />
        </rule>
          </rules>
        </rewrite>
        <security>
          <requestFiltering>
            <hiddenSegments>
              <remove segment="bin"/>
            </hiddenSegments>
          </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough"/>
      </system.webServer>
    </configuration>

server.ts file

    import 'zone.js/dist/zone-node';
    import { ngExpressEngine } from '@nguniversal/express-engine';
    import * as express from 'express';
    import { join } from 'path';
    import { AppServerModule } from './src/main.server';
    import { APP_BASE_HREF } from '@angular/common';
    import { existsSync } from 'fs';
    
    // The Express app is exported so that it can be used by serverless Functions.
    export function app() {
      const server = express();
      
      let distFolder = join(process.cwd(),'dist/@abb/customer-platform/browser');
      const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
    
      // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
      server.engine('html', ngExpressEngine({
        bootstrap: AppServerModule,
      }));
    
      server.set('view engine', 'html');
      server.set('views', distFolder);
      const MockBrowser = require('mock-browser').mocks.MockBrowser;
      const mock = new MockBrowser();
      const win = mock.getWindow();
      global['window'] = win;
      global['document'] = mock.getDocument();
      global['location'] = mock.getLocation();
      global['navigator'] = mock.getNavigator();
      global['history'] = mock.getHistory();
      global['localStorage'] = mock.getLocalStorage();
      global['sessionStorage'] = mock.getSessionStorage();
      global['object'] = win.object;
      global['HTMLElement'] = win.HTMLElement;
      global['Event'] = win.Event;
      global['Event']['prototype'] = win.Event.prototype;
    
      global.Buffer = global.Buffer || require('buffer').Buffer;
    
      global.btoa = function (str) {
        return Buffer.from(str, 'binary').toString('base64');
      };
    
      global.atob = function (b64Encoded) {
        return Buffer.from(b64Encoded, 'base64').toString('binary');
      };
    
      // Example Express Rest API endpoints
      // app.get('/api/**', (req, res) => { });
      // Serve static files from /browser
      server.get('*.*', express.static(distFolder, {
        maxAge: '1y'
      }));
    
      // All regular routes use the Universal engine
      server.get('*', (req, res) => {
        res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
      });
    
      return server;
    }
    
    function run() {
       const port = process.env.PORT || 4000;
      // Start up the Node server
      const server = app();
      server.listen(port, () => {
        console.log(`Node Express server listening on http://localhost:${port}`);
      });
    }
    
    // Webpack will replace 'require' with '__webpack_require__'
    // '__non_webpack_require__' is a proxy to Node 'require'
    // The below code is to ensure that the server is run only when not requiring the bundle.
    declare const __non_webpack_require__: NodeRequire;
    const mainModule = __non_webpack_require__.main;
    const moduleFilename = mainModule && mainModule.filename || '';
    if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
      run();
    }
    
    export * from './src/main.server';

currently, the normal angular application resides in site/wwwroot/projec-name Inside this path, all my build contents reside. Build content consists of web.config, index.html, and all other files. Any help is appreciated.