ANGULAR LAZY LOADING WITH WEBPACK 2-1

ANGULAR  AOT production build

The webpack.prod.js file requires that the chunkFilename property is set in the output, so that webpack chunks the lazy load modules.

• output: {
• path: ‘./wwwroot/’,
• filename: ‘dist/[name].[hash].bundle.js’,
• chunkFilename: ‘dist/[id].[hash].chunk.js’,
• publicPath: ‘/’
• },

The angular-router-loader is added to the loaders. The genDir folder defined here must match the definition in tsconfig-aot.json.

• module: {
• rules: [
• {
• test: /\.ts$/,
• loaders: [
• ‘awesome-typescript-loader’,
• ‘angular-router-loader?aot=true&genDir=aot/’
• ]
• },

JIT development build

The webpack.dev.js file requires that the chunkFilename property is set in the output, so that webpack chunks the lazy load modules.

• output: {
• path: ‘./wwwroot/’,
• filename: ‘dist/[name].bundle.js’,
• chunkFilename: ‘dist/[id].chunk.js’,
• publicPath: ‘/’
• },

The angular-router-loader is added to the loaders.

• module: {
• rules: [
• {
• test: /\.ts$/,
• loaders: [
• ‘awesome-typescript-loader’,
• ‘angular-router-loader’,
• ‘angular2-template-loader’,
• ‘source-map-loader’,
• ‘tslint-loader’
• ]
• },

ANGULAR LAZY LOADING WITH WEBPACK 2

First create an Angular module

In this example, the about module will be lazy loaded when the user clicks on the about tab. The about.module.ts is the entry point for this feature. The module has its own component and routing.
The app will now be setup to lazy load the AboutModule.

• import { NgModule } from ‘@angular/core’;
• import { CommonModule } from ‘@angular/common’;
• import { AboutRoutes } from ‘./about.routes’;
• import { AboutComponent } from ‘./components/about.component’;
• @NgModule({
• imports: [
• CommonModule,
• AboutRoutes
• ],
• declarations: [
• AboutComponent
• ],
• })

export class AboutModule { }
To add lazy loading to the app, the angular-router-loader npm package needs to be added to the packages.json npm file in the devDependencies.

• “devDependencies”: {
• “@types/node”: “7.0.0”,
• “angular2-template-loader”: “^0.6.0”,
• “angular-router-loader”: “^0.5.0”,

Configure the Angular 2 routing

The lazy loading routing can be added to the app.routes.ts file. The loadChildren defines the module and the class name of the module which can be lazy loaded. It is also possible to pre-load lazy load modules if required.

• import { Routes, RouterModule } from ‘@angular/router’;
• export const routes: Routes = [
• { path: ”, redirectTo: ‘home’, pathMatch: ‘full’ },
• {
• path: ‘about’, loadChildren: ‘./about/about.module#AboutModule’,
• }
• ];

export const AppRoutes = RouterModule.forRoot(routes);
Update the tsconfig-aot.json and tsconfig.json files

Now the tsconfig.json for development JIT builds and the tsconfig-aot.json for AOT production builds need to be configured to load the AboutModule module.

AOT production build

The files property contains all the module entry points as well as the app entry file. The angularCompilerOptions property defines the folder where the AOT will be built into. This must match the configuration in the Webpack production config file.

• {
• “compilerOptions”: {
• “target”: “es5”,
• “module”: “es2015”,
• “moduleResolution”: “node”,
• “sourceMap”: false,
• “emitDecoratorMetadata”: true,
• “experimentalDecorators”: true,
• “removeComments”: true,
• “noImplicitAny”: true,
• “suppressImplicitAnyIndexErrors”: true,
• “skipLibCheck”: true,
• “lib”: [
• “es2015”,
• “dom”
• ]
• },
• “files”: [
• “angularApp/app/app.module.ts”,
• “angularApp/app/about/about.module.ts”,
• “angularApp/main-aot.ts”
• ],
• “angularCompilerOptions”: {
• “genDir”: “aot”,
• “skipMetadataEmit”: true
• },
• “compileOnSave”: false,
• “buildOnSave”: false
• }

ANTI-FORGERY VALIDATION WITH ASP.NET CORE MVC

Cross Site Request Forgery

XSRF is an attack where a hacker makes malicious requests to a web app, when the user of the website is already authenticated. This can happen when a website uses cookies to persist the token of an trusted website, user. A pure SPA should not use cookies to as it is hard to protect against this. With a server side rendered application, like ASP.NET Core MVC, anti-forgery cookies can be used to protect against this, which makes it safer, when using cookies.

• public void ConfigureServices(IServiceCollection services)
• {
• …
• services.AddAntiforgery(options => options.HeaderName = “X-XSRF-TOKEN”);
• services.AddMvc();
• }

The XSRF-TOKEN cookie is added to the response of the HTTP request. The cookie is a secure cookie so this is only sent with HTTPS and not HTTP. All HTTP (Not HTTPS) requests will fail and return a 400 response. The cookie is created and added each time a new server url is called, but not for an API call.

• app.Use(async (context, next) =>
• {
• string path = context.Request.Path.Value;
• if (path != null && !path.ToLower().Contains(“/api”))
• {
• // XSRF-TOKEN used by angular in the $http if provided
• var tokens = antiforgery.GetAndStoreTokens(context);
• context.Response.Cookies.Append(“XSRF-TOKEN”,
• tokens.RequestToken, new CookieOptions {
• HttpOnly = false,
• Secure = true
• }
• );
• }
• …
• await next();
• });

The API uses the ValidateAntiForgeryToken attribute to check if the request contains the correct value for the XSRF-TOKEN cookie. If this is incorrect, or not sent, the request is rejected with a 400 response. The attribute is required when data is changed. HTTP GET requests should not require this attribute.

• [HttpPut]
• [ValidateAntiForgeryToken]
• [Route(“{id:int}”)]
• public IActionResult Update(int id, [FromBody]Thing thing)
• {
• …
• return Ok(updatedThing);
• }

You can check the cookies in the chrome browser.

.NET CORE LOGGING TO MYSQL USING NLOG

Set up the MySQL database

MySQL Workbench can be used to add the schema ‘nlog’ which will be used for logging to the MySQL database. The user ‘damienbod’ is also required, which must match the defined user in the connection string. If you configure the MySQL database differently, then you need to change the connection string in the nlog.config file.

You also need to create a log table. The following script can be used. If you decide to use NLog.Web in a ASP.NET Core application and add some extra properties, fields to the logs, then this script needs to be extended and also the database target in the nlog.config.

• CREATE TABLE `log` (
• `Id` int(10) unsigned NOT NULL AUTO_INCREMENT,
• `Application` varchar(50) DEFAULT NULL,
• `Logged` datetime DEFAULT NULL,
• `Level` varchar(50) DEFAULT NULL,
• `Message` varchar(512) DEFAULT NULL,
• `Logger` varchar(250) DEFAULT NULL,
• `Callsite` varchar(512) DEFAULT NULL,
• `Exception` varchar(512) DEFAULT NULL,
• PRIMARY KEY (`Id`)
• ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

The MySql.Data pre release NuGet package can be used to log to MySQL. Add this to your project.