03 - .net core minimal ASP.Net core - Angular 4 ,WebPack 2, JIT and AOT

Hi,

Continuing our project we are going to add the Angular 4 and web pack configuration.

I'm using the example for the angular oficial site https://angular.io/guide/webpack .
If you want know more about webpack have a look in the oficial site https://webpack.js.org/ , basically webpack is a module bundler , webpack generate one unique bundle for your scripts a bundle could include javascript, html, css and etc. In the next part I'm going to do a brief explanation about the files and functions.

Angular 4 JIT (Just in time)

package.json
it has every library required to run the application, using the command npm  install the node pack management will do download for the libraries into your local folder node_modules

src/tsconfig.json
typeScript Configuration

src/polyfills.ts
it says for angular what kind of legacy browser or application will be using, read more in https://angular.io/guide/browser-support

src/vendor.ts
bundle configuration for vendor

webpack.config.js
default file to startup webpack configuration

config/webpack.common.js
webpack common configuration

config/webpack.dev.js
webpack developer or debug configuration

config/webpack.prod.js
webpack production configuration

config/helpers.js
it has file map configuration

Continuing .net project it is require few modification to run the webpack .

We need to add in our aarvanilanAngular4.csproj one new library

<PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="1.1.0" />

and then a new configuration in the startup.cs

	// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
	public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
	{
	app.Use(async (context, next) =>
	{
	await next();
	if ((context.Response.StatusCode != 200 ) && !Path.HasExtension(context.Request.Path.Value))
	{
	context.Request.Path = "/index.html";
	await next();
	}
	});
	//webserver to use index.html, default.html
	app.UseDefaultFiles();
	//webserver to use static files
	app.UseStaticFiles();
	if (env.IsDevelopment())
	{
	app.UseDeveloperExceptionPage();
	//webpack configuration
	app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true });
	}
	}

view raw Startup.cs hosted with ❤ by GitHub

doing this we may could run the project and see hello with webpack

Source code git https://github.com/americoa/DotNetAngular4WebPack2/tree/second-step fell free to share.