角度 7 模板更改未反映在 MVC 5 中答案

【问题标题】：angular 7 template changes not reflecting in MVC 5角度 7 模板更改未反映在 MVC 5 中
【发布时间】：2021-04-12 23:08:46
【问题描述】：

我在 Visual Studio 2019 中使用 Angular 7 和 MVC5。我在 index.cshtml 中渲染 Angular 模板时遇到问题。我正在使用 .cshtml 访问 index.cshtml 中的角度模板。它在 index.cshtml 中加载完美的角度模板，但是当我在 app.component.html 中进行一些更改时，这些更改并未反映在 index.cshtml 中，并且它在浏览器中显示旧的默认模板。尽管我刷新了缓存，甚至禁用了 chrome 中的缓存，但仍在加载旧的默认模板。我无法理解为什么这个默认模板会显示，即使它还不存在。当我更改选择器名称时，它不会在我的 cshtml 中显示任何内容。这是我的代码

app.component:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent {
title = 'App';
}

index.cshtml：

@{
  ViewBag.Title = "Index";
 }


 <app-root></app-root>

bundle.config：

          bundles.Add(new ScriptBundle("~/Script/Bundles")
           .Include(
               "~/bundles/inline.*",
               "~/bundles/runtime.*",
               "~/bundles/zone.*",
               "~/bundles/polyfills.*",
               "~/bundles/scripts.*",
               "~/bundles/vendor.*",
               "~/bundles/main.*"));
                bundles.Add(new StyleBundle("~/Content/Styles")
              .Include("~/bundles/styles.*"));

main.ts

   import { enableProdMode } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser- 
 dynamic';

  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';

  if (environment.production) {
  enableProdMode();
  }

 platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err => console.error(err));

【问题讨论】：

标签： c# asp.net-mvc angular angular7

【解决方案1】：

在 VS Code 中打开您的项目。使用终端中的 ng build 命令构建它。构建成功后，在VS 2019中重新打开并运行。这基本上编译了你的角度文件。

【讨论】：

【解决方案2】：

您的方法是错误的，因为您没有使用 CLi 运行 Angular 应用程序，因此如果您不为您的 Angular 应用程序运行构建命令，您将看不到更改

运行 ng build（如果您使用 Angular CLI）或使用您的 build 命令构建 Angular 应用程序，然后刷新浏览器以查看更改

【讨论】：

我已经使用 ng build 和 ng serve -- open 运行了该应用程序。即使在运行这些命令后，我的 cshtml 页面中也没有任何变化。但是当我使用 ng serve --open 打开应用程序时，它会显示浏览器中的更改，但不会在我的 MVC 页面中获取这些更改。
@zia 你确定当你像这样引用“~/bundles/inline.*”时是正确的吗？
感谢@Ngô Hùng Phúc。我已经解决了这个问题。实际上 angular.json 中的输出路径没有正确映射，因为更改没有反映。
现在我面临一个问题，每次更改后我都必须使用 ng build --prod 构建 Angular 项目，之后更改会反映在我的 cshtml 页面中。当我运行 Visual Studio 时，有什么方法可以自动构建它。我的意思是我不想每次都在构建它时看到 html 中的一个变化。你能指导我吗？
@zia 您也可以使用 Visual Studio 2019 的内置模板。有 .net core 2.2 和 angular 模板