9lessons Programming Blog - Tutorials about Angular, ReactJS, PHP, MySQL and Web Development
Showing posts with label angular. Show all posts
Showing posts with label angular. Show all posts
Thursday, October 06, 2022

Angular Removing Unused CSS and Obfuscate JavaScript in Post Build Process

Nowadays most applications are developed based on large CSS libraries like Bootstrap, Tailwind CSS, etc.. and sometimes multiple frameworks. But your application components are not using all of the styles and it adds more weight to the application performance. This post will explain the Angular post-build process to remove unused CSS and hidden JavaScript files that enhance the application security and definitely improve the app loading time and save the overall bandwidth cost.

Angular Removing Unused CSS and Obfuscate JavaScript

Monday, November 15, 2021

Cypress UI Automation End to End Testing

UI automation is the most important part of the CI/CD(continuous integration and continuous delivery) process. Integration testing helps you to avoid manual regression testing and improve the application quality. In this post I will explain how to implement UI automation testing to existing Angular projects using the Cypress tool, this is a great alternative for Protractor. Take a look at the video tutorials for better understanding.

Cypress UI Automation End to End Testing

Saturday, December 19, 2020

Upload Files from Ionic Angular to Firebase Storage.

Nowadays Google Firebase is my most favorite application. This is offering great web solutions like hosting, authentication, storage and database in a simple way. This article explains how to upload images(supports video) into Firebase storage with Ionic and Angular applications. This covers the user authentication part to protect storage uploads and improving default Firebase security rules. Take a look at the quick demo and try to upload under 1 mb JPEG or PNG.

Publish an Ionic Android App to Google Play Store

Wednesday, October 28, 2020

Publish an Ionic Android App to Google Play Store.

Ionic is a great component framework that can build both iOS and Android apps from the same source code using Capacitor. In this video I have explained how to generate a signed Android release APK version using Ionic application and publishing on Google play store. For this process you need a Google play console subscription that costs $25 for life time. Please try to download the 9lessons demo Android app for testing.

Publish an Ionic Android App to Google Play Store

Tuesday, October 13, 2020

Angular Multiple Language Support using Internationalization (i18n)

Modern web and mobile user experiences is a worldwide thing. Localization of your application (supporting multiple languages) will help you to reach worldwide people. Angular is offering Internationalization(i18n) plugins to enrich your application with multiple languages. In this post I will discuss the implementation with lazy loading design pattern with supporting dynamic content. Take a quick look at the live demo and choose the language.

Angular Translate

Wednesday, August 19, 2020

Github Free Angular React Application Hosting

Developing and hosting your own Angular, React applications has never been easier, but now there are many options like Google Firebase, Heroku and etc. Github Pages is offering some great features with free of cost no credit card required and no bandwidth limitations. Just create a public repository and commit all of your product ready files. It has a custom domain support with HTTPs enforcement.

Github Free Website Hosting

Tuesday, May 19, 2020

Create Angular NPM Package and Publish

Are you interested to create and publish NPM packages/libraries to enrich Angular functionality? Take a quick look at this post. You can share solutions with other developers. A simple package can solve many problems and resolve the issue quickly. If you are working with multiple applications? Package approach will help you to solve the components problems easily. In this post I have created the Bootstrap confirm functionality package with control options and published it on NPM repository for global use.

Create Angular NPM Package

Tuesday, March 10, 2020

Event Emitters Component Interactions in Angular Ionic

This article is more about understanding the Event Emitters in Angular and Ionic. Data flow is the most important when you build an application to communicate with components. Event Emitters will help you to even bind using @Input @Output decorators. Here is a simple example to display and update the user profile using Angular Event Emitters. For this demo I choose Ionic framework for better experience. Take a quick look at the live demo.

Event Emitters Component Interactions in Angular Ionic

Friday, November 01, 2019

New Ionic 5 Angular 8 Display, Update and Delete Records with RxJS

This post is about displaying the API records with delete and update actions using new Ionic and Angular reactive programming. This is a continuation of Ionic Angular series and it explains to you how to distribute the data between the components using RxJS method like BehaviorSubject. All of the feed API responses/records storing in a reactive object, This help the application DOM works seamlessly with update and delete operations. Implement this to your side project and enrich your applications.

New Ionic 5 Angular 8 Update and Delete Records with RxJS

Tuesday, September 10, 2019

Ionic 5 and Angular 8: Restful API User Authentication Login and Signup using Guard and Resolver

This is a continuation of my previous article creating an Ionic Angular project with welcome and tabs home page. Today’s post explains how to implement login authentication system for your Ionic Angular application with guards and resolvers. It will show you how to log in with a user and store the user data and protect the routes, so it deals with token-based authentication. Every user details will be stored in an external database and a PHP based API is used in the backend for handling this authentication.

