Cannot find "aspnet-webpack" module when using "publish to dotnet" in .Net Core 2.0 and Angular

Question

I am trying to fulfill the answers to this problem, but to no avail. I am trying to publish a .Net Core 2.0 and Angular project using the 'dotnet publish' command line command that I successfully publish, however when I try to run my .dll project in a published folder, my project spits out this error when it starts in the development environment:

Unhandled exception: System.AggregateException: One or more errors occurred. (The Webpack middleware failed because of an error while loading “aspnet-webpack.” Error: Error: Cannot find the module “aspnet-webpack”

When launched in Production and enabled DeveloperExceptionPage (as shown in my statup.cs below), the .netcore application starts, but the web application itself, which I believe is due to a larger error, crashes, aspnet-webpack not found:

NodeInvocationException: not shown (in promise): error: no factory component was found for the HomeComponent component. Have you added it to @ NgModule.entryComponents?

Startup.cs

public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true }); } else { //app.UseExceptionHandler("/Home/Error"); app.UseDeveloperExceptionPage(); } app.UseStaticFiles(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); routes.MapSpaFallbackRoute( name: "spa-fallback", defaults: new { controller = "Home", action = "Index" }); }); } } 

I don't use @Angular/Cli , but I use the default Angular project that generates VS2017 (August update, I believe?), Which seems to only use Webpack. The problem seems to be that there is a link in the project configuration file that I do not provide, but I cannot understand why this is so.

No other answers to this question have yet helped me, so I apologize if this is a recurring question.

Answer 1

I had the same problem with " aspnet-webpack ", it was introduced halfway when developing the project, so I was a little surprised to see the solution suddenly die. For a couple of months everything worked fine on IIS, but it suddenly did not boot.

The IIS log files did not help, so I tried to solve this pair of methods, one of them worked. Hurry up!

Decision

I ran the following in the package manager window:

 dotnet run --project <Full path of *.csproj> --configuration Debug 

This gave me some advice and I started looking for the " Error: Cannot find module 'aspnet-webpack " Error: Cannot find module 'aspnet-webpack . I tried to go through all the changes in the last pair of checks and found that we upgraded the version of " Microsoft.AspNetCore.All " from 2.0.0 to 2.0.3 , so lowering it to the original version fixed it.

I think they both use different versions of node packages. So do not update for the sake of it, if only for a very good reason. Reading about this, some bits are very closely related to specific versions, and Angular breaks very easily if something has changed. In the process, although I managed to upgrade the node version to the latest version 5.0.0

I like to find more details, but there are no details about why a particular version is needed.

Answer 2

After publishing the .Net Core 2.0 and Angular project and before starting it, you need to make sure that the ASPNETCORE_ENVIRONMENT environment variable is not set to Development. The published project does not include support for WebpackDevMiddleware or HotModuleReplacement. But he will try to use them if the environment is set to "Development".

HotModuleReplacement automatically updates the generated Webpack resources (such as JavaScript, CSS, or images) in your web browser when the source files change. This is clearly what you do not want in production.

If the ASPNETCORE_ENVIRONMENT parameter is set to Development, you can change the parameter:

 setx ASPNETCORE_ENVIRONMENT "Production" 

You will need to close the current command window and open another to see the change.

You can also comment on the following code in startup.cs to accomplish the same result:

 #if DEBUG app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true }); #endif 

Answer 3

Make sure you fully install all of these dependencies:

 npm install webpack-hot-middleware --save-dev npm install webpack-dev-middleware --save-dev npm install aspnet-webpack --save-dev 

Answer 4

In my case, the reason was that the SPA (Vue in my case) is in the ClientApp folder, and app.UseWebpackDevMiddleware expects it to be in the root directory of the project.

Setting the ProjectPath option solved this for me.

 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, ConfigFile = Path.Combine(env.ContentRootPath, @"ClientApp\node_modules\@vue\cli-service\webpack.config.js"), ProjectPath = Path.Combine(env.ContentRootPath, @"ClientApp") }); 

Answer 5

Make sure node.js is installed during production and is on the way.

node.js is used by webpack

Also check that you have the latest version of node.js (4+)

Link: AspNetCore + Angular 2: WebpackDevMiddleware Error with New Project

The node.js version can be checked with:

 where.exe node.exe (Windows 7+) which node.exe (linux bash) 

And, of course, the path environment variable should be checked and updated if pointing to outdated node.js

All the best

Answer 6

I got the same error as you in a project without Angular:

Unhandled exception: System.AggregateException: One or more errors occurred. (Webpack Developer Middleware failed because of an error loading “aspnet-webpack.” Error: Error: Cannot find the module “aspnet-webpack”

It turned out to be a simple node problem, which I usually forget about.

 npm install 

Remember that npm commands must be executed in the top directory that contains your package.json file. I hope this helps someone who has as many problems as I do, remember that you need to run npm commands. Thanks to the forum, which reminded me:

https://www.ebenmonney.com/forum/?view=thread&id=20&part=1#postid-57

Answer 7

AT configure function startup.cs You can use the if statement for your development environment.

  if (env.IsDevelopment()) { // Print exception and all details for the developer app.UseDeveloperExceptionPage(); // Use WebPack to update css , js , html automatically app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true }); } else { app.UseExceptionHandler("/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } 

You can use this command in the print command to change the current environment: setx ASPNETCORE_ENVIRONMENT "Development"

Answer 8

The main reason for this error is that you are using the dependency somewhere in your code, and it is not installed in your solution. If you are using Visual Studio, try using a clean assembly, it will show errors in your project that will help you find it.