65.9K
CodeProject 正在变化。 阅读更多。
Home

如何使用 .NET Core 2.1 和 Visual Studio 2017 设置 Angular 6 环境

NitinShrivastava
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.77/5 (9投票s)

2018年8月5日

CPOL

4分钟阅读

viewsIcon

48184

downloadIcon

444

在 Visual Studio 2017 中使用 ASP.NET Core 2.1 设置 Angular 6 环境

引言

本文将介绍最流行的单页应用程序 (SPA) 框架和平台 Angular 的环境设置。本文的目标读者是希望学习 Angular 的初学者，同时也是 .NET 开发者。由于是从初学者的角度出发，我将从如何在 Visual Studio 2017 中设置 Angular 环境开始。最终，我们将逐步介绍 Angular 的所有功能。所以请一路陪伴我。 :)

背景

Angular 自从发布第一个版本 1.x（当时称为 AngularJS，一个简单的 JavaScript 框架，允许开发者扩展 HTML DOM 元素以添加额外属性来执行用户操作）以来，已经发展了很多。早期，我们在任何项目中使用 AngularJS 时，只需引用一个 JS 文件就可以轻松使用 AngularJS 的功能。后来，Angular 推出了 2.0 版本，这是一个与 AngularJS 1.x 完全不同的架构。Angular 最近推出了新版本 6，它继承了 Angular 2 的架构，并增加了更多功能和特性。

现在，由于模块化，我们不能仅仅通过引用一个文件来使用 Angular，但这实际上是好事。因此，无论我们想使用哪个模块，都可以将其导入并在该组件中使用。

 它需要一个完全不同的设置才能工作。特别是当我们使用 Visual Studio 和 ASP.NET Core 时。让我们继续进行以实现我们的目标。

设置

在本节中，我们将在 Visual Studio 2017 中设置 Angular 环境。由于 Angular 与 ASP.NET Core 配合良好，ASP.NET Core 已经提供了中间件、类和方法来处理 SPA 框架，我将使用它们。我已按照最新版本安装了 .NET Core SDK 2.1。如果您已安装 .NET Core SDK 2.0，则无需安装，但最好升级。

先决条件是您的计算机上应已安装 Node.js 和 Typescript，以便安装 Angular 的包并稍后运行。

那么，让我们开始第一步，即在 Visual Studio 中创建一个项目。

我在这里选择 Web API 项目，这样我就可以得到一个空的、没有视图或预先设置的项目。

在添加 Angular 6 之前，尝试构建您的解决方案，以确保一切正常，并且没有任何依赖项问题。

现在，让我们通过 Angular CLI 将 Angular 6 应用程序添加到此项目中。为此，打开命令提示符并导航到您创建项目的文件夹。在我的例子中，我将其添加到了 _BookStore_ 文件夹，您可以在此处运行命令来安装 angular cli。

npm install -g @angular/cli

安装 Angular CLI 后，现在让我们安装 Angular。确保在运行命令时位于拥有 _csproj_ 文件的同一位置。

ng new ClientApp

命令成功运行后，您的解决方案将如下所示。

Using the Code

为了成功运行我们的应用程序，我们需要对 C# 代码进行一些更改。

添加中间件以支持 .NET Core App 中的 SPA。为此，请打开 _Startup.cs_ 并注册可以为单页应用程序 (SPA) 提供静态文件的 SPA 服务。所以我们将其添加到 `ConfigureServices` 方法中

	services.AddSpaStaticFiles(c =>
            {
                c.RootPath = "ClientApp/dist";
            });

c.RootPath = "ClientApp/dist"定义所有静态文件将转储的位置。现在问题来了：如果我们已经有了用于在 .NET Core 中存储静态文件的 `wwwroot`，为什么还需要这个路径？这个主题将在本系列的最后构建和部署步骤中介绍。

在此之后，为了支持 SPA 文件，.NET Core 提供了中间件，我们必须将其添加到 `configure` 方法中

            app.UseStaticFiles();
            app.UseSpaStaticFiles();
            app.UseMvc(routes =>
            {
                routes.MapRoute(name: "default", template: "{controller}/{action=index}/{id}");
            });
            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501
                spa.Options.SourcePath = "ClientApp";
                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
spa.Options.SourcePath = "ClientApp";

这将确保所有静态内容将从 _ClientApp_ 文件夹加载。

由于我们从 VS 2017 创建了一个 API 项目，我们需要更新 _Properties/launchsetting.json_ 中的启动设置。删除 launch url 键值

"launchUrl": "api/values"，然后保存文件。

如果您在 IE10、IE 11 上运行应用程序，可能会遇到 _vendor.js_ 或 _polyfill.js_ 的错误。如下所示

为了解决此问题并在 IE 10、IE 11 上运行（我更喜欢这样做，因为它便于调试）。转到 _polyfills.ts_ 文件并取消注释与 IE 相关的部分。

现在是时候最终构建和运行应用程序了。让我们看看会发生什么

搞定！！！成功了。

摘要

在本文中，我们学习了如何在 Visual Studio 2017 中的 ASP.NET Core 应用程序中设置 Angular。在 IE 浏览器上运行应用程序时遇到一个问题，我们必须识别并更新 _polyfills.ts_。这是我们 Angular 之旅的第一步。我们已经准备好了环境，现在，在下一篇文章中，我们将继续理解和创建一个基本的 Angular 应用程序。

我已附加了不包含 _node_modules_ 文件夹的解决方案。因此，如果您想在自己的计算机上运行它，请确保已根据先决条件准备好相关内容。如果您已设置好，请运行命令 `npm install` 来还原包。

历史

  • 2018 年 8 月 5 日：第一个版本
© . All rights reserved.