Ionic 5 and Angular 8:Create a Welcome Page with Login and Logout.

Tuesday, August 27, 2019

Mock REST Backend Server for Angular and React Applications.

As I promised to continue the Angular/Ionic project series, as a developer perspective mock server is the most important to progress the development. We should not depend on the production or development API for front-end development. This post is about creating a simple Node Express server with mock JSON object files. You can import the project to any of the front-end applications like Angular, React, Ionic and VueJS projects.

Mock REST Backend Server for Angular and React Applications.

Sunday, August 18, 2019

Ionic 5 and Angular 8: Create a Welcome Page with Tabs Home Pages.

I received lots of tutorial requests from my readers in that most of them asked me, how to use Ionic 5 to create a welcome page with login and signup pages. Ionic updated there code base with latest Angular 8 features. Now we can implement the routes and guards pretty easy way. Ionic is recommending to use Capacitor to generate iOS and Android. This post will explain to you how to design an Ionic project structure with social project related pages like messages, feed, notifications, etc. Finally converting this web Ionic project to iOS and Android applications.

Ionic 5 and Angular 8:Create a Welcome Page with Login and Logout.

Monday, July 01, 2019

Angular 8 Multi Tenants Architecture

Multi-tenants is an architecture concept that can handle multiple projects in a single project container. If you look at popular sites like Nike.com or Mi.com, you will find out the project redirection based on the continent or country region. This post more about understanding the Angular 8 project package configuration, using this how are we leveraging the project for multi-tenant architecture.

Angular Multi Tenant Project

Thursday, June 06, 2019

Angular 8 Lazy Load Routing.

Angular announced a new version 8.0 and its improved few methods and the compiler to reduce the bundle size 40% less. Now time to update my previous article Angular Routing with Lazy loading Design Pattern. This post is about how to upgrade your Angular 7 application with Angular 8 configurations and changing the lazy load routing with Angular 8 loadChilder promise method. Take a look the setup video to understand more.

Angular 8 Lazy Load Routing.

Thursday, May 02, 2019

Angular Routing with Lazy Loading Design Pattern

Lazy loading is a design pattern to implement large scale Angular projects. Using this system design we can load the components based on the application need. This way we can increase the application performance. This article is a continues of Angular routing project, please follow the previous parts for better understanding. This will explain how to covert default component-based structure to Angular lazy loading pattern.

Angular Routing with Lazy Loading Design Pattern

Monday, April 08, 2019

Angular Continuous Deployment to Firebase Hosting using CircleCI

Are you working with front-end applications like Angular, React, Vue etc. Doing the production deployment is the most boring part. Because we need to do many manual steps to perform like npm install, ng test, build etc. This post will explain to how to automate all of these steps with CircleCI pipeline. Just push you changes to GitHub repository, and CircleCi take care everything.

Angular Continuous Deployment to Firebase Hosting using CircleCI

Monday, March 04, 2019

Angular Dynamic Routes for User Profiles

Are you working with social applications and user profiles? This post is about implementing dynamic routes for Angular application with basic route validations. This article is a part of Angular routing series for better understanding, please check my previous articles. Here you find importing the dynamic route value and validating with a regular expression for protecting the application routes.

Angular Dynamic Routes for user profiles

Sunday, October 14, 2018

Ionic Electron Desktop App

Ionic has an excellent Angular framework for creating mobile applications for iOS and Android. Ionic team is planning to launch an update with Angular 6.0 version, right now Ionic 4.0 is in beta development. This post is about using ElectronJS for JavaScript based applications, using this you can convert an application into a Desktop application for MacOS, Windows and Linux. Take a look at this article and follow the steps to generate a desktop application for Ionic.

Angular  Route Guards with Child Components

Sunday, September 23, 2018

Angular Route Guards with Child Components

This is a continuation of my previous article Angular Lazy Load Routing using Route Guards. We covered the part to create different routes with menu design and generating child components. This post is about connecting the child routes with actual Angular authenticated guards and understanding the router linking with preventing route access. Take a quick look at the video for more information, hopefully I will continue this series go forward.

Angular  Route Guards with Child Components

Sunday, September 16, 2018

Angular Routing using Route Guards

Angular command line comes with excellent features which are helpful for generating new components, guards and services etc. I personally like the route guards, the way handling user authentication system. Let’s take a look the post that how to implement Angular lazy loading routing using route guards authentication to protect the application URLs. I am planning to split this article into multiple parts to explain it to better way.

Angular Lazy Load Routing with Route Guards Structure

mailxengine Youtueb channel
Make in India
X