asp.net core mvc和angular项目的一些问题
最近公司布置任务，用asp.net core mvc和angular改写原来的一个用Silverlight做的项目。从来没搞过，找了两本书看了一天，又看了一天代码，大致心里有底了，就开始动手。没想到一上来就碰到了头痛的问题。
首先是第一次调试后，修改了typescript，却不会自动编译。花了不少功夫才明白，原来不要用缺省的IISExpress，另外建了个调试profile，关键是类型设为Project，这下就方便了。F5调试后，随时修改template或者typescript，马上就自动重新编译。
第二个问题是无法从asp.net core mvc做的web api取到数据。stackoverflow上的一条回答严重误导了我。它说web api和angular不能发布到同一个端口。结果折腾了半天还是不行。用ng serve来加载angular网页，可以从web api取到数据，但以Release模式发布到IIS上就不行了。怀疑是跨域即CORS的问题，但怎么设也不通。折腾了半天，最后用Debug模式发布，可以取到数据了。但是，项目中要求和win form通信。本来win form中使用WebBrowser控件来访问Silverlight，因为WebBrowser控件默认的模式是IE 7.0，而angular不支持IE 7.0，所以无法显示。通过设置注册表，设定为仿真IE 11，但还是无法显示。如果用其它控件，CefSharp可以显示。问题是win form项目需要以Click-once方式部署，而过去和CefSharp这个控件打过交道，Click-once部署时无法将所需dll文件打包进去。查了下资料，现在似乎可以了。但鉴于过去的痛苦经验，不想试。
本来以为很简单的事情，却老是搞不定。最后通过console.log调试，才发现其实是路由问题。以前做过asp.net mvc 1.0，所以知道路由是怎么回事，加了条web api的路由，马上就顺利取到了数据。用WebBrowser控件访问，也成功了。
这下终于明白几点：
1.Debug模式下，缺省是用angular cli来加载angular，运行在和wep api不同的端口，而WebBrowser控件骨子里是IE 7.0，可能不支持CORS，所以访问失败。
2.Release模式下，是用IIS加载静态文件index.html。如果不给web api加路由，所有对/api/。。。路径的访问即调用web api都被转到index.html，所以取不到数据。加一条路由，就能顺利访问/api/ 下面的web api方法。这样，asp.net core mvc做的web api和angular发布到同一端口，和平共处。又因为是同一端口，没有CORS的问题，所以WebBrowser控件可以顺利访问。也就是说，如果通过WebBrowser控件访问angular，必须以Release模式，将web api和angular发布到同一端口，然后为web api加条路由。
第三个问题是如何从angular访问win form里的C#方法。
以前是在C#里，将一个类加上ComVisible(true)属性，然后把这个对象赋给WebBrowser控件的ObjectForScripting属性，就可以在javascript里，通过window.external.<方法名>来调用了。但是在angular里却不行。也花了点时间，在stackoverlow上找到一条回答，有启发。最后发现应该这样做：
1. index.html里的head部分里加一句<script src="winformCaller.js" ></script>
2.这个winformCaller.js里：
function testCall(arg) {
if (typeof(window.external.foo) !== "undefined") {
window.external.foo(arg);
}
}3. typescript里，这样调用：
export function callWinfom(arg) {
if (typeof(testCall) !== "undefined") {
testCall(arg);
}
}4. 在angular.json文件里，把这个winformCaller.js加到assets一栏。
至于从win form里访问typescript，这样做：
1. webBrowserControl1.InvokeScript("callAngularFromWinform", parameters);
2. 在index.html的body末尾，加一句：
<script src=‘callAngular.js‘ ></script>
3.callAngular.js：
function callAngularFromWinform(arg) {
window.callAngular(arg);
}4. typescript里：
window["callAngular"] = (arg) => {
//做些事情
};5.同样， 在angular.json文件里，把这个callAngular.js加到assets一栏。
我的理解是因为typescript编译后，函数名字都改了，所以直接InvokeScript不行。
另外值得一提的是这里的 if (typeof(testCall) !== "undefined")，容易误写为if (testCall !== undefined) ，这样写，如果testCall没有参数，倒也行，但这就给人以成功的错误假象。如果testCall有参数，就不正常了。如果不知道这个问题，也要花不少时间调试才能解决。这固然和javascript的设计缺陷有关，或者说这不是javascript的good parts，但必须了解。
解决了部署以及和win form双向通信的问题，剩下的就感觉简单多了，用了一天时间，就改写了全部业务逻辑代码，再花了几天调试界面，就大功告成。