All Angular 12 languages are built in sub folders - No index.html in root

Support
,
1

www.ulrikafaerch.com on Angular 12 with source ‘en’ and localization ‘da’ and ‘sv’

The app builds just fine but the sourcelocale (en) is placed in a sub folder along with da and sv. Thus there are no files and no index.html in the root.

My angular.json (which I suspect might be the culprit)

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "ulrika": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "localize": true,
                        "aot": true,
                        "outputPath": "dist/ulrika",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/robots.txt",
                            "src/_redirects"
                        ],
                        "styles": [
                            "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
                            "src/styles.css"
                        ],
                        "scripts": [],
                        "vendorChunk": true,
                        "extractLicenses": false,
                        "buildOptimizer": false,
                        "sourceMap": true,
                        "optimization": false,
                        "namedChunks": true
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb"
                                }
                            ]
                        },
                        "da": {
                            "outputPath": "dist/ulrika/da",
                            "localize": [
                                "da"
                            ]
                        },
                        "sv": {
                            "outputPath": "dist/ulrika/sv",
                            "localize": [
                                "sv"
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "ulrika:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "ulrika:build:production"
                        },
                        "da": {
                            "browserTarget": "ulrika:build:da"
                        },
                        "sv": {
                            "browserTarget": "ulrika:build:sv"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "ulrika:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                            "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
                            "src/styles.css"
                        ],
                        "scripts": [],
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                },
                "xliffmerge": {
                    "builder": "@ngx-i18nsupport/tooling:xliffmerge",
                    "options": {
                        "xliffmergeOptions": {
                            "format": "xlf",
                            "srcDir": "src/i18n",
                            "genDir": "src/i18n",
                            "defaultLanguage": "en",
                            "languages": [
                                "da",
                                "sv"
                            ]
                        }
                    }
                },
                "deploy": {
                    "builder": "angular-cli-ghpages:deploy",
                    "options": {}
                }
            },
            "i18n": {
                "sourceLocale": "en",
                "locales": {
                    "sv": {
                        "translation": "src/i18n/messages.sv.xlf",
                        "baseHref": ""
                    },
                    "da": {
                        "translation": "src/i18n/messages.da.xlf",
                        "baseHref": ""
                    }
                }
            }
        },
        "ulrika-e2e": {
            "root": "e2e/",
            "projectType": "application",
            "prefix": "",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "ulrika:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "ulrika:serve:production"
                        }
                    }
                },
                "xliffmerge": {
                    "builder": "@ngx-i18nsupport/tooling:xliffmerge",
                    "options": {
                        "xliffmergeOptions": {
                            "format": "xlf",
                            "srcDir": "src/i18n",
                            "genDir": "src/i18n",
                            "defaultLanguage": "en",
                            "languages": [
                                "sv",
                                "da"
                            ]
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "ulrika"
}
2

Hi @jnfaerch,

I’ve 0 experience with Angular, so I might not be the best person to advice about the config. However, could you try building locally? If it’s the same, then the problem might be with the config. If there’s no problem and that’s how Angular will build the website, I suppose you’d have to add a static index.html file in your deploy and add country based redirects to redirect the users as needed.

3

Thx @hrishikesh

Yeah I should have mentioned that this is a change when I upgrade to ng12 so it’s also in the local build.
I do not know how to solve to get the app running on Netlify though (which I suspect is ‘easily’ done by making the build place ‘en’ in the root).

So any help still appreciated.

5

Fixed it by setting secondary languages (here Danish) to "baseHref": "/da/" and adding a script in package.json to copy the _redirects file to the dist root after ng build (the latter was the actual issue: When there is no build in the dist root, there is no working _redirects file :slight_smile:

1 Like