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

Question

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

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

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

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

Answer 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和引用。

编辑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中。 但是一旦您熟悉了服务器端渲染，就可以利用仅在服务器上或仅在浏览器中运行特定的代码。

编辑Views / Home / Index.cshtml。 将应用选择器名称更改为AppComponent中定义的名称。 将您添加的所有内容添加到根index.html文件中。

编辑配置文件

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

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

编辑“ package.json”，并为您先前添加到angular-cli生成的“ package.json”文件中的应用程序添加所有其他依赖项。

编辑tsconfig.json并将“茉莉花”添加到“ compileOptions”中的“类型”数组中。 这将添加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从评论中可以看到，他们认为这是优先级较低的错误在这个时候修复。 希望它将很快优先发展。

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

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

Answer 2

我认为这仍然是一项艰巨的工作。 我们在项目中所做的就是使用Visual Studio 2017从头开始一个新的.NET核心角度项目，并开始逐个文件放置文件。 从您的极简主义组件开始。 放置所有脚本和主题，修改路径，其他建议是升级某些内容，例如npm，打字稿（请注意，因为某些问题与版本的不兼容性有关）。 但是，经过一些工作之后，您仍然会遇到一些问题，然后进行一些搜索或向社区提出特定的错误。