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