Question

我正在尝试将使用CLI项目生成的Angular 5应用程序集成到现有的ASP.NET MVC 5应用程序中。我在ASP.NET MVC项目中使用CLI创建了角度项目，我想在剃刀视图中使用Angular 5组件;那些将是简单的剃刀视图，在其中，我将显示一些Angular 5组件。我已经使用ASP.NET Core 2完成了这项工作，我将文件public static void main(String[] args) { Nibba nib = new Nibba(); List<Character> characterSet = new ArrayList<>(); characterSet.add('1'); characterSet.add('2'); characterSet.add('3'); characterSet.add('4'); characterSet.add('5'); characterSet.add('6'); List<String> perms = nib.generatePermutations(characterSet); // filter only the permutations of length 6 perms = perms.stream().filter(p -> p.length() == characterSet .size()).collect(Collectors.toList()); for (String s : perms) { System.out.println(s); } System.out.println("Total permutations = " + perms.size()); } private List<String> generatePermutations(List<Character> characterSet) { List<String> permutations = new ArrayList<>(); for (int idx = 0; idx < characterSet.size(); idx++) { char character = characterSet.get(idx); // Initialise first "permutation" if (idx == 0) { permutations.add(String.valueOf(character)); continue; } ArrayList<String> oldPerms = new ArrayList<>(permutations); for (String subPermutation : oldPerms) { insertPermutations(permutations, subPermutation, character); } } return permutations; } /** * Insert permutations into the given list * * @param list the list * @param str the string * @param c the character to insert at each point in the string */ private void insertPermutations(List<String> list, String str, char c) { for (int i = 0; i <= str.length(); i++) { String newStr = str.substring(0, i) + c + str.substring(i); list.add(newStr); } }中的Outdir属性更改为wwwroot，并且它有效，但我无法使用ASP执行此操作.NET MVC 5.有人可以帮忙吗？谢谢

PS：很多教程都使用旧版本的Angular，他们使用了一个名为.angular-cli.json的文件，但是在较新版本的Angular中，这个文件不再存在。

Answer 1

我刚刚使用Angular 5和MVC 5.我建议你得到一个＆＃34; Hello World＆＃34;首先工作，然后将其移植到您现有的MVC问题中。

Pre-reqs - 确保您安装了最新的Node，NPM，AngularCLI ...

在VS2017中，使用MVC和WebAPI 1.1创建一个新的ASP.NET Web应用程序，SPA。显示所有文件（在解决方案资源管理器中 - 这使事情变得更容易！）

从包管理器控制台卸载不需要的包：

UnInstall-Package Sammy.js
UnInstall-Package Bootstrap
UnInstall-Package JQuery
UnInstall-Package Knockout.validation
UnInstall-Package Knockoutjs
UnInstall-Package modernizr
UnInstall-Package Microsoft.ApplicationInsights.Web -RemoveDependencies

删除BundleConfig.cs中的所有捆绑包（我们稍后会将它们拉出来）。
删除Scripts文件夹（将使用AngularCLI重新创建）
使用CLI添加Angular（进入项目根文件夹）

运行：ng new Scripts --skip-tests --style scss

在项目中，包括所有文件夹，但不包括node_modules！
更新angular.json以输出到Bundles文件夹 - ＆gt; "outputPath": "../Bundles"

添加捆绑包：

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

bundles.Add(new StyleBundle("~/Content/Styles") .Include("~/bundles/styles.*"));

（可选）通过NPM重新添加库（来自Scripts文件夹的命令提示符）：

npm install jquery --save   
npm install popper.js --save    
npm install bootstrap --save

（可选）在angular.json中引用它们，以便AngularCLI将它们拉入webpack包中：

"styles": [
      "src/styles.scss",
      "./node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
"scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/popper.js/dist/umd/popper.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

从脚本文件夹构建：ng build --extractCss

在_Layout.cshtml中，添加：

  @Styles.Render("~/Content/Styles")    <!-- In the "head" element -->

和

  @Scripts.Render("~/Script/Bundles")   <!-- At the end of the "body" element -->

删除旧捆绑导入！

在Home/Index.cshtml中，添加Angular元素：
```
<app-root>test</app-root>
```
13.1删除旧捆绑导入！
运行网络应用程序 - 它应该打开。注册一个新用户，然后登录。与Angular一起显示MVC5演示页
To＆＃34; watch＆＃34;网页 - 从命令行：
```
ng build --extractCss --watch
```

这将重建Bundles。不幸的是你需要刷新浏览器，但这比停止/启动更好！

如果您需要更多详细信息，请大声说出来 - 我已经完成了两次以熟悉它，并且效果很好！

Answer 2

您是否看到了新的Microsoft Core Angular模板的候选发布版。他们更改了模板，以便使用angular-cli。效果很好。您可以遵循相同的构建配置模式。请注意，您必须通过

安装最新版本的模板

dotnet new - 安装Microsoft.DotNet.Web.Spa.ProjectTemplates :: 2.0.0-rc1-final。

https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio#tabpanel_IjUmMTId-R_visual-studio

Answer 3

解决方案以及如何使用Angular 4.3 here执行此操作：

Answer 4

对于在 2021 年努力寻找工作/简单说明的其他人，这里是我最终将 Angular 10.x 应用程序添加到 ASP.NET (CORE) 3.x MVC Web 应用程序的步骤： https://gist.github.com/cemerson/1af0befa4edc959a02ba1a34784c6d55

将Angular 5与ASP.NET MVC 5集成

4 个答案: