Angular可以与任何支持http和websocket的服务器进行通信。首先，我们使用node.js创建一个typescript语言的网络服务器。1.创建一个webserverStep1创建一个空项目，命名为service。名字可以根据情况选择。使用命令行，npminit-yfunction:初始化，添加一个默认的package.json使用命令行，npmi@types/node--savefunction:importnode.js但是node.js不识别typescript，你需要用typescript编译成javascript。首先，创建一个名为tsconfig.json的新配置文件。写入如下：{"compilerOptions":{"target":"es5","module":"commonjs","emitDecoratorMetadata":true,"experimentalDecorators":true,"outDir":"build",//tsfolderconvertedtojs"lib":["es6"]},"exclude":["node.modules"]}其次，如果要ctrl+s自动将ts文件转为js文件，需要设置webstormfile->settingsStep2安装express框架，命令行：npminstallexpress--save使用命令行启用express框架，使用typescript语法，命令行：npminstall@types/express--save，这是定义express的文件步骤3启动服务器，命令行：nodebuild/aution_server.js如果显示如下，则启动成功。如果节点服务器启动后有变化，则不会变化。如果要改的话，需要重启服务器，开发起来很不方便。您可以通过安装插件来更新它。命令行：npminstall-gnodemon这个插件会监控源代码，如果有变化会自动加载到服务器。使用此命令启动项目：nodemonbuild/aution_server.js2.Angular项目使用http进行通信。通常我们希望HTTP请求时页面不会丢失响应，所以我们的HTTP请求是异步的。在JavaScript中，处理异步代码通常有三种方式：1.回调（callback）2.Promise（承诺）3.可观察对象（observable）1.使用命令行：npmgcomponent[组件名]实例组件名是产品。下图显示了product.component.ts文件的代码。在这个过程中，(.map)遇到了问题，报错了。报错信息是：Thisimportisblacklisted,importasubmoduleinstead解决方法：导入rxjs文件。导入方法：参考https://poychang.github.io/an...，import‘rxjs/Rx’还是上面的错误信息。如果改用‘rxjs/rx’，代码中不会报错。运行时报错，提示：TypeError:this.http.get(…).mapisnotafunctionChangingto'rxjs/add/operator/map'是正常的。您可以点击错误信息查看原始文档。2.配置angular命令行，向对应服务端项目根目录发送请求并新建配置文件，这里是proxy.conf.json。注意在json中，不要轻易使用注解，可能会出错。这个配置文件需要在项目中配置，package.json修改客户端请求路径：重新使用命令行：npmrunstart启动客户端angular项目，发现获取不到数据，因为客户端将请求路径发送到api/products，因此修改web服务器的路径是这样的结果：这里使用nodejs创建web服务器，angular项目的客户端使用http访问web服务器。注意：http是异步请求。当需要使用请求的返回值时，需要在使用时判断该值是否已经返回。这里很容易被忽略，导致读取值出错。很有可能是你用这个值的时候http请求还没有返回。应该有很多解决方案。目前我的做法是在同一个线程中执行这个赋值语句和http请求，也就是在网络请求线程中执行。
