Issue with Netlify SPA Configuration: JS and CSS Files Redirecting to index.html

  • Site name: https://master--astronewsinfo.netlify.app/
  • Domain: astronews.news, purchased on Namecheap, Netlify DNS connected
  • Framework: Angular 16.2.14
  • Configuration (netlify.toml):
    [build] command = "ng build --configuration production" publish = "dist/astronews.ui" [build.environment] api_key = "" [[redirects]] from = "/*" to = "/index.html" status = 200 force = true

After deploying the app, I found that the JS/CSS files are sent with incorrect MIME type (html/text). Downloading the files via curl showed that instead of JS or CSS files, the index.html is sent. ChatGPT suggested that the server unable to find the requested files, and because of the redirect rule (SPA) server sends the index.html. In Deploy File Browser file index.html is placed alongside the needed JS/CSS files, so they are present on the server. My guess is that it is the configuration problem, but as I’m new to web development and hosting, I can’t figure out the solution on my own. Thanks in advance.

  • Build log:
    1:10:20 PM: build-image version: ecdc8b770f4a0193fd3f258c1bc6029e681813a4 (focal)
    1:10:20 PM: buildbot version: 778f625377bd173cd306eb0b71ebeb25fdfff620
    1:10:20 PM: Fetching cached dependencies
    1:10:20 PM: Starting to download cache of 116.3MB
    1:10:22 PM: Finished downloading cache in 1.838s
    1:10:22 PM: Starting to extract cache
    1:10:23 PM: Finished extracting cache in 1.583s
    1:10:23 PM: Finished fetching cache in 3.47s
    1:10:23 PM: Starting to prepare the repo for build
    1:10:23 PM: Preparing Git Reference refs/heads/master
    1:10:24 PM: Custom publish path detected. Proceeding with the specified path: ‘dist/astronews.ui’
    1:10:24 PM: Custom build command detected. Proceeding with the specified command: ‘ng build --configuration production’
    1:10:25 PM: Starting to install dependencies
    1:10:25 PM: Python version set to 3.8
    1:10:25 PM: Attempting Ruby version 2.7.2, read from environment
    1:10:26 PM: Using Ruby version 2.7.2
    1:10:26 PM: Started restoring cached go cache
    1:10:26 PM: Finished restoring cached go cache
    1:10:28 PM: go version go1.19.13 linux/amd64
    1:10:28 PM: Using PHP version 8.0
    1:10:29 PM: Started restoring cached Node.js version
    1:10:30 PM: Finished restoring cached Node.js version
    1:10:30 PM: v18.20.4 is already installed.
    1:10:31 PM: Now using node v18.20.4 (npm v10.7.0)
    1:10:31 PM: Enabling Node.js Corepack
    1:10:31 PM: Started restoring cached build plugins
    1:10:31 PM: Finished restoring cached build plugins
    1:10:31 PM: Started restoring cached corepack dependencies
    1:10:31 PM: Finished restoring cached corepack dependencies
    1:10:31 PM: No npm workspaces detected
    1:10:31 PM: Started restoring cached node modules
    1:10:31 PM: Finished restoring cached node modules
    1:10:31 PM: Installing npm packages using npm version 10.7.0
    1:10:32 PM: up to date, audited 1027 packages in 1s
    1:10:32 PM: 120 packages are looking for funding
    1:10:32 PM: run npm fund for details
    1:10:32 PM: found 0 vulnerabilities
    1:10:32 PM: npm packages installed
    1:10:33 PM: Successfully installed dependencies
    1:10:33 PM: Starting build script
    1:10:34 PM: Detected 1 framework(s)
    1:10:34 PM: “angular” at version “16.2.14”
    1:10:34 PM: Section completed: initializing
    1:10:35 PM: ​
    1:10:35 PM: Netlify Build
    1:10:35 PM: ────────────────────────────────────────────────────────────────
    1:10:35 PM: ​
    1:10:35 PM: ❯ Version
    1:10:35 PM: @netlify/build 29.53.0
    1:10:35 PM: ​
    1:10:35 PM: ❯ Flags
    1:10:35 PM: accountId: 66c0ef93f1bcf7b0660d5fe6
    1:10:35 PM: baseRelDir: true
    1:10:35 PM: buildId: 66c1f2b1c532a900084c5ca5
    1:10:35 PM: deployId: 66c1f2b1c532a900084c5ca7
    1:10:35 PM: ​
    1:10:35 PM: ❯ Current directory
    1:10:35 PM: /opt/build/repo
    1:10:35 PM: ​
    1:10:35 PM: ❯ Config file
    1:10:35 PM: /opt/build/repo/netlify.toml
    1:10:35 PM: ​
    1:10:35 PM: ❯ Context
    1:10:35 PM: production
    1:10:35 PM: ​
    1:10:35 PM: ❯ Loading plugins
    1:10:35 PM: - @netlify/angular-runtime@2.1.0 from Netlify app
    1:10:36 PM: This site does not seem to be using Angular 17 or later. Found: 16.2.12.
    1:10:36 PM: Skipping build plugin.
    1:10:36 PM: ​
    1:10:36 PM: build.command from netlify.toml
    1:10:36 PM: ────────────────────────────────────────────────────────────────
    1:10:36 PM: ​
    1:10:36 PM: $ ng build --configuration production
    1:10:38 PM: - Generating browser application bundles (phase: setup)…
    1:10:42 PM: :heavy_check_mark: Browser application bundle generation complete.
    1:10:42 PM: :heavy_check_mark: Browser application bundle generation complete.
    1:10:42 PM: - Copying assets…
    1:10:42 PM: :heavy_check_mark: Copying assets complete.
    1:10:42 PM: - Generating index html…
    1:10:42 PM: :heavy_check_mark: Index html generation complete.
    1:10:42 PM: - Generating service worker…
    1:10:42 PM: :heavy_check_mark: Service worker generation complete.
    1:10:42 PM: Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
    1:10:42 PM: styles.457b33e537e4a79c.css | styles | 33.47 kB | 6.60 kB
    1:10:42 PM: polyfills.aba65104686ea3f3.js | polyfills | 33.03 kB | 10.63 kB
    1:10:42 PM: runtime.7c28ae8f0cf60e7e.js | runtime | 902 bytes | 524 bytes
    1:10:42 PM: main.8906c05928d1550c.js | main | 109 bytes | 88 bytes
    1:10:42 PM:
    1:10:42 PM: | Initial Total | 67.49 kB | 17.83 kB
    1:10:42 PM:
    1:10:42 PM: Build at: 2024-08-18T13:10:42.627Z - Hash: 78e525685f0472b5 - Time: 4338ms
    1:10:42 PM:
    1:10:42 PM: Warning: /opt/build/repo/src/app/header/header.component.scss exceeded maximum budget. Budget 2.00 kB was not met by 986 bytes with a total of 2.96 kB.
    1:10:42 PM:
    1:10:42 PM: Warning: /opt/build/repo/src/app/mobile-menu/mobile-menu.component.scss exceeded maximum budget. Budget 2.00 kB was not met by 276 bytes with a total of 2.27 kB.
    1:10:42 PM:
    1:10:42 PM:
    1:10:42 PM: ​
    1:10:42 PM: (build.command completed in 5.7s)
    1:10:42 PM: ​
    1:10:42 PM: Deploy site
    1:10:42 PM: ────────────────────────────────────────────────────────────────
    1:10:42 PM: ​
    1:10:42 PM: Starting to deploy site from ‘dist/astronews.ui’
    1:10:42 PM: Calculating files to upload
    1:10:42 PM: 1 new files to upload
    1:10:42 PM: 0 new functions to upload
    1:10:42 PM: Section completed: deploying
    1:10:42 PM: Site deploy was successfully initiated
    1:10:42 PM: ​
    1:10:42 PM: (Deploy site completed in 235ms)
    1:10:43 PM: Starting post processing
    1:10:43 PM: Post processing done
    1:10:43 PM: Section completed: postprocessing
    1:10:43 PM: Post processing - redirect rules
    1:10:43 PM: Skipping form detection
    1:10:43 PM: Post processing - header rules
    1:10:43 PM: Site is live :sparkles:
    1:10:43 PM: ​
    1:10:43 PM: Netlify Build Complete
    1:10:43 PM: ────────────────────────────────────────────────────────────────
    1:10:43 PM: ​
    1:10:43 PM: (Netlify Build completed in 7.5s)
    1:10:43 PM: Caching artifacts
    1:10:43 PM: Started saving node modules
    1:10:43 PM: Finished saving node modules
    1:10:43 PM: Started saving build plugins
    1:10:43 PM: Finished saving build plugins
    1:10:43 PM: Started saving corepack cache
    1:10:43 PM: Finished saving corepack cache
    1:10:43 PM: Started saving pip cache
    1:10:43 PM: Finished saving pip cache
    1:10:43 PM: Started saving emacs cask dependencies
    1:10:43 PM: Finished saving emacs cask dependencies
    1:10:43 PM: Started saving maven dependencies
    1:10:43 PM: Finished saving maven dependencies
    1:10:43 PM: Started saving boot dependencies
    1:10:43 PM: Finished saving boot dependencies
    1:10:43 PM: Started saving rust rustup cache
    1:10:43 PM: Finished saving rust rustup cache
    1:10:43 PM: Started saving go dependencies
    1:10:43 PM: Finished saving go dependencies
    1:10:43 PM: Build script success
    1:10:43 PM: Section completed: building
    1:10:48 PM: Uploading Cache of size 116.3MB
    1:10:49 PM: Section completed: cleanup
    1:10:49 PM: Finished processing build request in 29.766s

You’re asking us to force the redirect, thus the issue.