docker env 中的 Angular：无法在另一个中导入组件答案

【问题标题】：Angular in docker env : can not import a component in another onedocker env 中的 Angular：无法在另一个中导入组件
【发布时间】：2021-01-15 06:03:22
【问题描述】：

在使用 docker 和 nginx 运行我的 Angular 应用程序时，我遇到了一种奇怪的行为。

我有两个组件，分别名为 glop-list（其中包含一个带有 glops 列表的属性）和 glop-detail。我在glop-list 模板中包含app-glop-detail 选择器（这样我可以在选择时看到glop 的详细信息），并在glop-list-component.ts 中导入glop-detail-component（所以我可以调用glop-list 的方法，如'update' 来修改选定的 glop)。

当我使用yarn start 并使用 localhost:4200 访问应用程序时，我可以看到我的 glops 列表和详细组件：

List :
1   KIT-001 
2   KAT-001
Glop-detail component.

但是当我使用 'docker-compose up --build' 在 docker 中运行应用程序并使用 localhost:80 访问应用程序时，列表为空：

List :

控制台没有错误。如果我在glop-detail.component.ts 中评论以下行，则会显示该列表：

// import { GlopListComponent } from './glop-list.component';

我在 Github 上的一个小项目中重现了这种行为：

https://github.com/poirierje/glop_angular_issue

我不知道是docker还是nginx的问题。

谁能给我解释一下会发生什么？更全局，如何调试此类问题？

David Maze 评论后编辑：

最小可复制示例：

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

【问题讨论】：

如果您可以在问题本身而不是链接后面包含minimal reproducible example，那将非常有帮助。
感谢您的评论。添加了最小的示例，希望对您有所帮助。我试图删除docker的nginx部分（直接运行'ng serve'），它解决了问题。

标签： angular docker nginx

【解决方案1】：

我无法解决这个问题，所以我决定从头开始重新创建我的项目，复制粘贴我的旧代码，并且无论是否使用 Docker，新项目都可以正常工作。我可以找出原因，甚至尝试在两个项目之间进行区分。

【讨论】：