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

Question

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

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

Answer 1

为我设置Angular 2是一个很大的问题,因为HTML5路由(没有hashbang)不起作用.

要使Angular2项目在IIS环境中工作而不使用Angular-CLI 提供它(您仍然需要它来构建它!):

1. 完成项目开发后,您需要将其构建(或编译)到不同的环境中.如果您需要进行设置,请阅读此内容.

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

ng b

2. 在您的构建文件夹中(如果您没有添加外部/不同的文件夹,这将是项目中的' dist '文件夹),将内容复制到您的IIS服务器.

3. 确保IIS服务器的文件夹具有IIS_IUSRS组和IUSR用户访问它所需的权限.(右键单击文件夹 - >属性 - >安全性 - >编辑 - >添加,然后输入.您可以单击"检查名称"按钮以确保它是您键入的正确的按钮)

4. 您需要解决的下一个问题是将web.config文件放入服务器文件夹以修复路由问题.

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

此(web.config)文件位于服务器的根目录中.

希望这可以帮助任何有类似问题的人:)

干杯.

Answer 2

1. 下载并安装IIS重写插件https://www.iis.net/downloads/microsoft/url-rewrite

2. 在默认网站下创建应用程序。

   • 在c：\ inetpub \ wwwroot中创建一个文件夹来承载应用程序
   • 步骤8之后，将dist文件夹内容复制到c：\ inetpu \ wwwroot \

3. 在建立index.html之前，将基本href =“ /”更改为基本href =“ //”

   • 要跳过每个新版本的步骤1,2和3，请退出步骤9，以替代步骤8

4. 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，并在assets部分的angular-cli.json中添加对它的引用，以便在每次构建期间将其复制。--
   • 否则，您将在每次使用ng build时手动创建此文件。

5. 不适用

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

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

7. 在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" 
               ],
   

8. ng build --prod

   • 注意：ng build --prod在最新版本的angular-cli中默认启动AOT（提前编译）
   • 注意：每次ng build命令时，ng build命令都会删除dist文件夹并重新创建该文件夹。

9. 替代构建命令：

   ng build --prod --output-path 'C:\inetpub\wwwroot\<appname subfolder>' --base-href /<appname subfolder>'/
   

   • a-如果您不想在index.html中手动更新base-href

   • b-如果您不想复制应用程序的dist文件夹和wwwroot文件夹。

   • 注意1：仅当您以管理权限打开可视代码（或任何终端应用程序）时，以下命令才有效。否则，在wwwroot中创建输出文件夹的mkdir命令将失败。

   • 注意2：您仍然需要使用来更新Web.config。请参阅步骤4
   • 注意3：在--base-href /'/的开头和结尾都使用检出斜杠/

10. 检查其中一则的直接报价。不知道是否需要按照其中一个Web链接中的说明更改... wwwroot \的IIS_IUSRS组和IUSR用户的安全特权。可能不是必需的，但我在这里重点介绍它，以便您记住。

直接引用另一种用法：“确保IIS服务器的文件夹具有IIS_IUSRS组和IUSR用户访问它所需的权限。（右键单击文件夹->属性->安全性->编辑->添加，然后键入您可以点击“检查姓名”按钮，以确保输入的内容正确无误。”“

参考资料：- 如何以及如何将Angular2部署到IIS - https://www.youtube.com/watch?v= K0XORWxG11k

Answer 3

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

编辑：如果你查看 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