Question

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

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

我已经使用Angular模板创建了一个新项目，copy＆amp;粘贴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核心应用程序：

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

按F5测试到目前为止的内容。

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

删除HomeComponent，CounterComponent NavbarComponent FetchdataComponent并从app.module.shared.ts引用。

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

    < h1 > Hello, world! < /h1 >

按F5测试您的更改。

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

将ClientApp / app的内容替换为angular-cli项目的内容＆＃34; src / app＆＃34;文件夹 - 除了在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。但是，一旦熟悉了服务器端呈现，就可以仅在服务器上或仅在浏览器中使用特定代码。

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

修改配置文件

编辑以下文件并从＆＃34; app＆＃34;更改AppComponent选择器名称。到您的选择器名称。

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

编辑＆＃34; package.json＆＃34;并添加您之前添加到angular-cli生成的应用程序的任何其他依赖项＆＃34; package.json＆＃34;文件。

编辑tsconfig.json并添加＆＃34; jasmine＆＃34;到＆＃34;类型＆＃34;数组在＆＃34; compileOptions＆＃34;。这会添加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

关于调试的说明

用于调试：将Web浏览器设置为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，打字稿的东西（注意因为一些问题是关于版本的不兼容性）。但是，经过一些工作后，您仍然会遇到一些问题，然后进行一些搜索或向社区发出特定错误。

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

2 个答案: