/images/BNG-Headshot-Black-Edited.png

Brendan Sluke

Angular - Import Static Json File

This tutorial will show you how to setup your Angular application to allow direct imports of static files, such as JSON, into your Angular components and services. The following is the common error that this tutorial will help you resolve: Cannot find module '../static/examplefile.json'. Consider using '--resolveJsonModule' to import module with '.json' extension. Navigate to the ‘tsconfig.json’ file in the root of your Angular app Your tsconfig.json should look something like this:

Cloudflare - Redirect WWW to Non WWW (Naked Domain)

This tutorial will show you how to redirect all of your WWW domain traffic to your non-WWW (naked) domain using a Cloudflare Page Rule. Example: https://www.example.com 301 redirect –> https://example.com Navigate to the Rules Tab in Cloudflare Once you’ve navigate to the Rules Tab, click Create Page Rule. Set the URL Match Value to your WWW Domain For www.example.com we would set the URL Match value to https://www.

Host a Cloudflare Worker at a Specific Url Path or Subdirectory

Hosting a Cloudflare Worker at a specific Subdirectory or URL path is pretty straight forward and it will only take a few minutes to setup. In this tutorial I will create a Cloudflare Worker that returns a simple ‘Hello World’ response that will be available at https://www.brendansluke.com/helloworld Create a Cloudflare Worker If you haven’t already created the Cloudflare Worker that you want to host at a specific URL path. Go ahead and create the Cloudflare Worker via the Cloudflare Dashboard by navigating to the ‘Workers’ section and clicking the ‘Create a Worker’ button.

How to Run an Angular Production Build Locally

So you are trying to debug the production build of your Angular app, you’ve run ng build --prod and you have your production files in your /dist folder but you can’t quite seem to run the files locally. Unfortunately there is no way to run ng serve --prod and serve the production build of your app locally. Here to save the day, the npm package: http-server. http-server is a simple, zero-configuration command-line http server.

Angular Material Error List

It’s easy to run into some common errors when you first implement a new Angular Material Design component into your Angular application. This post is an aggregation of common errors for each Angular Material Design component. Autocomplete (MatAutocomplete) A common error when first using the AutoComplete component is this: 'mat-autocomplete' is not a known element: The solution for this error is to add the MatAutocompleteModule to the app.module.ts file in the root of your Angular project.

Solution: Cloudflare DNS Subdomain Issue - DNS_PROBE_FINISHED_NXDOMAIN

Quick Solution Check to make sure that you have added A records for your subdomain in the DNS management section for your site on Cloudflare. Backstory After adding my site to Cloudflare and updating my Domain Registrar’s name servers to point to Cloudflare’s name servers, I was having issues navigating to my subdomains such as www.brendansluke.com and blog.brendansluke.com. I was met with this error in Google Chrome: