Question

我创建了一个MVC（aspnet核心）应用程序，它使用Angular2作为前端。

我的解决方案的缩短版本如下所示：

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

我的问题在于调试和运行网站。

我使用IIS express来调试网站。它可以工作，但是调试需要深入研究创建的app.bundle.js巨大的webpack。（我也不确定如何使用地图文件。Chrome似乎无法解压缩。）

我在调试时阅读的大多数文档都要求使用npm start或webpack-dev-server。我不认为我可以使用这些，因为我的网站需要提供cshtml。

我还想到一个可以使用watch自动编译和刷新我的网站的地方。

我可以设置IIS（而不是express）来同时提供cshtml和angular 2文件并轻松调试吗？（最好使用处理watch）

等更新的内容

Answer 1

您需要确保生成.map文件并与js包一起提供。这将告诉调试器（例如chrome）映射回原始源文件。

确保tsconfig.json文件中的"sourceMap"设置设置为true。

tokenizer

Answer 2

将nuget包用于核心单页应用程序http://www.typescriptlang.org/docs/handbook/tsconfig-json.html。这会集成到您的Startup.cs文件中。

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

您仍然可以像平常一样配置NPM Webpack。（注意我使用webpack.config.js来执行所有常规webpack配置。）

有点难以理解的概念是你正在运行2个站点。一个（通常是端口5000）服务于CSHTML，另一个（默认为8080在nuget webpack中）提供角度2捆绑的javascript。

对于Chrome中的调试，请使用源中的webpack://树来设置断点并逐步执行代码。正如@Kyle Trauberman所说，请务必启用sourcemap。

如何使用webpack在Asp.net MVC中运行Angular 2？

2 个答案: