将现有 Angular4 CLI 迁移到 .NET Core 2 Angular 模板项目答案

【问题标题】：Migrating an existing Angular4 CLI to .NET Core 2 Angular template project将现有 Angular4 CLI 迁移到 .NET Core 2 Angular 模板项目
【发布时间】：2017-10-10 11:12:17
【问题描述】：

我有一个使用 Angular CLI 构建的现有 Angular4 应用程序。正常开发，以index.html 和main.ts 作为入口点。项目用户使用 SASS for CSS。

我现在需要在 .NET Core Web 应用程序中运行这个 Angular 应用程序（我知道这在过去很头疼），所以我知道在 Visual Studio 2017 中，Microsoft 已经创建了新的 Web 模板，特别是 Angular 和反应。

我已经使用 Angular 模板创建了一个新项目，将适当的依赖项复制并粘贴到 packages.json 文件中，将源代码从 src 目录复制到 ClientApp 目录，将默认 webapp 文件调整为加载适当的文件，但我收到很多错误消息（太多甚至无法粘贴到这里）。

我认为我处理的不是一个特定的问题，而是一种完全不同的 Angular 开发方法。是否有一些关于如何将 Angular4 CLI 项目转换为 Visual Studio .NET Core 2 模板的指南？

【问题讨论】：

您的目标是“让这个 Angular 应用程序在 .NET Core Web 应用程序中运行”吗？因为您不需要从 Angular 模板开始来完成此操作。如果是这样，我可以告诉你怎么做。
迟到的评论，但请查看this。对我来说就像魅力一样。

标签： angular visual-studio-2017 asp.net-core-2.0 .net-core-angular

【解决方案1】：

您可以通过以下步骤将现有的 Angular-cli 迁移到 .NET Core 2 Angular 模板项目。

[注意：您可以在此处下载演示此过程的存储库：https://github.com/johnpankowicz/angular-cli-to-SPA-template]

确保节点为 v7.5.0 或更高版本。

使用 SPA 模板创建 Angular Asp.Net Core 应用：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
mkdir spa
cd spa
dotnet new angular
dotnet restore
npm install
start spa.csproj

按 F5 测试您目前所拥有的。

移除模板生成的示例组件：

从 app.module.shared.ts 中删除 HomeComponent、CounterComponent NavbarComponent FetchdataComponent 和 refs。

编辑 app.component.html 并将内容替换为：

    < h1 > Hello, world! < /h1 >

按 F5 测试您的更改。

将客户端应用代码替换为您自己的代码

将 ClientApp/app 的内容替换为您的 angular-cli 项目的“src/app”文件夹的内容——除了在 ClientApp/app 中保留以下文件：

    app.module.browser.ts
    app.module.server.ts
    app.module.shared.ts

编辑 app.module.browser.ts 和 app.module.server.ts。如果此文件不在预期位置，请修复 app.component 的导入引用。

编辑 app.module.shared.ts。从您的应用所需的导入、导出和声明中添加缺少的导入语句和缺少的类。注意：不要包含那些已经包含在 app.module.browser.ts 或 app.module.server.ts 中的。

现在，要让您的应用运行，您可以将所有模块添加到 app.module.shared.ts。但是，一旦您熟悉了服务器端渲染，您就可以利用仅在服务器上或仅在浏览器中运行特定代码。

编辑视图/Home/Index.cshtml。将应用选择器名称更改为 AppComponent 中定义的名称。添加您对根 index.html 文件所做的任何添加。

编辑配置文件

编辑以下文件并将 AppComponent 选择器名称从“app”更改为您的选择器名称。

    ClientApp/boot.browser.ts
    ClientApp/boot.server.ts

编辑“package.json”并为您的应用添加您之前添加到 angular-cli 生成的“package.json”文件中的任何其他依赖项。

编辑 tsconfig.json 并将“jasmine”添加到“compileOptions”中的“types”数组中。这会添加 angular-cli 生成的 .spec 文件所需的类型。

        "types": [
          "webpack-env",
          "jasmine" ]

使用 Sass

与 angular-cli 相比，AspNetCore.SpaTemplates 将 webpack.config.js 放在您的项目文件夹中，可以在其中进行修改。您可以在其中启用对 Sass/Less 的支持。以下是启用较少支持的指南：https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#example-a-simple-webpack-setup-that-builds-less

调试注意事项

用于调试：将网络浏览器设置为 Google Chrome。目前有一个关于断点的未解决问题。您需要在开始调试 (F5) 之后设置断点。见：https://developercommunity.visualstudio.com/content/problem/125941/typescript-debugging-is-not-working-on-visual-stud.html 从 cmets 中可以看出，他们认为这是目前需要修复的优先级较低的错误。希望它会尽快提升优先级。

在 .Net Core 中运行 angular-cli 生成代码的另一种方式

有一种更简单的方法可以在 .Net Core 中运行 angular-cli 应用程序。这就是我在对原始问题的评论中提到的。您可以将 angular-cli 应用程序包含在一个空的 Asp.Net Core Web 应用程序中。要了解如何操作，请访问：https://stackoverflow.com/a/47229442/1978840

【讨论】：

【解决方案2】：

在我看来，这仍然是一项非常艰苦的工作。我们在项目中所做的是使用 Visual Studio 2017 从头开始一个新的 .NET core angular 项目，并开始逐个文件放置。从您的极简主义组件之一开始。把所有的脚本和主题，修改路由，其他建议是升级一些东西，比如 npm，typescript （小心，因为一些问题是关于版本不兼容的）。但是，经过一些工作后，您仍然遇到一些问题，然后进行一些搜索或向社区提出特定错误。

【讨论】：