将Angular 5与ASP.NET MVC 5集成

Question

我正在尝试将使用CLI项目生成的Angular 5应用程序集成到现有的ASP.NET MVC 5应用程序中.我在ASP.NET MVC项目中使用CLI创建了角度项目,我想在剃刀视图中使用Angular 5组件; 那些将是简单的剃刀视图,在其中,我将显示一些Angular 5组件.我已经使用ASP.NET Core 2完成了这项工作,我将Outdir属性更改为 wwwroot文件.angular-cli.json,并且它可以工作,但我无法使用ASP.NET MVC 5.有人可以帮忙吗？谢谢

PS:很多教程都使用旧版本的Angular,他们使用了一个名为的文件system.js,但是在较新版本的Angular中这个文件不再存在了.

Answer 1

我刚刚使用Angular 5和MVC 5做了这个.我建议你首先使用"Hello World",然后将其移植到你现有的MVC问题中.

预先要求 - 确保安装了最新的Node,NPM,AngularCLI ......

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

2. 从包管理器控制台卸载不需要的包:

   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
   

3. 删除所有捆绑BundleConfig.cs(我们稍后会将它们拉出来!)

4. 删除Scripts文件夹(将使用AngularCLI重新创建)

5. 使用CLI添加Angular(进入项目根文件夹)

   跑: ng new Scripts --skip-tests --style scss

   在项目中,包括所有文件夹除外node_modules!

6. 更新angular.json输出到Bundles文件夹 - >"outputPath": "../Bundles"

7. 添加包:

   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.*"));
   

8. (可选)通过NPM重新添加库(Scripts文件夹中的命令提示符):

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

9. (可选)在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"
       ]
   

10. 从脚本文件夹构建: ng build --extractCss

11. 在_Layout.cshtml,添加:

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

    和

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

    删除旧捆绑导入!

12. 在Home/Index.cshtml,添加Angular元素:

    <app-root>test</app-root>
    

    13.1删除旧捆绑导入!

13. 运行Web应用程序 - 它应该打开.注册一个新用户,然后登录.与Angular一起显示MVC5演示页面

14. 要从命令行"观察"网页:

    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://learn.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio#tabpanel_IjUmMTId-R_visual-studio