How do I run in Angular 2 with Asp.net MVC using webpack?

Question

I have created a MVC (aspnet core) application that uses Angular2 for the front end.

A shortened version of my solution looks like this:

Solution
 - wwwroot (webpack bundled angular)
 |_ app.bundle.js (bundle)
 - app (angular 2 application)
 |_ Components
 |_ app.module.ts
 |_ main.ts
 - Controllers
 |_ HomeController.cs
 -Views
 |_Home
 -|_Index.cshtml
 -webpack.config.js
 -Startup.cs
 -project.json
 -package.json
 -web.config

My problem is when it comes to debugging and running the site.

I am using IIS express to debug the site. It works, but debugging requires digging into an enormous webpack created app.bundle.js. (I'm not sure how to use the map files either. Chrome doesnt seem to unpack them.)

Most of the documents I've read on debugging call for the use of npm start or webpack-dev-server. I do not think I can use these because my site requires the cshtml to be served.

I would also like to get to a place where I can use watch to automatically compile and refresh my site.

Can I set up IIS (instead of express) to serve both cshtml and angular 2 files and debug them easily? (preferably with something that handles updates like watch)

Kyle Trauberman · Accepted Answer · 2016-11-08 16:55:37Z

1

You need to make sure the .map files are generated and served alongside the js bundle. This will tell the debugger (chrome, for example) to map back to the original source file.

Ensure the "sourceMap" setting in your tsconfig.json file is set to true.

http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

answered Nov 8, 2016 at 16:55

Kyle Trauberman

25.7k13 gold badges88 silver badges124 bronze badges

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

Comments

crthompson · Accepted Answer · 2017-02-13 20:21:55Z

1

Use the nuget package for core single page app's Webpack. This integrates into your Startup.cs file.

using Microsoft.AspNetCore.SpaServices.Webpack;

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, IHttpContextAccessor httpContextAccessor)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
        {
            HotModuleReplacement = true,
            ConfigFile = "./webpack/webpack.config.js"
        });
    }
    else
    {
        app.UseExceptionHandler("/App/Error");
    }

    app.UseStaticFiles();

You still configure the NPM Webpack as you would normally. (note I am using webpack.config.js to do all the regular webpack configurations.)

The concept that was a little difficult to get my head around was that you are running 2 sites. One (usually port 5000) that serves the CSHTML, the other (by default 8080 in the nuget webpack) that serves the angular 2 bundled javascript.

As for debugging in Chrome, use the webpack:// tree in sources to set your breakpoints and step through your code. And as @Kyle Trauberman notes be sure to enable sourcemap.

edited Feb 13, 2017 at 20:21

answered Nov 8, 2016 at 16:55

crthompson

15.9k6 gold badges64 silver badges87 bronze badges

2 Comments

raberana Over a year ago

what if you are just using old asp.net mvc 5? how can we use hmr capability of webpack?

crthompson Over a year ago

@RojBeraña are you asking this because you dont have a startup.cs or because you dont have a wwwroot? If you dont have a startup.cs use OWIN, if you dont have a wwwroot, create the directory and use staticfiles and default files. You may need to configure the static files middleware to map your wwwroot as root

Collectives™ on Stack Overflow

How do I run in Angular 2 with Asp.net MVC using webpack?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related