在 WebBrowser 控件中浏览 Angular 应用程序

Question

这有点奇怪，但我想在 WinForm 应用程序的 WebBrowser 控件中查看我们的 Angular 应用程序。

Angular 应用程序在本地运行 npm run start 或 ng serve，这在我系统上的所有浏览器中都运行良好（Chrome , FF, Edge, IE).

通过 WebBrowser 控件访问站点 (http://localhost:4200/login) 时，我不断检索状态 404。

我已经尝试搜索一些关于此事和 Angular 网络服务器的可访问性的文档，但找不到任何内容。我最好的猜测是站点运行在某种 node.js 进程中，WinForm 应用程序无法访问它，或者无法正确路由到 Angular 应用程序，但我可以'找到这个理论的任何来源。

你可能想知道为什么我要尝试让它工作，好吧，我想看看 Navigated-事件是否仍然发生在我们新的 Angular 应用程序中，因为它出现事实并非如此，这个事件是在我们的 AngularJS 应用程序中触发的。所以它只是一个 test/poc 应用程序。

旁注：WebBrowser 控件能够连接到我们拥有的 AngularJS 应用程序（也运行本地），但这个是运行通过 IIS Express。这就是为什么我认为这可能是一个 webserver/routing 问题。

关于我目前所构建内容的更多详细信息。

Form1.Designer.cs

// All of the other WinForm stuff
private System.Windows.Forms.WebBrowser v2Browser;

Form1.cs

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        v2Browser.Navigate("http://localhost:4200/login");
    }

    private void V2BrowserNavigated(object sender, WebBrowserNavigatedEventArgs e)
    {
        System.Diagnostics.Trace.Write($"v2 has navigated to `{e.Url}`." + Environment.NewLine);
    }
}

用于启动网络服务器的 NG 命令

> ng serve --watch --sourcemap=false

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Date: 2017-10-23T14:43:54.585Z
Hash: 54a4c907e66e478979a5
Time: 26736ms

请求（通过 Fiddler 捕获）

GET http://localhost:4200/login HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
If-None-Match: W/"654-dUFWfqPxZMcM1Ej8ZbZ0A8+KsiA"
Host: localhost:4200
Connection: Keep-Alive

响应（通过 Fiddler）

HTTP/1.1 404 Not Found
X-Powered-By: Express
Access-Control-Allow-Origin: *
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 144
Date: Mon, 23 Oct 2017 14:44:51 GMT
Connection: keep-alive

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /login</pre>
</body>
</html>

所以我收到的不是什么错误，只是 404 响应。

Answer 1

考虑到我无法通过 ng serve 访问托管应用程序，我决定仅通过 ng build 构建应用程序并将新的 IIS 网站指向输出文件夹。

这很有用，所以它解决了我的问题，但并不是我真正想要的。

在使用了 IIS 站点之后，我还发现我的问题的解决方案是在 CLI 中使用 --host 参数。

ng serve --port 8080 --host 0.0.0.0 --disable-host-check

将运行站点放在本地，您将能够通过不使用 localhost 连接到它。解决了我的问题！

在 WebBrowser 控件中浏览 Angular 应用程序

Browse an Angular app inside a WebBrowser control

webbrowser-control

winforms

node.js

angular-cli

angular