Migrating an existing Angular4 CLI to .NET Core 2 Angular template project

Question

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.

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.

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).

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?

Answer 1

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

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

Make sure node is v7.5.0 or above.

Create an Angular Asp.Net Core app using the SPA templates:

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

Press F5 to test what you have so far.

Remove sample components that the template generated:

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

Edit app.component.html and replace contents with:

    < h1 > Hello, world! < /h1 >

Press F5 to test your changes.

Replace client app code with that of your own

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

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.

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.

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.

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.

Edit configuration files

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

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

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

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" ]

Using Sass

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

Note on debugging

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.

Another way to run angular-cli generated code in .Net Core

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

Answer 2

In my opinion it still being a really hard work. What we did in our project was to start a new .NET core angular project from the scratch using Visual Studio 2017 and started putting file by file. Start with one of your minimalist component. Put all the scripts and theme, amend the routes, and other suggestion is to upgrade some of things like npm, typescript (take care because some problems are regarding incompatibility of version). However, after some work you still with some issues then make some search or put an specific error to the community.