Run an Angular application

Download and build the sample

Download toh-pt6.zip and extract it into a folder named toh. Open a command prompt and run:

# change directory
cd toh

# install dependencies
npm install

# start local server
ng serve

# build production
ng build

ng serve runs the application locally so that you can try it; ng build creates the production build in the dist directory.

Upload the build

Upload the entire content of the dist\browser\ directory into /wwwroot on your website, for example over FTP or SFTP.

Upload web.config

Angular handles its routes in the browser, so an address such as /heroes does not exist as a file on the server. Upload this web.config into /wwwroot; it falls back to index.html for every address that is not an existing file or directory, and Angular then handles the route:

<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" 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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

Open the website

Open the address of your website. You should see the Tour of Heroes application.

Download and build the sample

Open a command prompt and run:

# download application from github
git clone https://github.com/ganatan/angular-httpclient.git

# change directory
cd angular-httpclient

# install dependencies
npm install

# start server
npm start

# build production
npm run build

The production build is created in the dist\angular-starter\ directory.

Upload the build

Upload the entire content of the dist\angular-starter\ directory into /wwwroot on your website, for example over FTP or SFTP.

Upload web.config

Upload this web.config into /wwwroot. It starts the Node.js server of the application and passes it the port to listen on:

<configuration>
  <system.webServer>

    <handlers>
      <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" />
    </handlers>

    <httpPlatform processPath="node" arguments=".\server\server.mjs" startupTimeLimit="20" stdoutLogEnabled="false" stdoutLogFile=".\logs\node">
      <environmentVariables>
        <environmentVariable name="PORT" value="%HTTP_PLATFORM_PORT%" />
        <environmentVariable name="NODE_ENV" value="production" />
      </environmentVariables>
    </httpPlatform>

  </system.webServer>
</configuration>

Open the website

Open the address of your website. You should see the Angular 20 Example HttpClient application.