angularinternationalizationangular9angular-localize

Angular 9 - How to localize deployUrl in architect build options

I have an Angular 9 app with two languages, defined like:

"i18n": {
    "sourceLocale": "hu",
    "locales": {
        "en": "src/locale/messages.en.xlf"
    }
}

And I have baseHref and deployUrl defined in projects/{app-name}/architect/build/options, like:

"baseHref": "/app/",
"deployUrl": "/app/",

Then I build with this:

ng build --prod --localize

And I get two folder, an "en" folder and a "hu" folder. They are fairly the same, but let's have a look at one of the index.html files:

<!doctype html>
<html>
    <head>
        <!-- ... -->
        <base href="/app/en/">
        <!-- ... -->
        <link rel="stylesheet" href="/app/styles.3f60016a42d1eacbb401.css">
    </head>
    <body>
        <app-root>
            <div class="app-loading">
                <div class="logo"></div>
                <svg class="spinner" viewBox="25 25 50 50">
                    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
                </svg>
            </div>
        </app-root>
        <script src="/app/runtime.b9d5a643eaec08dff166.js" defer></script>
        <script src="/app/polyfills-es5.ee5154a1b39b612dbe59.js" nomodule defer></script>
        <script src="/app/polyfills.0f52d4dd345a2ffd7759.js" defer></script>
        <script src="/app/main.568a6377a283efe22a64.js" defer></script>
    </body>
</html>

As you can see, "en/" is appended to the baseHref, but where the deployUrl is used, the "en/" appendix is missing.

I've done a lot of search and didn't find any workarounds. It's maybe my bad sorry, but please help.

Solution

  • I have the same question for my setup.

    But in your case, you could just leave out the deployUrl. Then the script will be like

    <script src="runtime.b9d5a643eaec08dff166.js" defer></script>

    The browser will then search for that file at you baseHref location.