如何使用两个 url 运行一个 Angular 应用程序？答案

【问题标题】：How to run one angular app with two urls?如何使用两个 url 运行一个 Angular 应用程序？
【发布时间】：2018-12-07 15:26:30
【问题描述】：

想知道有什么方法可以让我们使用两个渲染 URL 运行一个 Angular 6 应用程序吗？

例子：

www.domain.com/abc1

www.domain.com/abc2

我们有两个将使用同一个应用程序的 url，但不同之处在于，每当呈现 abc1 时，显示的数据就不同，然后 abc2。两者共享相同的代码/应用程序。

不确定如何做到这一点或那是可能的？

【问题讨论】：

当您说“不同之处在于每次渲染 abc1 时显示的数据不同” - 您的意思是说后端不同？
否则，Angular 和 Angular 应用程序并不真正关心您在哪里部署和渲染它们。数据来自后端 - 或者有时，基于配置，来自不同的环境文件。
网络调用将是 REST 调用，但呈现给用户看起来像两个子域和两个应用程序，但在内部它应该是同一个应用程序。此外，在 abc1 到 abc2 之间导航时，希望避免页面刷新，因为导航可以反之亦然

标签： javascript angular web-applications

【解决方案1】：

如果数据来自后端并且 Angular 应用程序的数据源不同，您应该尝试以下操作：

ng build --prod --base-href "/abc1/"

ng build --prod --base-href "/abc2/"

【讨论】：

会创建两个部署文件夹吗？

【解决方案2】：

您可以根据要加载的视图创建不同的布局。

【讨论】：

【解决方案3】：

对于列出的其他方法，另一种方法是实际使用相同的应用程序，只是在不同的路线上。

假设您正在列出 Todos，但在 /abc1 上，它们来自 server-1.com/api，在 /abc2 上，它们来自 server-2.com/api。

您首先要创建您的应用程序路由模块，以捕获 url 的“子域”（正如您所说的，尽管它实际上是一个虚拟目录）部分。所以，app-routing.module.ts 有这个路由：

const routes = [
  { path: ':subdomain', component: TodosComponent },
];

// and the rest of it.

（为简单起见，我不在这里做模块）。

所以现在您的 TodosComponent 只需读取“子域”并从适当的后端获取内容：

class TodosComponent implements OnInit {
    // inject the backend service (or more) and activated route
    constructor(private backend: BackendService,
      private route: ActivatedRoute) {
    }

    // on init, get that route param
    ngOnInit() {
        this.route.params.subscribe(params => {
            // catch the "subdomain" param
            const subdomain =  params.subdomain;
            // now you'd move this to a service, but here:
            if (subdomain === 'abc1') {
                this.backend.get('http://server-1.com/api').subscribe(...);
            } else if (subdomain === 'abc2') {
                this.backend.get('http://server-2.com/api').subscribe(...);
            } else {
                // add more as needed here.
            }
        })
    }
}

现在，当您在子域之间切换时，这将是完全作为 SPA 工作的同一个应用。

在实际的应用程序中，您的应用程序路由会将其传递给（惰性）模块，该模块将构建所有组件、服务等，以便您可以使用此 url 段/路由参数对所有设置进行参数化。

【讨论】：