Question

我们目前在Azure / App服务上有2个版本的Angular应用程序以支持内部化。

它们位于同一位置，但位于不同的文件夹 / en 和 / fr 。我们的文件夹树看起来像这样

-> 
wwwroot/index.html
wwwroot/web.config
wwwroot/en/index.html
wwwroot/en/..
wwwroot/fr/index.html
wwwroot/fr/..

我们确实有一个完美运行的web.config重写规则。见下文：

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

这是转折点；如果用户导航到www.app.com而不是www.app.com/en，我们确实提供了根index.html。在这种情况下，根索引index.html被触发，我们运行一些js脚本以根据本地存储语言使用用户“ window.location.href”进行重定向。

由于某些原因，当我们从根www.app.com查询url时浏览器链接，并缓存该URL的第一个版本。

如果我们使用类似www.app.com/en/*的资源查询网址尽管域相同，但浏览器仍将另一个版本链接到该路径。

问题在于，每次我们部署新版本时，只有具有任何资源的路径才会被更新，例如：www.app.com/en/*或www.app.com/fr/*，但根URL www.app.com与旧URL保持联系版本，永远不会更新。

如果用户使用根URL，它将被重定向到仅在内存或磁盘中可用的旧版应用程序。

请注意，www.app.com/en/*或www.app.com/fr/*运行正常

目前我不知道问题出在我们的重写规则还是js脚本重定向。

以下是/ en-> ng build --output-path=dist/en --prod --base-href /en/ --i18n-locale en-CA --i18n-format=xlf

的角度构建脚本

这是我们的根index.html代码：

<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script>
        var edRedirectManager = (function () {
            var _this = {};

            _this.storageLocaleKey = "EDLocale";

            _this.locale = "";
            _this.init = function(){
                _this.locale = (_this.getUserLanguage());
            } 

            _this.redirect = function () {
                var currentUrl = new URL(window.location.href);

                var lgPrefix = _this.getUrlPrefixByLanguage();
                currentUrl.pathname = _this.insert(currentUrl.pathname,lgPrefix,0);

                window.location.href = currentUrl.href;
            }

            _this.getUserLanguage = function () {

                try {
                    _this.locale = localStorage.getItem(storageLocaleKey);
                } catch (error) {}

                if (!this.locale) {

                    if (navigator.language.toUpperCase().indexOf("FR") !== -1)
                        this.locale = "fr-CA";
                    else
                        this.locale = "en-CA";

                    localStorage.setItem(this.storageLocaleKey, this.locale);

                }

                return _this.locale;
            }

            _this.getUrlPrefixByLanguage = function(){
                var lgPrefix = "/fr";

                if(this.locale.indexOf('en') !== -1){
                    lgPrefix = "/en";
                }

                return lgPrefix;
            }

            _this.insert = function (main_string, ins_string, pos) {
                if (typeof (pos) == "undefined") {
                    pos = 0;
                }
                if (typeof (ins_string) == "undefined") {
                    ins_string = '';
                }
                return main_string.slice(0, pos) + ins_string + main_string.slice(pos);
            }


            return _this;
        })();
    </script>

</head>

<body>

    <script>
        // self executing function here
        edRedirectManager.init();
        edRedirectManager.redirect();
    </script>
</body>

</html>

Answer 1

出于某些原因，从根目录“ /”触发时，” / en / index.html” 和/或” / fr / index.html” 页面被缓存导致旧应用main.js加载

重定向工作被罚款...

我在web.config中将这些设置标签<location>添加到了 no-cache 值，现在这个问题消失了！

<configuration>
   <location path="en/index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
    </location>
   <location path="fr/index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>
<location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>
<system.webServer>
    <urlCompression doDynamicCompression="true" />
    <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <rewrite>
        <rules>
            <rule name="Angular Routes fr" stopProcessing="true">
                <match url="fr/.*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="fr/index.html" />
            </rule>
            <rule name="Angular Routes en" stopProcessing="true">
                <match url="en/.*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="en/index.html" />
            </rule>
            <rule name="Angular Routes default" 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>

浏览器在由azure应用程序服务托管的根index.html上保留了一个令人困惑的角度应用程序角度版本的角度应用程序

1 个答案: