Angular 7模板修改未在MVC 5中生效的技术求助

我之前在混搭Angular和MVC开发时也踩过类似的缓存坑，结合你描述的情况，咱们一步步来排查解决：

1. 先确认Angular编译产物是否同步到MVC项目 #

Angular的模板修改后，必须确保编译后的文件（比如main.js、styles.css这些）正确输出到MVC项目能访问的目录里，不然MVC加载的始终是旧文件：

• 打开Angular项目的angular.json，找到outputPath配置，确保它指向MVC项目的对应目录。比如你的MVC项目根目录下有bundles文件夹，那outputPath应该设为类似"../YourMvcProjectName/bundles"的相对路径，这样每次ng build后文件会直接输出到MVC的bundles目录中。
• 开发阶段建议用ng build --watch命令，这样每次修改Angular代码都会自动重新编译并同步文件，不用手动执行build命令。

2. 排查MVC Bundle的缓存问题 #

MVC的Bundle机制默认会做缓存优化，很可能导致它加载旧的Angular编译文件：

• 先清理MVC项目的临时文件：右键MVC项目 → 「清理」，然后重新生成项目，这样可以清除MVC缓存的旧Bundle引用。
• 开发环境下，建议关闭MVC的Bundle优化：在web.config里确保compilation节点的debug属性为true，这样MVC不会对Bundle进行压缩和缓存：

  <system.web>
    <compilation debug="true" targetFramework="4.7.2" /> <!-- 你的框架版本可能不同 -->
  </system.web>
  

• 如果还是不行，可以临时给Bundle加版本号强制刷新，比如把~/Script/Bundles改成~/Script/Bundles?v=1.0.1，不过这只是临时调试用的办法。

3. 确认Angular组件的渲染配置 #

你提到修改选择器后页面无内容，这大概率是组件的声明或引导配置有问题：

• 检查app.module.ts，确保AppComponent被正确声明，并且在bootstrap数组里：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent // 必须声明
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent] // 必须在这里引导组件
  })
  export class AppModule { }
  

• 另外检查environment.ts里的production属性是否为false，如果开启了生产模式（production: true），Angular会启用更严格的缓存机制，开发阶段建议关闭。

4. 浏览器端彻底清理缓存 #

虽然你说禁用了Chrome缓存，但试试更彻底的操作：

• 按Ctrl+Shift+R强制刷新页面（忽略本地缓存）；
• 打开Chrome开发者工具（F12），切换到「Network」标签，勾选「Disable cache」选项，然后刷新页面；
• 切换到「Application」标签，清空「Local Storage」和「Session Storage」里的内容，避免残留的Angular缓存影响。

5. 排查IIS静态文件缓存（如果部署到IIS） #

如果你的MVC项目是部署在IIS上的，IIS可能会缓存静态文件，这时候可以在web.config里添加配置禁用静态缓存：

<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="DisableCache" />
  </staticContent>
</system.webServer>

一般来说，按上面的步骤排查后，模板更新不生效的问题就能解决了，最常见的原因就是Angular编译文件没同步到MVC目录，或者MVC/Browser的缓存没清理干净。

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