This repository is a simplified repro to test server-side debugging capibilities using the latest ASP.NET Core Angular-Cli-based templates. Currently, there appears to be an issue with .map files not being generated for the server-side bundles, and this results in a server-side debug experience where you can only debug the minified javascript code, rather than the source typescript files.
The issue is tracked in #8931 in the CLI repo and #1449 in the JavaScriptServices repo.
Prerequisites: npm and the dotnet core cli
- Clone this repo locally, or follow the "How this repo was built" instructions below to start from scratch.
- From the
ClientApp
directory, runnpm install
. - Set environment to development:
set ASPNET_ENVIRONMENT=Development
(Windows)export ASPNET_ENVIRONMENT=Development
(Mac/Linux) - From the root project directory run
dotnet run
. - Navigate a browser window to http://localhost:5000
- Look for ouput in the command line that looks like this:
warn: Microsoft.AspNetCore.NodeServices[0]
Debugger listening on ws://127.0.0.1:9229/652cb200-9bc5-4de6-bbe8-dbcc3ff3be00
- Open a chrome tab to this URL (replacing the GUID in this string with the GUID in the command line in step #6):
chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/652cb200-9bc5-4de6-bbe8-dbcc3ff3be00
In the chrome debugger, you will only see the minified .js files, rather than the full (more useful) source files:
- Install the latest Angular-Cli-based templates:
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final
- Create a new directory, navigate to it, and run:
dotnet new angular
- Modify the project according to the instructions in the template documentation under "Server-Side Rendering".
- Enable server-side debugging by adding these lines to ConfigureServices method in Startup.cs (from instructions here):
services.AddNodeServices(options => {
options.LaunchWithDebugging = true;
options.DebuggingPort = 9229;
});