asp.net - Angular-CLI with .NET Core

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

asp.net - Angular-CLI with .NET Core

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

422 views

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:05:40+0000

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.

Categories

asp.net - Angular-CLI with .NET Core

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

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

For ASP.NET Core 2.0

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags