将现有的Angular4 CLI迁移到.NET Core 2 Angular模板项目 [英] Migrating an existing Angular4 CLI to .NET Core 2 Angular template project

问题描述

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

I have an existing Angular4 application built with the angular CLI. Developed as normal, with index.html and main.ts as it's entry points. The project users SASS for CSS.

我现在需要将此Angular应用程序运行在.NET Core Web应用程序中(我知道过去很头疼)，因此我知道Microsoft在Visual Studio 2017中创建了新的Web模板，尤其是针对Angular和反应.

I now need to have this Angular app running inside a .NET Core web application (which I know was a headache in the past), so I know that in Visual Studio 2017, Microsoft had created new web templates especially for Angular and React.

我用Angular模板copy&创建了一个新项目.在packages.json文件中粘贴适当的依赖项，将源从src目录复制到ClientApp目录，调整默认的webapp文件以加载适当的文件，但是我收到很多错误消息(太多甚至粘贴在这里).

I've created a new project with the Angular template, copy & pasted the appropriate dependencies inside the packages.json file, copied the source from the src directory to the ClientApp directory, adjusted the default webapp file to load the appropriate files, but I get a lot of error messages (too many to even paste here).

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

I don't think I'm dealing with one specific problem, but with a whole different methodology for Angular development. Is there some guide on how to convert an Angular4 CLI project to Visual Studio .NET Core 2 template?

推荐答案

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

You can migrate an existing Angular-cli to to a .NET Core 2 Angular template project by the following steps.

[注意:您可以在此处下载一个仓库来演示此过程: https ://github.com/johnpankowicz/angular-cli-to-SPA-template ]

[ Note: You can download a repo which demonstrates this process here: https://github.com/johnpankowicz/angular-cli-to-SPA-template ]

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

Make sure node is v7.5.0 or above.

使用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键测试您到目前为止所拥有的.

Press F5 to test what you have so far.

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

从app.module.shared.ts中删除HomeComponent，CounterComponent NavbarComponent FetchdataComponent和引用.

Delete HomeComponent, CounterComponent NavbarComponent FetchdataComponent and refs from app.module.shared.ts.

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

Edit app.component.html and replace contents with:

    < h1 > Hello, world! < /h1 >

按F5键测试更改.

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

将ClientApp/app的内容替换为angular-cli项目的"src/app"文件夹中的内容-除了将以下文件保留在ClientApp/app中之外:

Replace contents of ClientApp/app with the contents of your angular-cli project's "src/app" folder -- except leave the following files in ClientApp/app:

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

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

Edit app.module.browser.ts and app.module.server.ts. Fix the import references for app.component, if this file is not in the expected location.

编辑app.module.shared.ts.从应用程序所需的导入，导出和声明中添加缺少的导入语句和缺少的类.注意:请不要包含app.module.browser.ts或app.module.server.ts中已经包含的内容.

Edit app.module.shared.ts. Add the missing import statements and missing classes from the imports, exports and declarations required by your app. Note: do not include those that are already included in app.module.browser.ts or app.module.server.ts.

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

For now, to get your app running, you can add all your modules to app.module.shared.ts. But once you are familiar with server-side rendering, you can make use of running specific code only on the server or only in the browser.

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

Edit Views/Home/Index.cshtml. Change the app selector name to that defined in your AppComponent. Add any additions that you made to your root index.html file.

编辑配置文件

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

Edit the following files and change the AppComponent selector name from "app" to your selector name.

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

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

Edit "package.json" and add any additional dependencies for your app that you had previously added to the angular-cli generated "package.json" file.

编辑tsconfig.json并将茉莉花"添加到"compileOptions"中的"types"数组中.这将添加angular-cli生成的.spec文件所需的类型.

Edit tsconfig.json and add "jasmine" to the "types" array in "compileOptions". This adds types needed for angular-cli generated .spec files.

        "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

In contrast to angular-cli, the AspNetCore.SpaTemplates place webpack.config.js in your project folder, where it can be modified. In it you can enable support for Sass/Less. Here is a guide for enabling Less support: 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 从评论中可以看到，他们认为这是当前要修复的优先级较低的错误.希望它将很快优先处理.

For debugging: Set the web browser to Google Chrome. There is currently an unresolved issue concerning breakpoints. You need to set your breakpoints AFTER starting debugging (F5). See: https://developercommunity.visualstudio.com/content/problem/125941/typescript-debugging-is-not-working-on-visual-stud.html As you can see from the comments, they consider this a lower priority bug to fix at this time. Hopefully it will move up in priority soon.

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

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

There is an easier approach to running an angular-cli app in .Net Core. This is what I alluded to in my comment to the original question. You can enclose the angular-cli app inside an empty Asp.Net Core web app. To see how, go to: https://stackoverflow.com/a/47229442/1978840

这篇关于将现有的Angular4 CLI迁移到.NET Core 2 Angular模板项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！