Angular 2在Github Pages中的部署

测试Angular2 Webpack在ghpages中的部署

首先从dist文件夹中获取所有相关文件，对我来说是: + CSS文件在资产文件夹 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

然后将这些文件推入您创建的repo中。

1 -如果你想让应用程序在根目录上运行-创建一个特殊的repo，名称为[yourgithubusername].github。IO并将这些文件推到主分支中

2——如果你想在子目录或根目录以外的不同分支中创建这些页面，创建一个分支gh-pages并将这些文件推到该分支中。

在这两种情况下，我们访问这些部署页面的方式将是不同的。

对于第一种情况，它将是https://[yourgithubusername].github.io，对于第二种情况，它将是[yourgithubusername].github。io /(回购的名字)。

如果你想使用第二种情况部署它，请确保在dist中更改index.html文件的基本url，因为所有的路由映射都依赖于你给出的路径，它应该设置为[/branchname]。

链接到本页

https://rahulrsingh09.github.io/Deployment

去回购

https://github.com/rahulrsingh09/Deployment

为了快速廉价地托管angular应用，我一直在使用Firbase托管。它在第一层是免费的，使用Firebase CLI部署新版本非常容易。本文解释了将你的angular 2产品应用部署到Firebase的必要步骤:https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

简而言之，你运行ng build——prod，它会在包中创建一个dist文件夹，这个文件夹会被部署到Firebase Hosting上。

要在IIS中部署应用程序，请遵循以下步骤。

第一步:使用ng Build——prod命令构建Angular应用

步骤2:构建后，所有文件都存储在应用程序路径的dist文件夹中。

步骤3:在C:\inetpub\wwwroot中创建一个名为QRCode的文件夹。

第四步:复制dist文件夹的内容到C:\inetpub\wwwroot\QRCode文件夹。

步骤5:使用命令(Window + R)打开IIS管理器，输入inetmgr，单击“确定”。

步骤6:右键单击默认网站，然后单击添加应用程序。

第七步:输入别名“QRCode”，设置物理路径为C:\inetpub\wwwroot\QRCode。

第八步:打开index.html文件，找到行href="\"并删除'\'。

步骤9:现在在任何浏览器中浏览应用程序。

你也可以跟着视频更好地理解。

视频网址:https://youtu.be/F8EI-8XUNZc

我想说的是，很多在使用angular之前就有Web经验的人，都习惯于在战争中部署他们的Web构件(例如，在Java/Spring项目中部署jquery和html)。在试图将我的angular项目和REST项目分开后，我最终这样做是为了解决CORS问题。

我的解决方案是将所有用CLI生成的angular(4)内容从My -app移到MyJavaApplication/angular。然后我修改了我的Maven构建，使用Maven -resources-plugin将内容从/angular/dist移动到我的发行版的根目录(即$project.build.directory}/MyJavaApplication)。Angular默认从war的根目录加载资源。

当我开始在我的angular项目中添加路由时，我进一步修改了maven build，将index.html从/dist复制到WEB-INF/app。并且，添加了一个Java控制器，将所有服务器端rest调用重定向到索引。

我用永远:

使用Angular -cli到dist文件夹ng Build——prod——output-path ./dist来构建你的Angular应用 在你的Angular应用程序路径下创建server.js文件: Const express = require('express'); Const path = require('path'); Const app = express(); app.use(表达。Static (__dirname + '/dist')); App.get ('/*'， function(req,res) { res.sendFile(路径。Join (__dirname + '/dist/index.html')); })； app.listen (80); 永远启动server.js

这是所有!您的应用程序应该正在运行!

点击下面的链接，

修改Index.html页面的脚本文件路径 改变你的component.html路径，以防你的获取错误无法找到位置

https://angular.io/docs/ts/latest/guide/deployment.html !# dev-deploy