CODEWITHSUNDEEP
debuggingangularvisual-studio-2015asp.net-corewebpack
crthompson
crthompson

Reputation: 15875

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

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)

Upvotes: 1

Views: 1928

Answers (2)

crthompson
crthompson

Reputation: 15875

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.

Upvotes: 1

Kyle Trauberman
Kyle Trauberman

Reputation: 25694

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

Upvotes: 1

Related Questions