How to create an admin page using Lazy-loading in Angular

 The term “lazy-loading” is majorly being used by .Net backend developer when referring to entity creation using Entity framework. The concept of lazy-loading can be simplified to load an object on demand. geeksforgeeks.com defined Lazy loading (also called on-demand loading) as an optimization technique for the online content, be it a website or a web app.

Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user. The opposite of lazy-loading is eager-loading: Eager-loading is just a simple term of loading all web content at once. For best practice and performance, lazy-loading technique is the best approach.

Most of the web applications require admin section which always follow the same UI design. The key layout structure of the admin section (or panel) is Header, Sidebar, and body-layer.

In this publication, I will show you how to build an admin application using lazy-loading technique in Angular(Angular 8).

Full-Layout Representation

Let’s get Started:

let’s create a new angular project using command line interface (CLI).

ng new AdminProject

From my previous publication, I showed how to add bootstrap to an angular application, you can quickly revisit it here. Bootstrap is being added to this project.

Let’s create Admin Layout Module using CLI

ng generate module AdminLayout --routing=true

ng generate component Admin-layout/AdminLayout --flat=true

(shortcut to generate g, module m and component c )

Let’s create Login Module using CLI

ng generate module login --routing=true

ng generate component login/login --flat=true

How to lazy load module

Let’s start with how lazy load work in Angular 4 to Angular 7. We usually define lazy loaded routes as a relative path to some module in the local application. This syntax is a bit complicated referencing the path because there is no warning or error notification. Angular Team changed the way lazy-loading technique works in Angular 8.

Lazy-Loading in Angular 7 below

In Angular 8, the loadChildren property uses ES6 shortcut function declaration with import statement to reference the path, then reference the module itself.

Lazy-Loading in Angular 8

If you have built an application in angular 7 below and you want to update the project to angular 8, check this out https://update.angular.io

The admin Section

The layout of the admin section contains the header component, the sidebar component and admin-layout component, admin-layout.html has header, sidebar selector and the router-outlet. Sample code

<app-header> </app-header>

<app-sidebar> </app-sidebar>

<router-outlet> </router-outlet>

Admin page Representation

The NgModule: RouterModule.forChild is being used here. We are routing to the child modules of the AppModule. You can learn more on forRoot and forChild on https://angular.io/api/router/RouterModule

Admin Layout routing

Overview of the structure of the folder:

Folder Structure

The final routing module is here… The UserRoutingModule is the child of admin-layout-routing module.

User Routing

You can download the code below :

sensationalkunlex/LazyLoadingInAngular

Contribute to sensationalkunlex/LazyLoadingInAngular development by creating an account on GitHub.

github.com

Conclusion: In this article, I have shown you how to create an admin page using Lazy-loading in Angular 8. I will continue in the next article by adding AuthGuard to the project. kindly click on the clap button. If you have any question contact me sensationalkunlex@gmail.com or sensationalkunlex@live.com

How to Create Loading Indicator/Spinner in Ionic 6

 This tutorial describes how to easily integrate a loading controller in the Ionic Angular app to display the loading spinner. We will show you how to customize the default style of ionic spinners and loaders.

On top of that, we will use the ion-loading property for evoking loaders in ionic.

The ion-loading manifests an overlay on the device screen and the loader or spinner positioned at the center of the app layout. It shows some activity is occurring and abstain the user from interacting with the application.

The loading indicator can be revoked, and the user can continue interaction with the app. Notwithstanding, you can disable the backdrop through showBackdrop: false properties.

Also, we will share How to integrate different types of spinners in ionic using the various loading/spinner types such as bubbles, circles, circular, crescent, dots, lines and lines-small.

Ionic 6 Angular Loading/Spinner Example

• Step 1: Install Ionic Project
• Step 3: Add Loading Controller in Ionic Page
• Step 4: Add Basic Loading Spinner
• Step 5: Revoke or Dismiss Ionic Loader
• Step 6: Hide and Show Loader
• Step 7: Add Custom Styling in Loading Indicator
• Step 8: Ionic Spinner Types
• Step 9: Run Ionic App

Install Ionic Project

In the first step, we will be setting up the Ionic development environment, so begin with the following command to install Ionic CLI:

npm install -g @ionic/cli

Bash

Execute command to create a new Ionic Angular application:

ionic start ionic-loader-demo blank --type=angular

Bash

Head over to application’s root:

cd ionic-loader-demo

Bash

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Add Loading Controller in Ionic Page

To create a loader spinner in the ionic page, we first need to import the LoadingController and add it into the constructor.

Update code in home.page.ts file:

import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})

export class HomePage implements OnInit {

  constructor(
    public loadingCtrl: LoadingController
  ) { }

