Angular 4根组件部署IIS后无法识别的问题求助

兄弟，我之前部署Angular项目到IIS的时候也踩过这个坑，给你几个实用的排查和解决方向，应该能搞定：

• 确认Angular构建模式是否正确
  你在VS里发布的时候，大概率用了默认的开发模式构建，而生产环境需要用AoT编译的生产构建。打开项目的package.json，把scripts里的build命令改成：

  "build": "ng build --prod"
  

  然后重新执行发布，生产模式下会做完整的编译打包，确保组件元数据被正确识别，不会出现组件找不到的情况。另外，发布后只需要把dist文件夹里的内容复制到IIS网站目录就行，别带node_modules文件夹——生产环境根本不需要它，Angular已经把所有依赖打包到构建产物里了，带上去反而可能引发冲突。

• 检查AppModule的配置
  打开src/app/app.module.ts，确认AppComponent同时在declarations和bootstrap数组里：

  @NgModule({
    declarations: [
      AppComponent // 必须在这里声明
    ],
    imports: [
      BrowserModule,
      // 其他你用到的模块
    ],
    providers: [],
    bootstrap: [AppComponent] // 必须在这里指定启动组件
  })
  export class AppModule { }
  

  如果这里漏了任何一项，Angular都无法识别<app-root>这个组件。

• 配置IIS的静态文件和URL重写
  IIS7默认的配置不太适配Angular的单页应用，你需要做两个操作：

  1. 确保IIS安装了静态文件和URL重写模块（可以在服务器管理器的角色功能里添加）；
  2. 在IIS网站的根目录下创建web.config文件，添加以下内容：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <!-- 配置MIME类型，确保Angular的静态资源能被正确识别 -->
      <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      </staticContent>
      <!-- 重写规则，让所有非文件/目录的请求都指向index.html，适配Angular路由 -->
      <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="/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

  这个配置能解决大部分IIS下的资源加载问题，也能避免路由导致的组件加载异常。

• 清理服务器缓存重新部署
  先把IIS服务器上旧的项目文件全部删除，然后重新上传最新的dist文件夹内容，同时重启一下IIS站点，避免旧缓存干扰。

内容的提问来源于stack exchange，提问作者Computerboer