Migrating from the old ASP.NET Core Angular Spa template to the newer one

18 December 2017

Client Side Changes:

If you are using the ASP.NET Core Angular SPA template that has been shipped with the .NET Core 2.0 release of the framework, you will have the following project structure.

Assuming that you put your application scripts under the ClientApp/app folder. So, before migrating, take a back up of the folder.

Delete the ClientApp folder altogether. We will generate the folder with the Angular CLI. On the project root directory, open up a command prompt window and generate an Angular app by running the following the CLI command,

ng new ClientApp

If you don't have the Angular CLI installed already. Install it with the following npm command

npm install -g @angular/cli

Once the CLI scaffolds an Angular application in the ClientApp folder, you should have the following application structure.

Now replace the current app folder with your previously backed up app folder. You can delete the app.module.browser.ts and app.module.server.ts file. Rename the app.module.shared.ts to app.module.ts. Open the renamed file and do the following changes:

Import BrowserModule from angular and add it in the imports array:

import { BrowserModule } from '@angular/platform-browser';

Add and configure a bootstrap property under @NgModule. Add the AppComponent in the in the array,

bootstrap: [AppComponent]

Rename AppSharedModule to AppModule

Depending on the selector name of your bootstrap component, change the selector name in index.html if you need to e.g. <app-root> to <app>

Configure your application base url in the main.ts file. Add the following scripts after the imports in main.ts file,

Client side npm dependencies should be installed on the ClientApp root. So, extract the packages from the package.json that is on your project root directory and add them in the package.json file under the ClientApp folder. Once done, do a npm install to restore the packages.

Now you should be able to run just the Angular application by executing the following CLI command on the ClientApp folder,

ng serve

Server Side Changes

Remove the old Microsoft.AspNetCore.SpaServices references from Startup.cs,

Remove using statements: using Microsoft.AspNetCore.SpaServices.Webpack;

.csproj file need some modifications. Basically, you just have to keep the <PackageReference> and change everything. However, I'm providing the whole new .csproj files. You can extract and add the information needed to your .csproj file,

Remove the webpack.vendor.config.js and webpack.config.js from the client root.

At this point you are done if you don't have/want SSR in your application.

Remove Unnecessary files (Be careful!)

Remove the Views folder from the project root (if you want). Because we no longer need asp-prerender-module for SSR and also the index.html file under ClientApp/scr is the new entry point where the Angular application is rendered.

Enabling SSR

In the previous templates we used to have a TagHelper, asp-prerender-module to enable Server Side Rendering support in our Angular apps. We no longer need this TagHelper and also we don't have any specific placeholder in some razor view where the whole client application is rendered. Instead the index.html under ClientApp/scr is the main entry point of our application. The official documentation talks at length about how to enable SSR in the following url,