  ngOnInit() {
  }

}

TypeScript

Add Basic Loading Spinner

In the previous step, we comprehended how to add LoadingController in page, now we have proper access to loading ui various methods and properties. So, ideally we may now create or add a basic loading indicator in ionic.

Update home.page.ts file:

import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})

export class HomePage implements OnInit {

  constructor(
    public loadingCtrl: LoadingController
  ) { }

  ngOnInit() { }

  basicLoader() {
      this.loadingCtrl.create({
          message: 'Please wait...',
          duration: 3000,
          translucent: true
      }).then((res) => {
          res.present();
      });
  }

}

TypeScript

The create() method returns the then object, within then we can call the present() method to display simple Loader, also Loader contains a spinner with a custom message, you may pass a text or string with a message property.

Revoke or Dismiss Ionic Loader

Now, we will understand how to dismiss or revoke the loader, although we add duration in the previous example, and it will close the loader within the defined duration. But there is another way to dismiss the ionic loader.

We can define and call the dismiss() method, and it will close the loading indicator after invoking.

closeLoader() {
    this.loadingCtrl.dismiss().then((res) => {
        console.log('Loader hidden', res);
    }).catch((error) => {
        console.log(error);
    });
}

TypeScript

Hide and Show Loader

The following example shows how to display a loading indicator for a specific duration and hide automatically using the onDidDismiss() method.

import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})

export class HomePage implements OnInit {

  constructor(
    public loadingCtrl: LoadingController
  ) { }

  ngOnInit() { }

  autoHideShow() {
    this.loadingCtrl.create({
      message: 'Dismiss after 3 seconds',
      duration: 3000
    }).then((res) => {
      res.present();
      res.onDidDismiss().then((res) => {
        console.log('Loader closed', res);
      });
    });
  } 

}

TypeScript

Add Custom Styling in Loading Indicator

The cssClass property is useful in adding the custom class in the ionic loader, after which you can change the color of the spinner.

  loaderCustomClass() {
      this.loadingCtrl.create({
          message: 'Please wait...',
          cssClass:'ion-loading-class'
      }).then((res) => {
          res.present();
      });
  }

TypeScript

You need to add the CSS class and styling code in global.scss file:

.ion-loading-class {
    --background:#f408e8;
    --spinner-color:#ffffff;
}

Sass (Scss)

Ionic Spinner Types

We can easily change the spinner’s name and display different loading indicators; here are the spinner types that you can implement using the ionic controller.

"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" 

Bash

  bubbleIndicator() {
      this.loadingCtrl.create({
          spinner: 'bubbles',
          backdropDismiss: true,
          message: 'Click backdrop to dismiss ...',
      }).then((res) => {
          res.present();
      });
  }

TypeScript

Run Ionic App

In the final step, you have to add the platform, create the build and start the app on the device:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android


# iOS
ionic cordova build ios

# Android
ionic cordova build android


# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l




The JSON value could not be converted to System.Nullable

 Microsoft has removed Json.NET dependency from ASP.NET Core 3.0 onwards and using System.Text.Json namespace now for serialization, deserialization and more.

You can still configure your application to use Newtonsoft.Json. For this -

1. Install Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet package

2. In ConfigureServices() add a call to AddNewtonsoftJson()-

   services.AddControllers().AddNewtonsoftJson();

Read more on https://devblogs.microsoft.com/dotnet/try-the-new-system-text-json-apis/

https://learn.microsoft.com/en-us/dotnet/standard/serialization/system-text-json-migrate-from-newtonsoft-how-to

Azure App Service No ‘Access-Control-Allow-Origin’ header is present

Recently I started hosting a WordPress site using the Enfold theme on Azure as an App Service Site. Things were not working exactly as they should, so I opening the Chrome Developer Tools and on the Console tab I could see the error.

… has been blocked by CORS policy No ‘Access-Control-Allow-Origin’ header is present on the requested resource

In my case fonts within the theme were being blocked when I accessed the www version as they were being accessed via the non-www URL.

What is a CORS Policy?

Cross-Origin Resource Sharing (CORS) is a security mechanism intended to ensure resources such as API’s, web fonts and some other items are only accessed from where they are supposed to be. For a detailed explanation take a look at this article https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Solution

Luckily Microsoft now make it fairy easy to specify the CORS origin(s) which are allowed to access your site.

• Open up you App Service site on the Azure admin portal
• On the left select CORS under API

• Either list the specific origins which are allowed to access the App Service site and click Save, i.e.

• Or alternatively if you want to allow access from anywhere you can enter a * and click Save, .i.e

• Give your App Services Site a restart on the Overview page., this is obviously take down your site for a few seconds.

CategoriesAzure, Solutions