在 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 {
}