I'm facing a curious behavior when running my Angular app with docker and nginx.
I have two components named glop-list
(which contains a property with a list of glops) and glop-detail
. I include app-glop-detail
selector in glop-list
template (so I can see details of a glop when selected), and import glop-detail-component
in glop-list-component.ts
(so I can call a method of glop-list like 'update' to modify the selected glop).
When I use yarn start
and access app using localhost:4200, I can see my list of glops, and the detail component :
List :
1 KIT-001
2 KAT-001
Glop-detail component.
But when I run the app in docker using 'docker-compose up --build' and access app using localhost:80, the list is empty :
List :
There is no error in console. The list appears if I comment the following line in glop-detail.component.ts
:
// import { GlopListComponent } from './glop-list.component';
I reproduced this behavior in a tiny project you can find on Github :
https://github.com/poirierje/glop_angular_issue
I can not figure out if the problem is about docker or nginx.
Could any one explain to me what happens, please ? More globally, how to debug this kind of issues?
EDIT after David Maze comment:
Minimal reproductible example :
glops-routing.module.ts
@NgModule({
imports: [RouterModule.forChild([{ path: 'glops', component: GlopListComponent }])],
exports: [RouterModule]
})
export class GlopsRoutingModule { }
glop-list.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-glop-list',
template: `
List of glops : <span *ngFor="let glop of glopList">{{glop.id}} ; </span>
<p>Detail :</p>
<app-glop-detail></app-glop-detail>
`,
styleUrls: []
})
export class GlopListComponent {
glopList: any[] = [{ "id": 1 }, { "id": 2 }];
}
glop-detail.component.ts
import { Component } from '@angular/core';
import { GlopListComponent } from './glop-list.component';
@Component({
selector: 'app-glop-detail',
template: `<div>Glop-detail component.</div>`,
styleUrls: []
})
export class GlopDetailComponent { }
nginx.conf
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
server {
listen 80;
root /var/www/htdocs;
location / {
try_files $uri $uri/ /index.html;
}
}
}
FROM node:15.5.0-slim AS build
WORKDIR /app
COPY . .
COPY /nginx/nginx.conf .
RUN npm install && npm run build:dev && rm -rf node_modules/
FROM nginx:1.18.0-alpine as runtime
COPY --from=build /app/dist/glop /var/www/htdocs
COPY --from=build /app/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80