angularangular-cli

Is there a reason my dist folder is generating like this in Angular build?


I am taking a class that requires me to use an AWS S3 bucket to upload a static site from my Angular app from a previous assignment. I have run into an issue where my dist folder doesn't have index.html in the root directory (which I need for the S3 static site hosting), and it also has two subfolders, /browser and /server. From my understanding the dist folder should have index.html along with an assets folder and a couple other files. Why is mine generating differently from what I'm seeing as the default online?

Here is my angular.json file, and an image of the file structure of the dist folder:

Image of dist folder structure

angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myFlix-Angular-client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": false
        },
        "@schematics/angular:directive": {
          "standalone": false
        },
        "@schematics/angular:pipe": {
          "standalone": false
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/my-flix-angular-client",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "myFlix-Angular-client:build:production"
            },
            "development": {
              "buildTarget": "myFlix-Angular-client:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "myFlix-Angular-client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "8b2d4922-1479-470a-8e55-a41bcb2b5930"
  }
}


Solution

  • It looks like you are using server side rendering (SSR), where some of the angular UI is generated in the server and passed on to the browser.

    For your use case of uploading the static build to AWS S3, SSR will not work because S3 is for storing files only.

    While creating the angular project from the cli try the following options

    ? What name would you like to use for the new workspace and initial project? test
    ? Which stylesheet format would you like to use? CSS
    ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? **No**
    

    Or you could try prerendeing where the build is fully static and would not require a server.