Azular routing host in Azure

I am developing an application in Angular 2 using Angular cli. The app works fine and works fine when I deploy it to Azure, but routing doesn't work. I can access my application through "myapp.azurewebsites.net", but if I try "myapp.azurewebsites.net/settings", I get 404 error. I found many tutorials with different ways for different servers to route all into one index file, but none of them worked. Like providing a web.config file , setting up a node or express , and both at the same time.

So my question has two parts.
1. Which Azure web application template is best for hosting an Angular2 application?
This is just a one-page application written in Angular2. Not the kind that is wrapped in an ASP.NET MVC application.

2. How to configure this web application to use the routing configured by me in Angular

+4
source share
1 answer
  • Which Azure web app template is best for hosting an Angular2 app?

ng2 Azure Azure "-", IIS, . ( node -.) , , .

  1. - , Angular?

Web.Config FTP'd (/site/wwwroot - index.html) :

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

RegEx index.html( root, ), , (.js,.css,.png ..)

.

: URL-/OAuth

web.config, Kristoffer (OP) OAuth, OAuth Azure 400:

maxQueryStringLength.

Kristoffer , fooobar.com/questions/810/..., <requestLimits maxQueryString="32768"/> <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/> web.config. web.config Gist " - Azure Angular2 URL- auth." .

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.web>
        <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/>
    </system.web>
    <system.webServer>
        <security>
            <requestFiltering>
                <requestLimits maxQueryString="32768"/>
            </requestFiltering>
        </security>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
                    <conditions logicalGrouping="MatchAll"></conditions>
                    <action type="Rewrite" url="/" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
+9

Source: https://habr.com/ru/post/1672244/


All Articles