new application builder and dynamic imports, ignore resources that are not there on the server (404)

[jcompagner]

Which @angular/* package(s) are relevant/related to the feature request?

common

Description

I want to move to the new application builder, so moving a way from the browser builder that we have that was build on top of webpack.

Problem is we did a lot of code like this:

const localeId = country !== undefined && country.length > 0 ?
            language.toLowerCase() + '-' + country.toUpperCase() : language.toLowerCase();
        return new Promise<string>((resolve, reject) => {
            import(`@angular/common/locales/${localeId}.js`).then(
                module => {
                    registerLocaleData(module.default, localeId);
                    resolve(localeId);
                },
                () => {
                    import(`@angular/common/locales/${language.toLowerCase()}.js`).then(module => {
                        registerLocaleData(module.default, localeId.split('-')[0]);
                        resolve(language.toLowerCase());
                    }, reject);
                });
        });

webpack handled everything for that including the copy of those resources
Now copying those resources is not the biggest problem, i can do that manually through a angular.json assets>glob entry

the loading it kind of works, except that the browser always gives an error of a none existing resource, even if i catch it through a reject handler of import().then(),catch()
I don't want errors in the console for that, i know some files are not there, it completely depends if that file is shipping based on the locale string of the browser. I will fallback and so on.

I tried even with the build in http client but even that:

 this.http.get(`/numbro_languages/${localeId}.min.js`, {responseType:'arraybuffer'}).pipe(
      catchError(this.handleError())
    ).subscribe((value) => {
            console.log(value);
        });

it already report something even if i have a pipe with a catchErrror

besides that the locales for Numbro that i need to load seems to work really different..
instead of just doing this:

  return import(`numbro/languages/${localeId}`).then(module => {
            numbro.registerLanguage(module.default);
            numbro.setLanguage(localeId);
        })

i now need todo this:

 return import(`/numbro_languages/${localeId}.min.js`).then(module => {
            numbro.registerLanguage(this.windowService.nativeWindow['numbro'][localeId]);
            numbro.setLanguage(localeId);
        })

because that min.js file looks like this that numbro ships:

const u = undefined;
function plural(val) {
    const n = val, i = Math.floor(Math.abs(val)), v = val.toString().replace(/^[^.]*\.?/, '').length;
    if (i === 1 && v === 0)
        return 1;
    return 5;
}
export default ["nl", [["a.m.", "p.m."], u, u], u, [["Z", "M", "D", "W", "D", "V", "Z"], ["zo", "ma", "di", "wo", "do", "vr", "za"], ["zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"], ["zo", "ma", "di", "wo", "do", "vr", "za"]], u, [["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"], ["jan.", "feb.", "mrt.", "apr.", "mei", "jun.", "jul.", "aug.", "sep.", "okt.", "nov.", "dec."], ["januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"]], u, [["v.C.", "n.C."], ["v.Chr.", "n.Chr."], ["voor Christus", "na Christus"]], 1, [6, 0], ["dd-MM-y", "d MMM y", "d MMMM y", "EEEE d MMMM y"], ["HH:mm", "HH:mm:ss", "HH:mm:ss z", "HH:mm:ss zzzz"], ["{1} {0}", u, "{1} 'om' {0}", u], [",", ".", ";", "%", "+", "-", "E", "×", "‰", "∞", "NaN", ":"], ["#,##0.###", "#,##0%", "¤ #,##0.00;¤ -#,##0.00", "#E0"], "EUR", "€", "Euro", { "AUD": ["AU$", "$"], "BYN": [u, "р."], "CAD": ["C$", "$"], "FJD": ["FJ$", "$"], "JPY": ["JP¥", "¥"], "PHP": [u, "₱"], "RUR": [u, "р."], "SBD": ["SI$", "$"], "THB": ["฿"], "TWD": ["NT$"], "USD": ["US$", "$"], "XPF": [], "XXX": [] }, "ltr", plural];

or another version that they also ship is

module.exports = {
    languageTag: "nl-NL",
    delimiters: {
        thousands: ".",
        decimal: ","
    },
    abbreviations: {
        thousand: "k",
        million: "mln",
        billion: "mrd",
        trillion: "bln"
    },
    ordinal: (number) => {
        let remainder = number % 100;
        return (number !== 0 && remainder <= 1 || remainder === 8 || remainder >= 20) ? "ste" : "de";
    },
    currency: {
        symbol: "€",
        position: "prefix",
        code: "EUR"
    },
    currencyFormat: {
        thousandSeparated: true,
        totalLength: 4,
        spaceSeparated: true,
        spaceSeparatedCurrency: true,
        average: true
    },
    formats: {
        fourDigits: {
            totalLength: 4,
            spaceSeparated: true,
            average: true
        },
        fullWithTwoDecimals: {
            output: "currency",
            mantissa: 2,
            spaceSeparated: true,
            thousandSeparated: true
        },
        fullWithTwoDecimalsNoCurrency: {
            mantissa: 2,
            thousandSeparated: true
        },
        fullWithNoDecimals: {
            output: "currency",
            spaceSeparated: true,
            thousandSeparated: true,
            mantissa: 0
        }
    }
};

but that last one doesn;'t resolve at all when i am doing an import, i guess that is because it is not a valid ecma 6 module notation (with export xxx)

The thing is that with webpack this all just worked nicely out of the box
now i don't have a problem with rewriting something, but how are we supposed to really do this without errors in the console log of the browser?

Its all just dynamic, there are many "locale" files like that in our various components, we can't hard code anything because our application can be used in any country any where on the world.

Proposed solution

Not sure, at least a way that it won't report any errors in the console log..

Alternatives considered

instead of just using the import() function/keyword i use the http client to see if i could first test it, but also that is reporting an error.

[clydin]

Duplicate of #26904

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}