Question

我正在尝试使用Microfrontend策略来加载组件父Angular应用程序从localhost:3000在本地运行在localhost:3001上运行的另一个Child Angular应用程序。

我指的是micro frontend博客，其主题是“服务器端渲染/通用渲染”。

仅查看Microfronend的工作原理，我正在创建小型POC。我已经使用CLI创建了两个角度应用程序。

Microfrontend-parent-app运行在localhost:3000，microfrontend-child-app运行在localhost:3001

我已将nginx.conf文件放在Microfrontend-parent-app下的src中，并放在app，assets文件夹级别。在模板中http://localhost:3000/加载的app.component中，

我放了

角度节点服务器应解析#include和virtual。

这是假设一旦拦截URI中的“ / blue”，就会从localhost:3001/blue的子应用程序中加载组件。

因此，我正在localhost:3001/blue运行子级角度应用程序 blue.component在这里加载。

现在，使用Nginx在Angular：3000上运行父级角度应用程序

这是我的nginx.config

    http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    upstream location_blue {
        server localhost:3001;
    }

    server {
        listen       3000;
        ssi on;
        server_name  localhost;

        location / {
            root   "C:\project\Microfrontend-parent-app";
            try_files $uri $uri/ index.html;
        }

        location /blue {
            proxy_pass  http://location_blue;
        }
    }
}

这想从运行在localhost：3001 / blue的子进程中获取组件

但是它没有通过。

任何人都可以使用带有微前端的Angular的NGINX。我不确定我错过了什么？

Angular应用程序之间使用NGINX的Micro Frontends策略不起作用

0 个答案: