Question

以angular2-quickstart为例。需要部署哪些文件以及需要设置哪些设置才能从IIS启动此Web应用程序？

这是我选择编译为JavaScript的Typescript教程。

Answer 1

为我设置Angular 2是一个很大的问题，因为HTML5路由（没有hashbang）不起作用。

要使一个Angular2项目在没有提供的IIS环境中使用Angular-CLI（你还需要它来构建它！）：

在完成项目开发之后，您需要构建（或编译）它到不同的环境。如果您需要进行设置，请阅读this。

您需要的最短构建命令是：

ng b

在构建文件夹中（如果您没有添加外部/不同的文件夹，这将是＆＃39; dist ＆＃ 39;项目中的文件夹），将内容复制到IIS服务器。
确保IIS服务器的文件夹具有IIS_IUSRS组和IUSR用户访问它所需的权限。（右键单击文件夹 - > gt;属性 - ＆gt;安全性 - ＆gt;编辑 - ＆gt;添加，然后输入。您可以点击“检查姓名”按钮以确保它是正确的你输入的内容
您需要解决的下一个问题是将 web.config 文件放入服务器文件夹以修复路由问题。

如果我们使用Apache，我们需要一个.htaccess，但是对于IIS ，我们需要使用web.config。如果您的应用程序从服务器的根目录路由，那么here找到了我的工作。（注意：正如@Demortes提醒的那样，这将需要在您的IIS环境中添加一个名为URLRewrite的附加模块）

此（web.config）文件位于服务器的根目录中。

希望这可以帮助任何遇到类似问题的人：）

干杯。

Answer 2

下载并安装IIS重写插件https://www.iis.net/downloads/microsoft/url-rewrite
在默认网站下创建应用程序。
- 在c：\ inetpub \ wwwroot中创建一个文件夹来托管应用程序
- 在步骤8之后，将dist文件夹内容复制到c：\ inetpu \ wwwroot \
在构建index.html之前，将基础href =“/”更改为基础href =“//”
- 要为每个新版本检查步骤9跳过步骤1,2和3，作为步骤8的替代

Web配置结构。

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
            <rule name="Main Rule" >
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/<appname subfolder>/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

注意：在src文件夹中创建一个Web.config，并在资源部分的angular-cli.json中添加对它的引用，以便在每次构建期间复制它。 -
否则，每次使用ng版本时，您都将手动创建此文件。

不适用

在angular-cli.json中将web.config放入资产块

        "assets": [
            "assets",
            "favicon.ico",
            "Web.config"
        ],

在angular-cli.josn中放入自定义css路径示例，以便将它打包在styles..bundle.cs

中

    "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "assets/site.css",
        "assets/page.css",
        "assets/menu.css",
        "styles.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css"        
    ],

如果您有自定义脚本，请将这些路径放在脚本部分示例

下

    "scripts": [
            "../node_modules/jquery/dist/jquery.js",        
            "index.js" 
            ],

ng build --prod
- 注意：ng build --prod在最新版本的angular-cli中默认启动AOT（提前编译）
- 注意：ng build命令会删除dist文件夹，并在每次构建命令时重新创建该文件夹
替代构建命令：
```
ng build --prod --output-path 'C:\inetpub\wwwroot\<appname subfolder>' --base-href /<appname subfolder>'/
```
- a-如果您不想手动更新index.html中的base-href
- b-如果您不想复制app的dist文件夹和wwwroot文件夹。
- 注1：以下命令仅在您打开具有管理权限的可视代码（或任何终端应用程序）时才有效。否则，在wwwroot中创建输出文件夹的mkdir命令将失败。
- 注意2：您仍然需要使用更新Web.config。见步骤4
- 注3：在--base-href /'/
检查其中一个帖子的直接引用。不确定是否更改了IIS_IUSRS组和IUSR用户的安全权限... wwwroot \ 如其中一个网站链接所述是必需的。可能不是必需的，但我在此强调它，以便您牢记。

直接引用其他用法：“确保IIS服务器的文件夹具有IIS_IUSRS组和IUSR用户访问它所需的权限。（右键单击文件夹 - ＆gt;属性 - ＆gt;安全性 - ＆gt;编辑 - ＆gt;添加，然后输入。您可以点击“检查名称”按钮以确保输入的是正确的“”

参考文献： - How and what to deploy Angular2 to IIS - https://www.youtube.com/watch?v=K0XORWxG11k

Answer 3

webapp本身不需要服务器智能，因为它只是静态文件 - 网络资产（* .js，* .html文件等）。静态文件是angular2-quickstart生成的构建过程的输出，您在开发环境中运行（可能在您的个人计算机本地）。开发环境需要node（+ npm）。事实上，您可以在本地开发环境中测试本教程，而无需任何外部服务器。

编辑：如果你查看package.json，你可以看到它有lite-server：

  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },

Lite服务器是一个模拟简单（Web）文件服务器的小型服务器。

打开为Web应用程序提供服务的轻量级开发节点服务器它在浏览器中，当html或javascript更改时刷新，注入 CSS使用套接字进行更改，并且当路由不是时使用后备页面找到。

为了给您答案，使用IIS提供您的应用，您只需要http://docs.asp.net/en/latest/fundamentals/static-files.html

Answer 4

我创建了一个小型github项目，该项目目前已于今天（2016年10月13日）运行Angular2，该项目在IIS 7.5中运行，具有路由和ng服务。它确实使用基于散列的URL策略。它使用angular-cli，read me详细介绍了如何在IIS或ng服务下进行设置。

https://github.com/howserss/Angular2-IIS-sample-app

Answer 5

Angular 2路由（使用哈希）在IIS上没有任何问题。只需创建默认的网址重写规则，该规则会将所有请求重定向到您的角应用的index.html文件。规则会将所有请求重定向到index.html，但必需的js文件和实际的角度应用网址除外（即index.html或index.html＃/ {route-value}。

EX：

<rules>
  <rule name="Default">
    <match url="(.* ).js|index.html(.*)" negate="true" />
    <action type="Rewrite" url="/index.html" />
  </rule>
</rules>

Angular 2路由（没有哈希）不适用于IIS。 如果是纯HTML应用程序 IIS将路由传入请求，如果该位置不存在，则会将请求重定向到错误页面。

如果是.Net MVC应用程序，您可以创建一个默认路由来处理所有传入的请求网址，并将其重定向到您的角度索引视图。

MVC申请的前路：

routes.MapRoute(
    name: "Angular",
            url: "{*url}",
           defaults: new { controller = "Home", action = "Index", id =     UrlParameter.Optional },
           constraints: new { url = new AppFeatureUrlConstraint() }


public class AppFeatureUrlConstraint : IRouteConstraint
    {
        public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection)
        {
        if (values[parameterName] != null)
        {
            var url = values[parameterName].ToString();
            if (url.StartsWith("angular/", StringComparison.InvariantCultureIgnoreCase))
                return true;
            else
                return false;
        }
        return false;
        }
    }

Answer 6

Here是在IIS中部署角度应用程序的一个很好的详细解释。作为单独网站发布的总结步骤如下： -

在IIS中创建一个网站，假设您为此Web应用程序提供的物理路径为C：\ Publish。
使用以下命令发布角度应用： -

ng build --prod

成功构建应用程序后，将dist文件夹的内容复制并粘贴到C：\ Publish文件夹。

将web.config文件添加到文件夹C：\ Publish，其中包含以下内容： -

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
         <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
       <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

全部完成，现在只需访问IIS并浏览您的网站，您就会看到它正常运行。

Answer 7

在你构建它之后，将所有文件复制到你的IIS服务器的折叠中，它只包含html，css和js文件，所以只需将其托管为静态网站。

适用于任何Web服务器，无论是Apache，IIS还是nginx。

如何以及将Angular2部署到IIS的内容

7 个答案: