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:

 <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>angular_cli</title>
   <base href="/">

   <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="styles.bundle.css" rel="stylesheet"/>
</head>
<body>
  <app-root>Loading...</app-root>
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script> 
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

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?

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 18, 2018 at 16:22

Tseng

64.5k18 gold badges200 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Unknown developer Over a year ago

There is no WebpackDevMiddleWare...

app.UseSpa(spa =>             {                 spa.Options.SourcePath = "ClientApp";                  if (env.IsDevelopment())                 {                     spa.UseAngularCliServer(npmScript: "start");                 }             });

Tseng Over a year ago

There used to be unless they changed it. Gotta look what the UseSpa but there have been hints that they changed it so its probably that already, but I didn't update my existing projects yet to it. 4-5 moths ago the templates generated UseWebpackDevMiddleware

Tseng Over a year ago

Are you by chance using ASP.NET Core 2.1 preview? I just updated my templates and created an new project with dotnet new angular -o testApp and it still creates a template using UseWebpackDevMiddleware

Unknown developer Over a year ago

It is true that I have installed .NET Core SDK 2.1.4. So, do you have any explanation for that case?

Tseng Over a year ago

The SDK version isn't that much of important as its not tied to the .NET Core versioning. The version of the Runtime and if its ASP.NET Core 2.1 would be more interesting (i.e. if one shipped with preview editions of VS). Anyways UseSpa is from SpaServices which was also used for the UseWebpackDevMiddleware see github.com/aspnet/JavaScriptServices/blob/2.1.0-preview2-final/… so its that which bundles and serves the files and does hot module replacement as mentioned in the issue

|

Collectives™ on Stack Overflow

Angular-CLI with .NET Core

1 Answer 1

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

For ASP.NET Core 2.0

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

For ASP.NET Core 2.0

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related