Javascript 如何使用两个URL运行一个angular应用程序？

想知道是否有任何方法，我们可以运行一个angular 6应用程序和两个渲染URL

例如：

www.domain.com/abc1

www.domain.com/abc2

我们有两个URL将使用相同的应用程序，但不同之处在于，无论何时呈现abc1，显示的数据都不同于abc2。 两者共享相同的代码/应用程序

---

不确定如何做到这一点或那一点？

如果数据来自后端，且Angular应用程序的数据源不同，则应尝试以下方法：

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

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

---

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

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

假设您正在列出TODO，但在

/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. 

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

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

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段/路由参数参数化所有设置。

当你说“差异在于每当呈现abc1时，显示的数据都是不同的”——你的意思是，后端是不同的？否则，Angular和Angular应用程序并不真正关心部署和渲染它们的位置。数据来自后端，或者有时，根据配置，来自不同的环境文件。网络调用将是REST调用，但呈现给用户的看起来像两个子域和两个应用程序，但在内部它应该是相同的应用程序。另外，在abc1到abc2之间导航时，希望避免页面刷新，因为导航将用于导航，反之亦然。它会创建两个部署文件夹吗？