如何将在Typescript中开发的Angular 2应用程序部署到生产环境？

我是Angular 2的新手。我对Angular 2如何在生产环境中工作感到困惑。如何将在Typescript中开发的Angular 2应用程序部署到生产环境？

在生产服务器上运行Angular 2应用程序有哪些先决条件？
是否可以在IIS服务器中部署应用程序或者是否需要节点服务器？
使用节点在开发机器中编译文件后，我们是否需要将.js和.ts部署到生产环境？

来源

2015-12-22 Jijil PK

Angular 2应用程序是在TS中编写的，但浏览器只在最后才理解JavaScript。所以任何TS项目在开发时都会被转换成JavaScript第一事件。

您可以在任何服务器上运行angular 2应用程序。

您只需部署.js文件，因为浏览器不会解析.ts文件。

来源

2015-12-22 04:37:07

我使用JSPM使我的angular2项目生产准备就绪。其他流行的工具如JSPM包括webpack和browserfy。 JSPM将完成的重要任务之一是捆绑组成您的angular2项目的各种模块。我还将“selfExecutingBundle”标志设置为true，并使JSPM生成一个绑定的js文件（例如myApp.bundled.js），并从那里将它缩小（myApp.bundled.min.js），并在此处使用此脚本引用index.html文件。

<html> 
 

 
<head> 
 
    <title>Hello Angular World</title> 
 
</head> 
 
<body> 
 
<div> 
 
    <my-app>Loading...</my-app> 
 
</div> 
 
    <script src="/js/myApp.bundle.min.js"></script> 
 
</body> 
 

 
</html>

这就是你所需要的！

未来当HTTP/2规范更常见时，可能不太需要捆绑基于模块的项目，但现在我认为需要捆绑。

没有提及您的打字稿文件（因为它们已经在制作myApp.bundled.js的过程中进行了转换）。正如Zama所说，你可以在任何服务器上运行angular2（我使用IIS并且工作正常）。

更新：自从Angular 2的最终版本发布以来，我已经转向使用angular-cli来构建生产。安装很简单（没有意大利面条的任务），最后的包是超级优化的（特别是因为树木摇晃）。我建议检查一下设置，开发和构建你的ng2项目的角色cli。

来源

2015-12-22 17:37:30 brando

你有关于如何将打字稿打包成单个文件并将其缩小的指南或其他内容？我正尝试将我的角度应用程序有史以来第一次投入生产。由于我是全新的打字稿，我不知道一个好的方法是什么。 – Wobbley

它可能有点棘手。我在这里多了一些：http://stackoverflow.com/questions/33683885/angular2-with-asp-net-5/34495822#34495822如果你需要更多的帮助，请给我一条线。一旦配置它就像一个魅力。 – brando

我决定只是将我的angular2项目移到：https：//github.com/AngularClass/angular2-webpack-starter，而制作单个js文件实际上非常简单。 – Wobbley

有许多启动种子项目，包括服务和建立您的项目的能力。我使用（非常满意）https://github.com/antonybudianto/angular2-starter

您可以在这里找到很多其他： https://github.com/timjacobi/angular2-education#boilerplates

来源

2016-04-07 08:50:57

所有打字稿文件将同时发展由transpiler的应用程序，所以你不需要被transpiled到JS文件生产中的ts文件。

另外，当您完成开发时，您需要做的只是使用一些捆绑工具（如webpack-starter或angular2-seed）制作一揽子dist目录。

然后你将这个包部署到你的服务器。

上面提到的软件包有很多关于如何将angular2应用程序部署到生产环境的信息。

希望这会有所帮助。

来源

2016-07-02 05:59:15

上传应用程序非常简单。步骤：

创建使用遵循https://angular.io/docs/ts/latest/guide/webpack.html
如果你的应用程序有路由器，那么请不要忘了使用{useHash：真正}的应用为防止错误无法加载页面。如：RouterModule.forRoot（routes，{useHash：true}）。
在您的项目根路径中输入npm。
它在项目根目录下自动创建dist文件夹。
不需要在生产环境中设置节点服务器。你可以简单地选择Apache服务器并上传dist文件夹内容。

来源

2016-08-14 08:18:43

你能分享最后一步的更多细节吗？例如，如果我想使用tomcat，我应该完全复制到webapps文件夹？我需要做一些配置吗？非常感谢。 –

npm build命令不会创建dist文件夹，我错过了什么？ –

@BingLu我们不需要tomcat服务器。只需配置Apache服务器并粘贴内容即可。如果你想使用tomcat服务器，然后制作maven项目并将dist文件夹中的所有数据复制到项目中的webapps文件夹中，然后部署它。 –

应用服务器（我的回答，我用的Tomcat），node.js中，以及角CLI（通过运行 “npm install -g angular-cli”）
可以部署到其他服务器
刚。 HTML，.js文件和文件.MAP（至少对于我的解决方案）

这工作更好，如果你创造了使用角CLI instructions shown here应用。在您的应用程序根目录中，运行以下命令ng build --env=prod，该程序将通过webpack将\dist目录中的可部署项目捆绑在一起。

复制\dist目录并将其粘贴到{CATALINA_HOME}\webapps。将\dist重命名为文件夹名称，例如\foo。通过的startup.bat或您所选择的偏好

<base href="/foo/">

启动Tomcat并导航到http://localhost:8080/foo/，你应该能够看到你的角2的应用程序：打开\foo\index.html和编辑的基本href行表示新目录名。

注意：如果您尚未使用ng new命令创建项目，则在编译之前，我已经阅读了执行ng init的位置，以便您仍然可以按照步骤操作。我自己虽然没有测试过。

来源

2017-06-07 18:19:25

如何将在Typescript中开发的Angular 2应用程序部署到生产环境？

回答

相关问题