Home
Support Forums

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

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"
}

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.

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.