NET Core的Angular-CLI [英] Angular-CLI with .NET Core

查看:73
本文介绍了NET Core的Angular-CLI的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我通过以下方式在Visual Studio 2017中创建了SPA Angular-CLI .NET Core项目:

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

dotnet new angular -o testApp

我可以通过 Ctrl - F5 正常构建和运行它.在这种情况下:

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

  • webpack-dev-server是否提供该应用程序?我认为自Kestrel发挥作用以来,此处未使用webpack-dev-server.但是,由于webpack在后台运行,因此正在创建一些捆绑包.这是HTTP响应:

  • 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>

问题是我在应用程序内找不到这些捆绑软件中的任何一个.他们在哪里?内存中将存在一个解释,但是这需要webpack-dev-server,而我的假设是它没有启动!因此,究竟发生了什么?

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?

通过尝试

ng serve

使得该应用可以由webpack-dev-server提供服务,我无法 与.NET服务器部分进行通信.因此,使用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?

推荐答案

仅对此进行更新.

ASP.NET Core 2.1(撰写本文时为预览)附带了更新的角度模板,这些模板在2.1中可用,并且位于Microsoft.DotNet.Web.Spa.ProjectTemplates程序包中.

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.

在ASP.NET Core 2.1上,其与.NET Core SDK一起安装.请参见 docs .

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

或者可以通过

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

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

获取最新版本.更新的模板基于Angular Cli,并使用app.UseSpa(..:)调用,而旧的中间件则使用Webpack.

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.

旧的Angular SPA模板基于 JavaScriptServices ,ASP.NET Core附带了该版本, 2.0版或运行dotnet new -i "Microsoft.AspNetCore.SpaTemplates::*".参见新的dotnet可用模板.

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.

对于ASP.NET Core 2.0,这是由WebpackDev中间件完成的(请参阅Startup.cs中的app.UseWebpackDevMiddleware(...)调用.

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");
}

它将在启动时或更改时使用webpack.config.js/webpack.config.vendor.js来构建文件.

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

这篇关于NET Core的Angular-CLI的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