同一标签页运行Angular 1与Angular 4的可行性咨询

当然可以在同一标签页内打开运行在4200端口的Angular 4应用，本质上这就是普通的网页跳转操作，和端口差异没有直接冲突，下面给你两种常用的实现方式：

• 使用普通HTML链接标签
  在你的AngularJS 1页面中，添加一个带有target="_self"属性的<a>标签即可，示例代码如下：

  <a href="http://localhost:4200" target="_self">打开Angular 4应用</a>
  

  target="_self"是浏览器的默认行为，其实就算不写这个属性，默认也会在当前标签页跳转，加上只是更明确而已。

• 通过AngularJS代码触发跳转
  如果你需要在AngularJS的控制器或指令中通过逻辑触发跳转，可以使用$window服务修改当前页面的URL，示例代码：

  angular.module('yourApp').controller('YourController', function($window) {
    this.goToAngular4 = function() {
      $window.location.href = 'http://localhost:4200';
    };
  });
  

  调用这个方法后，浏览器会直接在当前标签页加载4200端口的Angular 4应用。

需要注意的小细节：

• 确保你的Angular 4应用服务已经正常启动在4200端口，否则跳转后会出现无法访问的错误。
• 虽然localhost下不同端口属于跨域环境，但页面跳转这类操作不受浏览器跨域限制（跨域限制主要针对AJAX请求、Cookie共享等场景），所以不用担心跳转被拦截。
• 不要误加target="_blank"属性，否则会在新标签页打开应用。

内容的提问来源于stack exchange，提问作者user2453753