Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
435 views
in Technique[技术] by (71.8m points)

asp.net - Angular-CLI with .NET Core

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...