Angular routing (AuthGuard) inside a Docker Container

I have just deployed my Angular project inside a Docker Container. Path for me to access to the site is: localhost:4200, because on my machine is listening on 4200, but inside the container is listening at port 80.
I’m using Angular routing, here’s the file:

const routes: Routes = [
  { path: 'Login', component: LandingPageComponent},
  { path: '', component: AppComponent},
  { path: 'Home', component: BlogHomeComponent, canActivate:[AuthGuard],
  children:[
    { path: '', component: BlogHomeComponent},
    { path: "Posts", component: PostsComponent},
    { path: 'NewPost', component: CreatePostComponent},
    { path: 'Post/:id', component: SinglePostComponent}
]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is, instead, my AuthGuard:

@Injectable({
  providedIn: 'root'
})
export class AuthGuard  {



constructor(private authService: AuthService, private route: Router){}

  canActivate():boolean {
    if(this.authService.isLoggedIn() == true){
      return true;
    } else {
      this.route.navigateByUrl("");
      return false;
    }
  }
}

It should check everytime I try to access routes if I’m logged. And it works fine when I run the app from consolde (without docker). Everytime I try to access a path, it checks if I’m logged, and when I’m not it throws me directly to the Login page. But this is not working when I deployed the app inside the docker container. When I go to a page I’m not allowed to, I get this error in the browser:

Why that? If I go to the exact same link (localhost:4200/Home/Posts) when I’m running it from angular cli (with ng server), it actually push me back to the login if I’m not logged into.

EDIT

Here is the Dockerfile of the Angular project:

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod

FROM nginx:alpine
COPY --from=node /app/dist/front-end-blog-demo /usr/share/nginx/html

And here’s the Docker-compose file, because I’m running with docker-compose both backend and frontend:

version: "3.8"
services:
  frontend:
    build: ./FrontEnd-BlogDemo
    ports:
      - 4200:80
  backend:
    build: ./BackEnd-BlogDemo
    ports:
      - 8080:80

>Solution :

You have to setup your webserver correctly. If a page was not found, then the webserver should return the index.html. It should never throws a 404.

You provide no information about your Docker-Image, so I only can refer you to this page https://angular.io/guide/deployment#server-configuration

Edit

Yes, nginx is your webserver. You need a config-file so that nginx never returns a 404.
Here is one of mine projects with a nginx on-board. I marked the important row for you.
https://github.com/AndreKoepke/home-system/blob/master/frontend/nginx/conf.d/default.conf#L39

You can also have look on my dockerfile, to see how to put the config to nginx.

And at the end a little hint: You used npm installin your dockerfile. You should use npm ci instead.