在 docker 容器上運行 Angular 應用程序時出現“Cannot GET /”錯誤

Question

我正在嘗試在 docker 上運行 Angular 應用程序，但是當我嘗試訪問某個頁面時，我收到了這個錯誤。

我試圖在angular.json將aot更改為 false ，但它沒有用。

這是我的 Dockerfile：

WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install -g @angular/cli
RUN npm install
COPY . ./
RUN npm run build
EXPOSE 8080
CMD [ "node", "server.js" ]

這是我的 package.json：

{
    "name": "app-name",
    "version": "0.0.2",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --host 0.0.0.0",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "update": "ncu -u -x firebase,@angular/fire"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^14.0.0",
        "@angular/cdk": "~14.0.0",
        "@angular/common": "~14.0.0",
        "@angular/compiler": "~14.0.0",
        "@angular/core": "~14.0.0",
        "@angular/fire": "^7.3.0",
        "@angular/flex-layout": "^13.0.0-beta.38",
        "@angular/forms": "~14.0.0",
        "@angular/material": "^14.0.0",
        "@angular/platform-browser": "~14.0.0",
        "@angular/platform-browser-dynamic": "~14.0.0",
        "@angular/pwa": "^14.0.0",
        "@angular/router": "~14.0.0",
        "@angular/service-worker": "~14.0.0",
        "@fortawesome/angular-fontawesome": "^0.11.0",
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@ngx-translate/core": "^14.0.0",
        "@ngx-translate/http-loader": "^7.0.0",
        "bootstrap": "^5.1.3",
        "crypto-js": "^4.1.1",
        "file-saver": "^2.0.5",
        "firebase": "^8.10.0",
        "jwt-decode": "^3.1.2",
        "material-design-icons": "^3.0.1",
        "ng2-pdf-viewer": "^9.0.0",
        "ngx-mask": "^14.0.0",
        "ngx-toastr": "^14.3.0",
        "rxjs": "^7.5.5",
        "tslib": "^2.4.0",
        "zone.js": "^0.11.5"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^14.0.0",
        "@angular/cli": "~14.0.0",
        "@angular/compiler-cli": "~14.0.0",
        "@angular/language-service": "~14.0.0",
        "@types/crypto-js": "^4.1.1",
        "@types/jasmine": "~4.0.3",
        "@types/jasminewd2": "~2.0.10",
        "@types/node": "~17.0.40",
        "codelyzer": "^6.0.2",
        "jasmine-core": "~4.1.1",
        "jasmine-spec-reporter": "~7.0.0",
        "karma": "~6.3.20",
        "karma-chrome-launcher": "~3.1.1",
        "karma-coverage-istanbul-reporter": "~3.0.3",
        "karma-jasmine": "~5.0.1",
        "karma-jasmine-html-reporter": "^2.0.0",
        "protractor": "~7.0.0",
        "ts-node": "~10.8.1",
        "tslint": "^6.1.3",
        "typescript": "^4.7.3"
    }
}

如果有人已經遇到此錯誤並且知道如何解決它，我將不勝感激，謝謝。

Answer 1

我在app-routing.module.ts上使用useHash: true解決了這個問題。

現在我得到了類似 something.com/#/someParameter 的鏈接

@NgModule({
    imports: [RouterModule.forRoot(routes, {relativeLinkResolution: 'legacy', useHash: true})],
    exports: [RouterModule]
})
export class AppRoutingModule {
}