Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
171 views
in Technique[技术] by (71.8m points)

Angular in docker env : can not import a component in another one

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I was unable to fix this problem, so I decided to recreate my project from scratch, copy-pasting my old code, and the new projects works, with or without Docker. I can figure out why, even trying to make a diff between both projects.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...