Wie laufe ich in Angular 2 mit Asp.net MVC mit Webpack?

Question

Ich habe eine MVC (aspnet core) -Anwendung erstellt, die Angular2 für das Frontend verwendet.

Eine verkürzte Version meiner Lösung sieht wie folgt aus:

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 

Mein Problem ist, wenn es um die Site zu debuggen und Laufen kommt.

Ich verwende IIS Express, um die Website zu debuggen. Es funktioniert, aber das Debuggen erfordert das Graben in ein enormes Webpack erstellt app.bundle.js. (Ich bin nicht sicher, wie entweder die Map-Dateien verwenden. Chrome tut sie auspacken zu sein scheinen.)

Die meisten der Dokumente, die ich auf Debug-Aufruf für den Einsatz von npm start oder webpack-dev-server gelesen habe. Ich glaube nicht, dass ich diese verwenden kann, da meine Website erfordert, dass die cshtml bedient wird.

Ich möchte auch zu einem Ort, wo ich watch automatisch kompilieren und aktualisieren meine Website verwenden können.

Kann ich IIS (anstelle von express) einrichten, um sowohl cshtml- als auch angular 2-Dateien zu liefern und sie leicht zu debuggen? (vorzugsweise mit etwas, das Updates wie watch verarbeitet)

Answer 1

Verwenden Sie das nuget Paket für Webpack einzelne Seite App Kern. Dies integriert sich in Ihre Startup.cs Datei.

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(); 

Sie konfigurieren das NPM-Webpack immer noch so, wie Sie es normalerweise tun würden. (Hinweis: Ich verwende webpack.config.js, um alle regulären Webpack-Konfigurationen durchzuführen.)

Das Konzept, das ein wenig schwierig war, war, dass Sie 2 Seiten betreiben. Eine (in der Regel Port 5000), die die CSHTML dient, die andere (standardmäßig 8080 im nugget Webpack), die die eckige 2 gebündelte Javascript dient.

Verwenden Sie zum Debuggen in Chrome den Baum webpack:// in den Quellen, um Ihre Haltepunkte festzulegen und durch Ihren Code zu gehen. Und als @Kyle Trauberman Hinweise sicher sein, Quellkarte zu aktivieren.

Answer 2

Sie müssen sicherstellen, dass die .map-Dateien generiert und neben dem js-Bundle geliefert werden. Dadurch wird der Debugger (z. B. Chrome) angewiesen, der ursprünglichen Quelldatei zuzuordnen. Stellen Sie sicher, dass die "sourceMap" Einstellung in Ihrer tsconfig.json-Datei auf true festgelegt ist.

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