Angular CLI 和 ASP.NET Core Angular 模板

• GitHub 存储库

引言

您可能知道，如果您使用 Visual Studio 2017 - Preview 3 并且您使用 .NET Core 2.0 - Preview 2，现在有一个新的模板可用于创建 Angular 应用程序。

我喜欢 Angular-CLI 完成所有样板的方式，对我来说，让 Angular CLI 和 ASP.NET 新推出的 Angular 模板一起工作是一项挑战。

在本技巧中，我将展示如何设置您的环境以使用 ASP.NET Core Angular 模板，同时仍然使用 Angular-CLI。

必备组件

• Node.js -- 我正在使用 8.2.1 版本
• Visual Studio 2017（15.3.2 或更高版本）
• .NET Core 2.0

设置环境

步骤 1

创建一个新项目，如下图所示

选择 Angular 作为项目模板。

重要提示：请注意，只有从对话框顶部的框架下拉列表中选择 ASP.NET Core 2 时，Angular 模板才可用。

在解决方案资源管理器中，找到 ClientApp 文件夹。这是您的 Angular 应用程序的根文件夹。

第二步

打开命令提示符并键入以下命令

npm install -g @angular/cli@latest

这将全局安装 Angular CLI。

您还需要安装 Angular CLI 作为开发依赖项。从命令提示符，导航到您的项目的根文件夹并键入以下命令

npm install --save-dev @angular/cli@latest

步骤 3

在解决方案资源管理器中，在 ClientApp 文件夹下，打开 app 文件夹。

将 app.module.shared.ts 文件重命名为 app.module.ts。

步骤 4

在同一个 app 文件夹中，您将找到文件 app.module.browser.ts，打开该文件。

您将看到 AppModuleShared 的路径不再有效。

让我们修复它，如下图所示

步骤 5

现在打开 app.module.server.ts 文件，您将在 app 文件夹中找到该文件，该文件夹位于 ClientApp 文件夹内。此文件存在与我们在步骤 4 中看到的相同问题。

让我们修复它

步骤 6

为了能够使用 Angular CLI，我们需要项目根文件夹中的 .angular-cli.json 文件。

为此，打开命令提示符。

导航到当前项目之外的位置，然后键入以下命令

ng new default

上面的命令会在指定位置为您创建一个新项目。

步骤 7

从文件资源管理器中，打开新创建的项目并复制 .angular-cli.json 文件。

步骤 8

返回您的 Web 项目并将 .angular-cli.json 文件粘贴到项目的根文件夹中。

步骤 9

现在在 Visual Studio 中打开 .angular-cli-json 文件，并将根键的值从 src 更改为 ClientApp；因为这是您的 Angular 应用程序的根文件夹。

做得好。你完成了！

第 10 步

现在让我们测试一下。

打开命令提示符。导航到 components 文件夹，该文件夹位于 app 文件夹内，然后键入以下命令。

这是一个 Angular CLI 命令，用于创建一个新组件并将其注册到 app.module.ts。

ng g c student

如果一切顺利，运气好的话，您应该会看到这样的内容 -- 创建了 4 个新文件，并且 app.module.ts 文件被自动修改以注册这个新组件。

第 11 步

返回解决方案资源管理器，打开 components 文件夹，该文件夹位于 app 文件夹（位于 ClientApp 文件夹内）内，在此 component 文件夹中，现在您将看到一个新文件夹“student”。您将在该文件夹中找到从步骤 10 新生成的文件。

第 12 步

打开 app.module.ts 文件。您会注意到您的组件已经注册。

就这样！

希望你觉得这个有用！