HTML 5 routing with Angular Cli on Ng server

If you are using Html 5 routing with old browsers (IE 11), probably you need special server side configuration (I am using this on IIS), . This article shows how to setup developer server routing in Angular Cli.

Using Angular Proxy to Backend

The Angular4 Cli is running on webpack dev server. Anyway Angular Cli natively supports only Proxy to backend configuration. It allows to setup which url pattern is being redirected internally by webserver. The configuration also allows to (redirect for example to localhost) and rewrite according to regex rules (provided by http=proxy=middleware module. The ng server needs configuration file, for example proxy.config.json and start ng serve with special parameter –proxy-config  to load configuration file.

The proxy.config.json file can look like this:

{
  "/": {
    "pathRewrite": {"^/(.+)": "/"},
    "target": "http://localhost:4200",
    "secure": false,
    "logLevel": "debug"
   }
}

The first line (with “/”) is asking to redirect all requests according to configuration in block.

The pathRewrite is doing to actual work. It changes url, which starts with / followed by some characters. The even better version could exclude strings with . (dot) like icon.gif from redirection, but this works well. Whatever is in form of slash and characters will be send to root “/” on server.

The target is the remote server, where your request is being proxied. It turns out this is required option. The original intent is to allow resending for example /api to another server. For our use we can use same server which ng server is hosting. In this case localhost.

To start ng server, with the config file use following argument:

ng serve --host localhost --proxy-config proxy.config.json --env dev --open

Common issues

If proxy doesnt work, verbose dev logging can be used to show redirections. Also, at the start lf ng serve, you should see two lines like:
[HPM] Proxy created: / -> http://localhost
[HPM] Proxy rewrite rule created: "^/(.+)" ~> "/"

Hopefully it helps.

Logging to a file with .NET Core

In the .net Core 1.0 the simple logging to a file is not included by default. I wanted to use the default logger infrastructure and also add support for TextWriterTraceListener. This article is showing how to do this.

Configuration in appsettings.json

The standard appsettings.json configuration file has Logging section, even with LogLevel subsection and looks like this:

"Logging": {
   "IncludeScopes": false,
   "LogLevel": {
   "Default": "Warning"
  }
 }
Let's reuse what we have and provide Log location here:
"LogFile": ".\\logs\\log.txt",

in the Application folder would need to be created logs folder. If you use IIS hosting with, you would need to add permissions to this folder for dynamic pool identity user.

The main configuration

In the Configure method, which is in Startup.cs, add these lines:

 

The AddTextWriter is adding TextWriter output to logger factory configuration – from the Configuration (appsettings.json). Then, we are creating concrete logger for this one class and log Info level message.

The AddTextWriter uses same Extensions based configuration style, so I have created ILoggerFactoryExtensions class to host them. Here is the whole class:

 

The AddTraceSource is reading from Configuration file, and tries to find full path to produced file – based on value in appsettings.json. Then creates new “old” TextWriterTraceListener, which passes as loggerFactory as new TraceSource

The loggerFactory’s AddTraceSource is only available if you add Nuget package “Microsoft.Extensions.Logging.TraceSource”.

The .net core LogLevel, used as level for TraceSource can have a bit different values, then SourceLevels enum, so I have simple conversion there.

The actual use is already shown in Configure method above. Once configured, its using standard .net core LoggerFactory, which can be injected in required methods.