Angular-CLI with .NET Core

Question

I've created an SPA Angular-CLI .NET Core project in Visual Studio 2017 by:

dotnet new angular -o testApp

I can build and run it normally by Ctrl-F5. In that case:

Does webpack-dev-server serves the app? In my opinion webpack-dev-server is not used here since Kestrel comes into play. However, since webpack is running under the hood there are some bundles that are being created. Here is the HTTP response:
```
 
 
 
   
   angular_cli
   

   
  
  


  Loading...
  
   
  
  
```
The problem is I cannot find any of these bundles inside the application. Where are they? An explanation would be to exist in the memory, however that requires webpack-dev-server and my assumption is it is not launched! So, what exactly does it happen?
By trying
```
ng serve
```
which enables the app to be served by webpack-dev-server, I cannot communicate with .NET server part. So, what's the point of using ng serve if not being able to fully test the application including the back end part?

Tseng · Accepted Answer

Just to give an update on this.

For ASP.NET Core 2.1 or 2.0 with new template package

ASP.NET Core 2.1 (preview as the moment of writing) ships with updated angular templates which are available in 2.1 and resides in Microsoft.DotNet.Web.Spa.ProjectTemplates package.

On ASP.NET Core 2.1 its installed with the .NET Core SDK. See docs.

Or it can be installed manually via

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0

or

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::*

to grab the latest version. The updated templates are based on Angular Cli and use the app.UseSpa(..:) call whereas the old middleware used Webpack.

For ASP.NET Core 2.0

The old Angular SPA Template was based on JavaScriptServices which were shipped with ASP.NET Core up to version 2.0 or by running dotnet new -i "Microsoft.AspNetCore.SpaTemplates::*". See Available templates for dotnet new.

For ASP.NET Core 2.0 this is done by the WebpackDev middleware (see the app.UseWebpackDevMiddleware(...) call in your Startup.cs.

if (env.IsDevelopment())
{
    //app.UseBrowserLink();
    app.UseDeveloperExceptionPage();
    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
    {
        HotModuleReplacement = true
    });
}
else
{
    app.UseExceptionHandler("/Home/Error");
}

it will use the webpack.config.js / webpack.config.vendor.js to build the files on startup or when it changes.

Angular-CLI with .NET Core

Answers (1)

For ASP.NET Core 2.1 or 2.0 with new template package

For ASP.NET Core 2.0

Related Questions