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

我有一个使用angular CLI构建的现有Angular4应用程序。正常开发，index.html和main.ts作为入口点。项目用户SASS为CSS。将现有的Angular4 CLI迁移到.NET Core 2 Angular模板项目

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

我创建了一个新的项目与角模板，复制粘贴&的packages.json文件中适当的依赖关系，从src目录到ClientApp目录复制的源，调整默认的Web应用程序文件来加载相应的文件，但我收到很多错误信息（太多甚至无法粘贴）。

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

来源

2017-10-10 developer82

您的目标是“让这个Angular应用程序在.NET Core Web应用程序中运行”吗？因为你不需要从Angular模板开始来完成这个任务。如果是这样，我可以告诉你如何。 –

在我看来，它仍然是一项非常艰苦的工作。我们在我们的项目中做了什么就是使用Visual Studio 2017从头开始一个新的.NET核心角项目，并开始逐个文件。从您的极简主义组件开始。把所有的脚本和主题，修改路线，其他建议是升级npm，打字稿等一些东西（注意因为版本不兼容导致一些问题）。但是，在一些工作之后，您仍然会遇到一些问题，然后进行一些搜索或向社区提出具体的错误。

来源

2017-10-19 12:49:58

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

[注：您可以下载它在这里演示此过程回购：https://github.com/johnpankowicz/angular-cli-to-SPA-template]

确保节点是V7.5.0或以上。

使用SPA模板创建角度Asp.Net核心应用：

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测试您的更改。

更换客户端应用程序代码与你自己的

与角CLI项目的“SRC /应用程序”文件夹中的内容替换ClientApp /应用程序的内容 - 除了离开ClientApp下列文件/应用：

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

编辑应用程序。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文件所做的任何添加。

编辑配置文件

编辑以下文件和改变从“应用”到你选择的名字AppComponent选择名称。

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

编辑“的package.json”，并添加任何额外的依赖你的应用程序，您以前添加到生成的“的package.json”文件中的角CLI。

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

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

使用萨斯

相反角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

注意调试

要进行调试：将网页浏览器谷歌浏览器。目前关于断点的问题尚未解决。您需要在开始调试（F5）后设置断点。请参阅：https://developercommunity.visualstudio.com/content/problem/125941/typescript-debugging-is-not-working-on-visual-stud.html 正如您在评论中看到的那样，他们认为这是一个较低优先级的错误，目前需要修复。希望它很快会优先上升。

的另一种方式来运行角度-CLI生成的代码中的.Net核心

有运行在.net核心的角-CLI应用更简单的方法。这是我在对原始问题的评论中提到的。您可以将angular-cli应用程序封装在空的Asp.Net Core Web应用程序中。要了解如何，请访问：https://stackoverflow.com/a/47229442/1978840

来源

2017-11-13 02:37:09

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

回答

相关问题