typescript 为什么我需要一个 HTTP 服务器来运行 Angular 2？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34580772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why do I need a HTTP-server to run Angular 2?
提问by Tuomas Toivonen
I come from traditional back-end Java/Springenvironment to learn Angular 2 framework, and have hard time to grasp many of the fundamental concepts.
我来自传统的后端Java/Spring环境学习Angular 2 framework，并且很难掌握许多基本概念。
I'm reading the Manning book Angular 2 Development with TypeScriptand it says I need HTTP-serverto run my SAP's. Why is that?
我正在阅读 Manning 的书籍Angular 2 Development with TypeScript，它说我需要HTTP-server运行我的SAP's。这是为什么？
I thought Angularruns in client machine. So what is exactly function of the server? If I just open the HTML, Angulardoesn't do its magic.
我认为Angular在客户端机器上运行。那么服务器的功能究竟是什么？如果我只是打开HTML,Angular不会发挥它的魔力。
回答by Thierry Templier
In fact, Angular applications suppose to be accessed using the HTTP protocol so it's a good idea to use an HTTP server for development. You will be in the "same conditions". In addition this prevents from having some limitations and restrictions:
事实上，Angular 应用程序假设使用 HTTP 协议访问，因此使用 HTTP 服务器进行开发是个好主意。您将处于“相同条件”。此外，这可以防止出现一些限制和限制：
- Absolute links relative to a domain name. I mean if you try to reference a resource with an absolute path from the root path of your domain. This won't probably work with the file protocol since its root path is the root folder of your file system
- JavaScript and AJAX. JavaScript doesn't work well with the
file://protocol and you can some security restrictions according to browsers.
- 相对于域名的绝对链接。我的意思是，如果您尝试使用来自域根路径的绝对路径来引用资源。这可能不适用于文件协议，因为它的根路径是文件系统的根文件夹
- JavaScript 和 AJAX。JavaScript 不适用于该
file://协议，您可以根据浏览器进行一些安全限制。
See these links for more details about these issues:
有关这些问题的更多详细信息，请参阅这些链接：
- https://developer.mozilla.org/en-US/Learn/Open_a_file_in_a_browser#Opening_a_local_file
- https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
- https://developer.mozilla.org/en-US/Learn/Open_a_file_in_a_browser#Opening_a_local_file
- https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Regarding the choice of a Web server, static Web servers are enough for Angular applications and there are several lightweight HTTP servers for this purpose:
关于 Web 服务器的选择，静态 Web 服务器对于 Angular 应用程序来说已经足够了，并且有几个轻量级的 HTTP 服务器用于此目的：
http-server- https://github.com/indexzero/http-serverlite-server- https://github.com/johnpapa/lite-server
http-server- https://github.com/indexzero/http-serverlite-server- https://github.com/johnpapa/lite-server
An interesting feature (with lite-serverfor example) consists in the live reload. The server detects when you updated some contents (HTML, JavaScript, CSS) and automatically reloads corresponding pages in the browser. This allows you to be more efficient when implementing your application.
一个有趣的功能（lite-server例如）包括实时重新加载。服务器检测您何时更新了某些内容（HTML、JavaScript、CSS）并自动在浏览器中重新加载相应的页面。这使您在实施应用程序时更加高效。
Finally if you implement both client (Angular) and server sides, these parts should be executed on different servers (in development environment it could / should be different in other environments like production). I mean:
最后，如果您同时实现客户端（Angular）和服务器端，这些部分应该在不同的服务器上执行（在开发环境中，它可以/应该在其他环境（如生产）中不同）。我是说：
- A static HTTP server for the front endwhich only serves the elements for the Angular application.
- A dynamic HTTP server for the back endwhich provides the server-side processing. You are free here to use the technology you want (Node, Java, ...)
- 前端的静态 HTTP 服务器，它只为 Angular 应用程序提供元素。
- 后端的动态 HTTP 服务器，提供服务器端处理。您可以在这里自由使用您想要的技术（Node、Java 等）
Because of these two servers, you must enable CORS (Cross Origin Resource Sharing) to make possible the Angular application to execute AJAX requests on the server application. As a matter of fact, you aren't on the same domain. It's something that must be configured on the server side to return CORS headers when the browser sends an Originheader in the request. For more details you can have a look at these links:
因为有这两个服务器，所以必须开启CORS（跨源资源共享），才能让Angular应用在服务器应用上执行AJAX请求。事实上，你们不在同一个域中。当浏览器Origin在请求中发送标头时，必须在服务器端配置它以返回 CORS 标头。有关更多详细信息，您可以查看以下链接：
- http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/
- http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
- http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/
- http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
Another thing to be aware of if you use the routing feature of Angular is that the HTML5 history mode simulates some "real" addresses but you need in this case some configuration on your webserver to make load the index.html (your entry point file) for each URLs corresponding to each routes. See this answer for more details: When I refresh my website I get a 404. This is with Angular2 and firebase.
如果您使用 Angular 的路由功能，需要注意的另一件事是 HTML5 历史模式模拟一些“真实”地址，但在这种情况下，您需要在网络服务器上进行一些配置以加载 index.html（您的入口点文件）对于每个路由对应的每个 URL。有关更多详细信息，请参阅此答案：当我刷新网站时，出现 404。这是使用 Angular2 和 firebase。
The last point to consider is the packaging of your application for your production environment. You need to make your application efficient (minifying elements, concating JavaScript files, preloading templates, ...). At this level, it's not necessary to keep two separate servers and the Angular part can be packaged within the server side application. In this case, the latter must be able to serve some statis files.
最后要考虑的一点是为您的生产环境打包应用程序。您需要使您的应用程序高效（缩小元素、连接 JavaScript 文件、预加载模板等）。在这个级别上，不需要保留两个单独的服务器，Angular 部分可以打包在服务器端应用程序中。在这种情况下，后者必须能够提供一些 statis 文件。
Hope it helps you, Thierry
希望对你有帮助，蒂埃里
回答by jameswilddev
If it's anything like AngularJS 1.3, it makes AJAX requests to get HTML templates, and for that at least it would need a real HTTP server.
如果它类似于 AngularJS 1.3，它会发出 AJAX 请求以获取 HTML 模板，为此至少它需要一个真正的 HTTP 服务器。
回答by Günter Z?chbauer
Currently Angular uses PathLocationStrategyby default which requires a server that does some redirection (see for example Angular 2.0 router not working on reloading the browser)
If you use HashLocationStrategythis isn't necessary.
Usually you load a browser application from an HTTP server anyway and if you configure Angular properly this should do it.
当前 AngularPathLocationStrategy默认使用它需要一个服务器来进行一些重定向（参见例如Angular 2.0 路由器无法重新加载浏览器）如果您使用HashLocationStrategy它，则没有必要。通常，您无论如何都会从 HTTP 服务器加载浏览器应用程序，如果您正确配置了 Angular，这应该可以做到。
During development you need a server because browsers have some limitations what they allow when you load from files directly.
在开发过程中，您需要一个服务器，因为当您直接从文件加载时，浏览器有一些限制。
回答by Ali Gajani
It needs a lite-server to serve static files.
它需要一个精简服务器来提供静态文件。
The reasoning behind this is security.
这背后的原因是安全性。
Browsers don't allow direct request on the file system.
浏览器不允许直接请求文件系统。
回答by Sharpiro
I just found that lite-server wouldn't install for me.
我刚刚发现 lite-server 不会为我安装。
angular-http-server worked perfectly for me out of the box:
angular-http-server 开箱即用，非常适合我：
