Thiết kế website giá rẻ

Question

I have an Angular (v17.2) web app project that is building and running locally just fine, but when I try to deploy (gcloud app deploy) it to Google’s App Engine, the app does is not served properly.

Apparently GAE can build it, but when index.html is served I get “404 Not Found“

The one and only GAE’s build log that intrigued me reads the following:

Using config appstart.Config{Runtime:”nodejs22″, Entrypoint:appstart.Entrypoint{Type:”Default”, Command:”/serve”, WorkDir:””}, MainExecutable:””}

MainExecutable:"" … is that right?

I read a lot of documentation about the app.yaml and both angular.json and tsconfig.json config files and their possible attributes, but I could not find what else there might be that I can still be doing wrong.

I even created a new Angular example project (with ng new) and tried to deploy it with the absolute defaults, but that also had the same effect.

My config files are as follows:

app.yaml:

runtime: nodejs22

service: [app-name]

handlers:

- url: /(.*.css)
  static_files: dist/[app-name]/1
  upload: dist/[app-name]/(.*.css)

- url: /(.*.html)
  static_files: dist/[app-name]/1
  upload: dist/[app-name]/(.*.html)

# Serve the root file
- url: /
  static_files: dist/[app-name]/index.html
  upload: dist/[app-name]/index.html

# Catch-all rule, responsible from handling Angular application routes (deeplinks).
- url: /.*
  static_files: dist/[app-name]/index.html
  upload: dist/[app-name]/index.html
  login: admin
  redirect_http_response_code: 301
  secure: always

Is there anything wrong the handlers’ values and/or order?

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "adm-portal": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/[app-name]",
            "index": {
              "input": "src/index.html",
              "output": "index.html"
            },
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": [
              "sweetalert2"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "staging": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ]
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "[app-name]:build:production"
            },
            "staging": {
              "buildTarget": "[app-name]:build:staging"
            },
            "development": {
              "buildTarget": "[app-name]:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "[app-name]:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

package.json:

{
  "name": "[app-name]",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@abacritt/angularx-social-login": "^2.2.0",
    "@angular/animations": "^17.2.0",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/router": "^17.2.0",
    "rxjs": "~7.8.0",
    "sweetalert2": "^11.12.3",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.2.0",
    "@angular/cli": "^17.2.0",
    "@angular/compiler-cli": "^17.2.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.3.2"
  }
}

.gcloudignore:

# This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore

.gcloudignore

# If you would like to upload your .git directory, .gitignore file
# or files from your .gitignore file, remove the corresponding line below:
.git
.gitignore
#!include:.gitignore

# Ensure the dist directory is included (where build output goes)
!dist/

# backup files typically ending with a tilde (~)
*~

# node_modules directory, which contains package dependencies
/node_modules/

# e2e directory used for end-to-end tests
/e2e/

# hidden files and directories (e.g., .env, .gitconfig) and configuration files
^(.*/)?..*$

# all JSON files
#^(.*/)?.*.json$

# all Markdown files (README/text files)
^(.*/)?.*.md$

# all YAML files
**/*.yaml$

# except for `app.yaml`
!app.yaml

# LICENSE file
^LICENSE

If there’s any other info/log you may need to analyze this better, please let me know.

Any and all help is greatly appreciated!

Thiết kế website giá rẻ

Danh mục

Angular 17 web app deploy to Google App Engine not working