我创建了一个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
)
答案 0 :(得分:1)
您需要确保生成.map文件并与js包一起提供。这将告诉调试器(例如chrome)映射回原始源文件。
确保tsconfig.json文件中的"sourceMap"
设置设置为true
。
答案 1 :(得分:1)
将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。