在 docker 容器上运行 Angular 应用程序时出现“Cannot GET /”错误

Question

I'm trying to run a Angular App on docker, but when I try to access some page, I get this error .

I've tried to change the aot to false at angular.json , but it didn't work.

Here is my 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" ]

and here is my 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"
    }
}

If anyone has already faced this error and knows how to solve it, I would greatly appreciate it, thanks.

Answer 1

I solved the problem using the useHash: true on my app-routing.module.ts .

Now I got link like something.com/#/someParameter

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