Angular i18n redirects 404

Support
,
1

I’m developing with Angular 10 and cannot get Netlify and Angular to play along together when I add in Angular’s built-in i18n module.

Before adding the angular/localize package and creating a Spanish language build alongside an English language build everything worked fine. Netlify saw and processed my _redirects file containing:

/*  /index.html 200

and I could load the app and refresh the page no problem.

But after adding the angular/localize package a few things are amiss:

  1. Netlify no longer recognizes my _redirects file and says “No redirect rules processed”. I checked the build and the _redirects file is alongside the index.html file in both builds located at dist/emly/en-us and dist/emly/es.

  2. When I go to the site I get the Netlify Page Not Found message and a 404. I can access both builds by going to either emly4920.netlify.app/es/ or emly4920.netlify.app/en-us. From there I can navigate using links, but then on refresh I get the 404 again.

I’ve tried everything I’ve seen related to this issue, but it doesn’t look like there’s much regarding multiple builds in the dist folder, which is when my issue first manifests.

I think that the fact Netlify won’t recognize my _redirects file is the primary issue, but I’m a bit lost because that file is in both builds alongside the index.html file. The build directory looks ok to me. The index.html files in each build look ok, too.

Here is my angular.json followed by the most recent Netlify build output.

"projects": {
  "emly": {
    "projectType": "application",
    "schematics": {},
    "root": "",
    "sourceRoot": "src",
    "prefix": "app",
    "i18n": {
      "locales": {
        "es": "src/locale/messages.es.xlf"
      }
    },
  "architect": {
    "build": {
      "builder": "angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/emly",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "localize": true,
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/_redirects"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
        }
      }
    },
    "serve": {
      "builder": "angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "emly:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "emly:build:production"
        }
      }
      //removed the rest for this post



2:19:38 PM: Build ready to start
2:19:40 PM: build-image version: be42e453d6c8f171cc2f654acc29c0a8b60e6d93
2:19:40 PM: build-image tag: v3.7.1
2:19:40 PM: buildbot version: 2e812552b08ab95e26a2cbb7168fa2883ead407e
2:19:40 PM: Fetching cached dependencies
2:19:40 PM: Starting to download cache of 158.2MB
2:19:41 PM: Finished downloading cache in 863.918727ms
2:19:41 PM: Starting to extract cache
2:19:49 PM: Finished extracting cache in 8.336396907s
2:19:49 PM: Finished fetching cache in 9.313706122s
2:19:49 PM: Starting to prepare the repo for build
2:19:50 PM: Preparing Git Reference refs/heads/main
2:19:52 PM: Starting build script
2:19:52 PM: Installing dependencies
2:19:52 PM: Python version set to 2.7
2:19:53 PM: Started restoring cached node version
2:19:56 PM: Finished restoring cached node version
2:19:57 PM: v12.18.0 is already installed.
2:19:58 PM: Now using node v12.18.0 (npm v6.14.4)
2:19:58 PM: Started restoring cached build plugins
2:19:58 PM: Finished restoring cached build plugins
2:19:58 PM: Attempting ruby version 2.7.1, read from environment
2:20:00 PM: Using ruby version 2.7.1
2:20:00 PM: Using PHP version 5.6
2:20:00 PM: Started restoring cached node modules
2:20:00 PM: Finished restoring cached node modules
2:20:01 PM: Started restoring cached go cache
2:20:01 PM: Finished restoring cached go cache
2:20:01 PM: go version go1.14.4 linux/amd64
2:20:01 PM: go version go1.14.4 linux/amd64
2:20:01 PM: Installing missing commands
2:20:01 PM: Verify run directory
2:20:03 PM: ​
2:20:03 PM:     ────────────────────────────────────────────────────────────────
2:20:03 PM:   Netlify Build                                                 
2:20:03 PM: ────────────────────────────────────────────────────────────────
2:20:03 PM: ​
2:20:03 PM: ❯ Version
2:20:03 PM:   netlify/build 11.0.1
2:20:03 PM: ​
2:20:03 PM: ❯ Flags
2:20:03 PM:   deployId: 60789fda53e102000758331f
2:20:03 PM: ​
2:20:03 PM: ❯ Current directory
2:20:03 PM:   /opt/build/repo
2:20:03 PM: ​
2:20:03 PM: ❯ Config file
2:20:03 PM:   No config file was defined: using default values.
2:20:03 PM: ​
2:20:03 PM: ❯ Context
2:20:03 PM:   production
2:20:03 PM: ​
2:20:03 PM: ────────────────────────────────────────────────────────────────
2:20:03 PM:   1. Build command from Netlify app                             
2:20:03 PM: ────────────────────────────────────────────────────────────────
2:20:03 PM: ​
2:20:03 PM: $ npm run build
2:20:03 PM: > emly0.0.0 build /opt/build/repo
2:20:03 PM: > ng build
2:20:19 PM: chunk {main} main.js, main.js.map (main) 16.3 kB [initial] [rendered]
2:20:19 PM: chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 142 kB [initial] [rendered]
2:20:19 PM: chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
2:20:19 PM: chunk {styles} styles.js, styles.js.map (styles) 12.7 kB [initial] [rendered]
2:20:19 PM: chunk {vendor} vendor.js, vendor.js.map (vendor) 2.29 MB [initial] [rendered]
2:20:19 PM: Date: 2021-04-15T20:20:19.060Z - Hash: 895fcbc848883722647e - Time: 10379ms
2:20:29 PM: Localized bundle generation complete.
2:20:30 PM: ​
2:20:30 PM: (build.command completed in 27.3s)
2:20:30 PM: ​
2:20:30 PM: ────────────────────────────────────────────────────────────────
2:20:30 PM:   2. Deploy site                                                
2:20:30 PM: ────────────────────────────────────────────────────────────────
2:20:30 PM: ​
2:20:30 PM: Starting to deploy site from 'dist/emly'
2:20:30 PM: Creating deploy tree 
2:20:30 PM: Creating deploy upload records
2:20:31 PM: 0 new files to upload
2:20:31 PM: 0 new functions to upload
2:20:31 PM: Site deploy was successfully initiated
2:20:31 PM: ​
2:20:31 PM: (Deploy site completed in 221ms)
2:20:31 PM: Starting post processing
2:20:31 PM: Post processing - HTML
2:20:31 PM: Post processing - header rules
2:20:31 PM: Post processing - redirect rules
2:20:31 PM: Post processing done
2:20:31 PM: ​
2:20:31 PM: ────────────────────────────────────────────────────────────────
2:20:31 PM:   Netlify Build Complete                                        
2:20:31 PM: ────────────────────────────────────────────────────────────────
2:20:31 PM: ​
2:20:31 PM: Site is live ✨
2:20:31 PM: (Netlify Build completed in 28s)
2:20:31 PM: Caching artifacts
2:20:31 PM: Started saving node modules
2:20:31 PM: Finished saving node modules
2:20:31 PM: Started saving build plugins
2:20:31 PM: Finished saving build plugins
2:20:31 PM: Started saving pip cache
2:20:32 PM: Finished saving pip cache
2:20:32 PM: Started saving emacs cask dependencies
2:20:32 PM: Finished saving emacs cask dependencies
2:20:32 PM: Started saving maven dependencies
2:20:32 PM: Finished saving maven dependencies
2:20:32 PM: Started saving boot dependencies
2:20:32 PM: Finished saving boot dependencies
2:20:32 PM: Started saving rust rustup cache
2:20:32 PM: Finished saving rust rustup cache
2:20:32 PM: Started saving go dependencies
2:20:32 PM: Finished saving go dependencies
2:20:32 PM: Build script success
2:21:04 PM: Finished processing build request in 1m24.854102711s

My site: emly4920.netlify.app/es/

Thank you for any tips here.

1 Like
2

Hey there @podoglyph :wave:

Welcome to the Netlify Forums :netliconfetti: It looks like this thread has been quiet since you first opened it-- I am sorry for the delay!

Are you still encountering this issue? If you are not, please share what your solution was when you have a moment. If you are still encountering this issue, what additional debugging steps have you taken in the past few days? Can you share your most recent build log with us?

Thank you in advance,
Hillary

3

i’ve done the same thing on iis, first you have to build your app with “base-href” option:

 ng build --output-path=dist/fr --prod --bh /fr/
 ng build --output-path=dist/en --prod --bh /en/

and for nginx use this config

location /fr/ {
  alias /var/www/dist/fr/;
  try_files $uri$args $uri$args/ /fr/index.html;
}
location /en/ {
 alias /var/www/dist/en/;
 try_files $uri$args $uri$args/ /en/index.html;
}

and for navigation from /en/someroute to /fr/someroute , you can get the current router url in your component where you have the language switcher

getCurrentRoute() {
    return this.router.url;
}

and when click on a language selector you redirect to the same route with the selected language :

 <li *ngFor="let language of languages;let i=index" >
    <a  href="/{{language.lang}}/#{{getCurrentRoute()}}"  (click)="changeLanguage(language.lang)">
        {{language.lang}}
    </a>
 </li>
1 Like
4

Thanks for sharing this, @Penn598 :netliconfetti: @podoglyph , let us know if this works for you!

1 Like
5

Hi - im suffering the same problem! were you able to resolve this? Many Thanks

6

@nacoleman perhaps you can share your slug/site name so we can look into this for you?

Have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information.

7

I am interested in help. I have the same problem but the above solution is not suitable.
here is my url: https://mulume.netlify.app/

8

Your website is available here: Jean-Paul NG (mulume.netlify.app). Please check: [Support Guide] I’ve deployed my site but I still see "Page not found”