DEV Community: Muhammad Awais

Identifying Spam Emails through ML Classification with AWS ☁️

Muhammad Awais — Sat, 05 Apr 2025 12:52:11 +0000

This setup allows you to build, train, deploy, and serve the spam classifier entirely on AWS in a scalable and cost-effective way. You can achieve this spam classification task using AWS services in a fully serverless and scalable manner. You can build and deploy a spam classifier using AWS services. We'll break it down into clear sections, covering data storage, pre-processing, model training, deployment, and inference.

We will classify emails as Spam or Ham using AWS services. The process involves:

Uploading Data to Amazon S3 (Storage)
Pre-processing and Feature Engineering (AWS Lambda or SageMaker Processing)
Training the Naive Bayes Model (Amazon SageMaker)
Deploying the Model for Real-time Inference (SageMaker Endpoint or AWS Lambda)
Creating an API for Predictions (API Gateway + Lambda)
Logging and Monitoring (CloudWatch)

If you’re serious about building intelligent, real-world apps, don’t miss “AI-Powered App Development: Leveraging Angular, Python, and Google AI” by Muhammad Awais, Sonu Kapoor, and Lars Gyrup Brink Nielsen — rated ⭐⭐⭐⭐⭐!
This hands-on guide takes you through building smart, AI-driven applications using Angular, Python, Google Gemini AI, and even AWS Bedrock. It’s packed with practical solutions, real-world examples, and the latest in AI integration. Whether you’re a frontend developer or backend engineer, this book is your roadmap to creating next-gen web apps with real-time AI capabilities.

👉 Available now — start building smarter, today!

1. Upload Dataset to Amazon S3

AWS S3 will be used to store the dataset (spam_ham_dataset.csv) and trained model files.

Create an S3 Bucket

Go to the AWS S3 console.
Click Create Bucket: Set a unique bucket name (e.g., spam-classifier-bucket).
Enable Public Access Block (for security).
Click Create Bucket.

Upload Dataset

Inside your bucket, click Upload.
Select the spam_ham_dataset.csv file.
Click Upload.

2. Pre-process Data using AWS Lambda

We’ll use AWS Lambda to pre-process the text data.

Create a Lambda Function

Go to AWS Lambda Console: Click Create Function.
Select Author from Scratch.
Enter Function Name (e.g., SpamPreprocessing).
Choose Python 3.9 as the runtime.
Click Create Function.

Add Permissions for S3

Click on the role name to open its details of a Lambda Function: Configuration Tab.
In the Permissions tab, you will see the policies attached to the role.
Click on Add permissions and then Create inline policy. To attach the specified permission to an AWS Lambda function, you need to modify the IAM role associated with the Lambda function. The IAM role defines what permissions the Lambda function has.

Under Configuration: Permissions, attach the policy:

{
 "Version": "2012-10-17",
 "Statement": [
  {
   "Sid": "Statement1",
   "Effect": "Allow",
            "Action": ["s3:GetObject", "s3:PutObject"],
            "Resource": "arn:aws:s3:::spam-classifier-bucket/*"
  }
 ]
}

Review the permissions, specify details, and tags. and hit Create Policy.

By following these steps, you have attached the necessary S3 permissions to your Lambda function, allowing it to perform s3:GetObject and s3:PutObject actions on the specified S3 bucket.

3. Upload NLTK (Natural Language Toolkit) Dependencies

Since NLTK requires extra libraries, create a Lambda Layer:

Install dependencies locally in your machine:

mkdir python
pip install nltk scikit-learn pandas joblib -t python/
zip -r layer.zip python

Go to AWS Lambda > Layers > Create Layer.
Upload layer.zip
Select Available 2 Python Layers (AWSLambdaPowertoolsPythonV3-python39-x86_64 and AWSSDKPandas-Python39)
Attach the layers to your Lambda function.

If your .zip file exceeds the size limit and you encounter an error during upload, you can resolve this by first uploading the .zip file to an AWS S3 bucket.

Once the file is successfully uploaded to S3, navigate to the AWS Lambda console and select the zip file in AWS Lambda Upload From Option.

4. Write Pre-processing Code

This script is designed to preprocess text data for a spam classification task using AWS Lambda and S3. It downloads a dataset from an S3 bucket, preprocesses the text by removing non-alphabetic characters, converting to lowercase, tokenizing, removing stopwords, and lemmatizing. The processed data is then saved back to S3. The script utilizes the NLTK library for text processing and Boto3 for interacting with AWS S3. The pre-processing steps are encapsulated in a lambda_handler function, making it suitable for deployment as an AWS Lambda function.

import boto3
import pandas as pd
import re

# S3 setup
s3 = boto3.client('s3')
bucket_name = "spam-classifier-bucket"
dataset_key = "spam_ham_dataset.csv"
processed_key = "processed_data.csv"

# Define stopwords manually (common words in English)
STOP_WORDS = {
    "i", "me", "my", "myself", "we", "our", "ours", "ourselves", "you", "your", "yours",
    "yourself", "yourselves", "he", "him", "his", "himself", "she", "her", "hers",
    "herself", "it", "its", "itself", "they", "them", "their", "theirs", "themselves",
    "what", "which", "who", "whom", "this", "that", "these", "those", "am", "is", "are",
    "was", "were", "be", "been", "being", "have", "has", "had", "having", "do", "does",
    "did", "doing", "a", "an", "the", "and", "but", "if", "or", "because", "as", "until",
    "while", "of", "at", "by", "for", "with", "about", "against", "between", "into",
    "through", "during", "before", "after", "above", "below", "to", "from", "up", "down",
    "in", "out", "on", "off", "over", "under", "again", "further", "then", "once", "here",
    "there", "when", "where", "why", "how", "all", "any", "both", "each", "few", "more",
    "most", "other", "some", "such", "no", "nor", "not", "only", "own", "same", "so",
    "than", "too", "very", "s", "t", "can", "will", "just", "don", "should", "now"
}

# Simple Lemmatization (Removing 'ing', 'ed', 's' endings)
def simple_lemmatize(word):
    if word.endswith("ing"):
        return word[:-3]  # running -> run
    elif word.endswith("ed"):
        return word[:-2]  # played -> play
    elif word.endswith("s") and len(word) > 1:
        return word[:-1]  # cars -> car
    return word

# Text preprocessing function
def preprocess_text(text):
    text = re.sub(r'[^a-zA-Z\s]', ' ', text)  # Remove non-alphabetic characters
    words = text.lower().split()  # Tokenize by splitting on spaces
    filtered_words = [simple_lemmatize(word) for word in words if word not in STOP_WORDS]
    return ' '.join(filtered_words)

def lambda_handler(event, context):
    # Load dataset from S3
    obj = s3.get_object(Bucket=bucket_name, Key=dataset_key)
    data = pd.read_csv(obj['Body'], encoding='latin-1')

    # Rename columns
    data = data.rename(columns={"v1": "label", "v2": "text"})
    data['label'] = data['label'].map({'ham': 0, 'spam': 1})

    # Apply text preprocessing
    data['cleaned_text'] = data['text'].apply(preprocess_text)

    # Convert processed data to CSV format
    processed_csv = data.to_csv(index=False)

    # Upload back to S3
    s3.put_object(Bucket=bucket_name, Key=processed_key, Body=processed_csv)

    return {"statusCode": 200, "body": "Data Preprocessing Completed"}

To increase the timeout for your AWS Lambda function to 30 seconds, follow these steps to ensure that it runs smoothly without timing out. First, navigate to the AWS Lambda Console and locate the function you want to modify. Once selected, go to the “Configuration” tab and then click on “General configuration”.

Deploy and Test the Lambda function.

To train a Naive Bayes Classifier using Amazon SageMaker, start by navigating to the AWS Management Console and opening Amazon SageMaker. First, create a Unified SageMaker Studio Domain if you haven’t already. Then, go to “Notebook Instances” in the left panel and click on “Create Notebook Instance.” Provide a unique name for your instance, choose an instance type (e.g., ml.t2.medium for basic workloads), and create or select an IAM role with the necessary S3 access permissions. Configure additional settings like storage and security as needed, then click “Create Notebook Instance.” Once the notebook instance is available, open JupyterLab and install any required dependencies. You can then load your dataset, preprocess the data, and train a Naive Bayes Classifier using scikit-learn or another machine learning library. Finally, evaluate the model and deploy it using Amazon SageMaker’s built-in deployment services.

To open Amazon SageMaker Studio, simply navigate to the provided SageMaker Studio URL in your browser. It will seamlessly redirect you to the AWS Sign-In page, where you need to log in using your AWS account credentials. Once authenticated, the SageMaker Studio environment will open, giving you access to a fully managed integrated development environment (IDE) for machine learning. From there, you can start creating notebooks, training models, and deploying AI solutions effortlessly.

Domain management in Amazon SageMaker refers to the process of setting up and controlling access to SageMaker Studio environments. It allows administrators to configure user permissions, manage resources, and customize settings for machine learning workflows. Through SageMaker domain management, users can create, update, and monitor studio domains, ensuring seamless collaboration and efficient ML development within an organization.

In Amazon SageMaker Unified Studio, a project profile acts as a template for creating projects within your SageMaker environment. It includes a set of blueprints, which are predefined settings used to set up projects. The project profile determines whether a blueprint is automatically applied when a project is created or if users can enable it later when needed.

After successfully creating a new SageMaker Studio domain under Domain Management in Amazon SageMaker Unified Studio, along with a project profile added from the root IAM AWS account, the next step is to create a new project.

The project creation failed in the Amazon SageMaker Domain section because the necessary permissions for accessing tooling in blueprints are not available when using the IAM root AWS account. SageMaker relies on blueprints to configure projects, and these require specific IAM permissions, which are not granted to the root account by default.

To enable project creation in Amazon SageMaker, you need to grant permissions for tooling in the Blueprints tab within the SageMaker Domain. This issue occurs when the required IAM permissions are not assigned, preventing access to blueprints. To resolve this, navigate to the SageMaker Domain Management section in the AWS Console, select the Blueprints tab, and modify the permissions.

Your project My_Project_m83fdstv is currently being created along with its associated resources in Amazon SageMaker. This process involves setting up the necessary infrastructure, including compute instances, storage, and permissions, based on the selected blueprint and configurations. Once completed, you’ll be able to start using your project for model training, deployment, and data analysis within SageMaker Unified Studio. You can monitor the progress in the Projects section of the SageMaker console.

“Notebook instances” are a legacy feature. You might consider creating a SageMaker domain and using JupyterLab or Code Editor instances instead.

Additionally, my current quota is set to 0, so i’ll need to request an increase. New accounts typically have lower quotas than the default limits.

5. Train the Model using SageMaker

We’ll use Amazon SageMaker to train a Naive Bayes Classifier.

Create a SageMaker Notebook

Go to Amazon SageMaker → Notebook Instances.
Click Create Notebook Instance.
Choose ml.t2.medium.
In IAM Role, select Create new role and allow S3 access.

Install Dependencies
In the Jupyter Notebook, install required libraries:

!pip install pandas scikit-learn joblib

Train and Save the Model
Let’s train the model using AWS SageMaker — load your dataset, preprocess the data, and train a Naive Bayes Classifier using scikit-learn or another machine learning library.

import boto3
import joblib
import pandas as pd
from sklearn.feature_extraction.text import TfidfVectorizer
from sklearn.model_selection import train_test_split
from sklearn.naive_bayes import MultinomialNB
from sklearn.metrics import accuracy_score

# Load preprocessed data from S3
s3 = boto3.client('s3')
bucket_name = "spam-classifier-bucket"
processed_key = "processed_data.csv"

obj = s3.get_object(Bucket=bucket_name, Key=processed_key)
data = pd.read_csv(obj['Body'])

# Feature extraction
vectorizer = TfidfVectorizer(max_features=3000)
X = vectorizer.fit_transform(data['cleaned_text']).toarray()
y = data['label']

# Train/Test split
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)

# Train model
model = MultinomialNB()
model.fit(X_train, y_train)

# Evaluate
y_pred = model.predict(X_test)
print(f"Accuracy: {accuracy_score(y_test, y_pred)}")

# Save model and vectorizer
joblib.dump(model, "spam_classifier.pkl")
joblib.dump(vectorizer, "tfidf_vectorizer.pkl")

# Upload to S3
s3.upload_file("spam_classifier.pkl", bucket_name, "models/spam_classifier.pkl")
s3.upload_file("tfidf_vectorizer.pkl", bucket_name, "models/tfidf_vectorizer.pkl")

6. Deploy Model using AWS Lambda

Finally, evaluate the model and deploy it using Amazon Lambda built-in deployment services.

Create a new Lambda function (SpamPrediction).
Add the S3 permissions.
Use this Inference Code:

import boto3
import joblib
import json
import re
from nltk.tokenize import word_tokenize
from nltk.corpus import stopwords

s3 = boto3.client('s3')
bucket_name = "spam-classifier-bucket"

def load_model():
    obj = s3.get_object(Bucket=bucket_name, Key="models/spam_classifier.pkl")
    return joblib.load(obj['Body'])

def load_vectorizer():
    obj = s3.get_object(Bucket=bucket_name, Key="models/tfidf_vectorizer.pkl")
    return joblib.load(obj['Body'])

model = load_model()
vectorizer = load_vectorizer()

def preprocess_text(text):
    text = re.sub(r'[^a-zA-Z]', ' ', text)
    tokens = word_tokenize(text.lower())
    return ' '.join(tokens)

def lambda_handler(event, context):
    text = json.loads(event['body'])['text']
    processed_text = preprocess_text(text)
    vectorized_text = vectorizer.transform([processed_text])
    prediction = model.predict(vectorized_text)
    return {"statusCode": 200, "body": json.dumps({"prediction": "Spam" if prediction[0] == 1 else "Ham"})}

7. Expose API using API Gateway (Detailed Guide)

Now that we have our AWS Lambda function (SpamPrediction) ready for making predictions, we need to expose it as an API so that users can send text messages and get a Spam/Ham classification. We’ll use AWS API Gateway to create a REST API that integrates with our Lambda function.

7.1: Open the API Gateway Console

Sign in to your AWS Console.
Search for API Gateway in the AWS services search bar.
Click on API Gateway to open the service.
Under Create API, select REST API (private or public API access).
Click Build.

7.2: Create a New API

Choose the Protocol → Select REST API.
Under Create new API, select New API.
Enter the following details:
API Name → SpamClassifierAPI
Description → API for Spam/Ham Classification
Endpoint Type → Regional (for public access).
Click Create API.

7.3: Create a New Resource

A Resource is like an endpoint (/classify) that we’ll use for making requests.

Under your API (SpamClassifierAPI), go to the Resources section.
Click Create Resource.
Enter:
Resource Name: classify
Resource Path: /classify (this will be part of the API URL).
Check Enable API Gateway CORS (important for cross-domain requests).
Click Create Resource.

7.4: Create a New Method (POST)

We need to allow users to send text for classification. We’ll use POST because it allows users to send data in the request body.

Click on the newly created /classify resource.
Click Create Method.
From the dropdown, select POST.
Click on the checkmark (✔) to confirm.
Under Integration Type, select Lambda Function.
Check Use Lambda Proxy Integration.
Enter the Lambda function name → SpamPrediction (the function we created earlier).
Click Save.
When prompted, click OK to allow API Gateway to invoke your Lambda function.

7.5: Enable CORS (Cross-Origin Resource Sharing)

CORS is required if you want to call this API from a web frontend.

Select the /classify resource.
Click Actions → Enable CORS.
Select:
Access-Control-Allow-Origin → * (Allows all origins)
Access-Control-Allow-Methods → POST, OPTIONS
Click Enable CORS and Replace Existing CORS Headers.

7.6: Deploy the API

Before we can use the API, we need to deploy it.

Click Actions → Deploy API.
Under Deployment Stage, click New Stage.
Enter:
Stage Name: prod
Stage Description: Production version
Click Deploy.

7.7: Get the API Endpoint

Once deployed, you’ll get an Invoke URL. This is the public URL for your API.

In the API Gateway console, go to Stages → prod.
Copy the Invoke URL (e.g., https://sample-aws-email-classify.execute-api.us-east-1.amazonaws.com/prod).
Your API endpoint is:

https://sample-aws-email-classify.execute-api.us-east-1.amazonaws.com/prod/classify

7.8: Test the API with Postman or cURL

Using Postman

Open Postman.
Select POST method.
Enter the API URL:

https://sample-aws-email-classify.execute-api.us-east-1.amazonaws.com/prod/classify

// BODY Payload (JSON)
{
  "text": "Congratulations! You have won a free lottery ticket. Claim now!"
}

You should receive a response like:

  "prediction": "Spam"
}

Using cURL (Command Line)
Run this command in Terminal or Command Prompt:

url -X POST "https://sample-aws-email-classify.execute-api.us-east-1.amazonaws.com/prod/classify" \
     -H "Content-Type: application/json" \
     -d '{"text": "Hello, how are you?"}'

{
  "prediction": "Ham"
}

Building Ai Agents using Amazon Bedrock Agents

Muhammad Awais — Mon, 03 Mar 2025 17:07:47 +0000

Amazon Bedrock is a powerful service that allows developers to build, deploy, and manage AI agents with ease. These agents can be designed to perform a variety of tasks, from natural language processing to integrating with external APIs for real-time data retrieval. In this article, we will build an AI agent capable of performing real-time tasks, such as retrieving the current time in UTC format and calculating the sum of two numbers dynamically (Simulate the Agentic Behaviour to understand AWS Bedrock Action groups).

What is an AI Agent?

An AI agent is a system that perceives its environment, processes information, and takes actions to achieve specific goals. It operates autonomously or semi-autonomously, making decisions based on predefined rules, learned behaviours, or real-time data.

Examples of AI Agents

*Chatbots *(e.g., ChatGPT, Google Gemini) — Understand and respond to user queries.
Autonomous Vehicles (e.g., Tesla Autopilot) — Perceive surroundings and navigate.
Trading Bots — Analyze market trends and execute trades.
AI Assistants (e.g., Alexa, Siri) — Perform tasks based on voice commands.
AI-powered Recommendation Systems — Suggest products, movies, or content based on user behaviour.

Before we begin, ensure you have the following:

AWS Account: You need an active AWS account to access Amazon Bedrock.
IAM Permissions: Ensure your IAM user has the necessary permissions to create and manage Bedrock agents.
Basic Knowledge of APIs: Familiarity with REST APIs and how they work will be helpful.
AWS CLI (Optional): While we will focus on the AWS Management Console, having the AWS CLI installed can be beneficial for advanced configurations.

Accessing Amazon Bedrock in the AWS Console

Log in to the AWS Management Console: Navigate to AWS Console and log in with your credentials.
Navigate to Amazon Bedrock:
In the AWS Management Console, use the search bar at the top and type “Amazon Bedrock”.
Click on the “Amazon Bedrock” service to open the Bedrock dashboard.

Creating a New Agent in Amazon Bedrock

1. Open the Agents Section:

In the Amazon Bedrock dashboard, locate the “Agents” section in the left-hand navigation pane.
Click on “Agents” to open the agents management page.

2. Testing Claude Ai Model (Foundational Model — AWS Bedrock)

AI models are trained on static datasets and do not have live internet access to fetch or learn new information in real time. Their knowledge is limited to what they were trained on, and they require fine-tuning or external APIs to access real-time data or creating an Ai Agent to achieve this real-time task.

3. Create a New Agent:

Click the “Create agent” button to start the process of creating a new AI agent.

You will be prompted to provide a name for your agent. Enter a descriptive name, such as “demo-agent”.
Optionally, you can add a description to provide more context about the agent’s purpose.

4. Configure the Agent:

After creation of Agent, Assign a predefined IAM role to your AWS Bedrock Agent for secure access, or create a new role with the necessary permissions.

Execution Role: The default selected option, “Create and use a new service role” will automatically generate a new role for the AWS Bedrock agent, granting the necessary execution permissions and policies — eliminating the need for manual setup.

Base Model Selection: Select a base model from AWS Bedrock’s foundation models, such as Anthropic Claude, Amazon Titan, Meta Llama, or Stability AI, based on your specific use case.
Instruction for Agent: Provide clear and structured instructions to ensure your AWS Bedrock Agent operates efficiently, including task definitions, context, and expected output formats. Optimize its performance by specifying guidelines for accuracy, error handling, and response quality, enabling the agent to function like a pro with minimal manual intervention.

Select “Save and Exit” to store the AWS Bedrock Agent’s basic configurations. This action will automatically generate the necessary IAM roles and policies, ensuring the agent has the required permissions to access AWS Bedrock services seamlessly.

Select “Edit in Agent Builder” to review and enhance your AWS Bedrock Agent by configuring additional settings such as Lambda functions, Action Groups, Action Group Invocation, and Action Group Functions. This allows you to fine-tune the agent’s capabilities and ensure seamless execution of tasks.

Action Groups: Allow your agent to execute specific tasks by integrating with external AWS services or APIs. These groups define what actions the agent can take.

Adding Action Group: Allow your agent to execute specific tasks by integrating with external AWS services or APIs. These groups define what actions the agent can take.

Action Group Invocation: You can create a Lambda function for an AWS Bedrock Action Group to seamlessly invoke custom actions with just a few easy clicks. This enables your Bedrock Agent to execute tailored workflows, integrate with external services, and enhance automation without complex configurations. ❤️

Action group function 1: To enable time capability in real-time, you need to create an AWS Lambda Function for “get_time” Action Group to be invoked by this demo-agent against an incoming request using Lambda function trigger.

Action group function 2: Adding a capability to add two numbers, you need to create a Action Group Function to be invoked by a demo-agent against a user incoming request. Let’s create an Action Group Function so that it will automatically generate an AWS Lambda Function for “add_two_numbers” Action Group. (However. Normal Model can perform this maths operation, but this is only for clarifying how agentic Ai works behind the scenes bu creating action groups)

Action group function 2 (Parameters): To enable the “add_two_numbers” action, the agent needs two numeric parameters. Let’s configure the parameters so that this function can get the required parameters from user request coming to this demo-agent.

Once done, Wait for a while so that demo-agent can configure the basic things and create Step Code Generation for Lambda, IAM Roles, Permissions and necessary policies for AWS Bedrock Agent to work efficiently …

After Creation, We can view our all-in-one created Lambda with action groups we defined above with parameter and invocation mechanism.

To enhance your auto-created AWS Lambda function for the “get_time” Action Group and ensure it returns the current time in UTC format.

def get_time():
  return datetime.datetime.utcnow().strftime("%H:%M:%S")

To enhance your auto-created AWS Lambda function and enable it to return the sum of two numbers, update the function as follows:

def add_two_numbers(number_1, number_2):
  return number_1 + number_2

Prepare: After deploying your AWS Bedrock Agent, the preparation phase ensures the agent is ready for testing and validation. This step involves initializing resources, verifying configurations, and checking connectivity with integrated services like Lambda functions, Action Groups, and IAM policies. Conduct test runs to confirm the agent processes requests accurately and performs as expected before full deployment. 🚀

Awesome! 🚀 Your AWS Bedrock Agent is now successfully returning the current UTC time and computing the sum of two numbers via the incoming request to demo-agent

Show Trace: After deploying your AWS Bedrock Agent, the trace feature helps in debugging and validating its execution flow. It enables you to monitor the agent’s responses, track invoked actions (like fetching time or summing numbers), and inspect logs for any errors or unexpected behaviour.
Use this step to ensure the agent is correctly handling requests, invoking Lambda functions, and returning accurate results.

Show Trace: Let’s analyze how our AWS Bedrock Agent processes inputs and makes decisions. This step involves tracking the agent’s execution flow, including:

Input Analysis: How the agent interprets user queries (e.g., detecting whether the request is for time or sum calculation).
Decision Making: How it determines the appropriate Action Group and selects the correct Lambda function.
Function Invocation: Monitoring how the agent interacts with AWS Lambda to retrieve results.
Response Generation: Ensuring the agent structures responses correctly and returns accurate data.

Migrating my newly built Portfolio to Angular 19 🎉

Muhammad Awais — Sun, 09 Feb 2025 19:49:05 +0000

Ensuring your Angular application stays up-to-date provides access to the latest features, improved performance, essential security patches, and bug fixes. Below is a detailed write-up I maintained while upgrading my in-progress portfolio site, originally built with Angular 18.2, to Angular 19. Angular 19 introduces several exciting advancements, such as Standalone Components by Default, Incremental Hydration, TypeScript 5.6 Support, Signal-Based Input/Output, Material Theming Updates, and more. This guide reflects my experience and insights during the upgrade process.

1. Angular Update Guide

By following this guide, you can effortlessly upgrade your Angular application to v19.0 and leverage its latest advancements.

Update guide • Angular

The web development framework for building modern apps.

angular.dev

Update Angular Core and CLI

Open your terminal and navigate to your Angular project’s root directory.
Run the following command to update Angular Core and CLI to v19.0:

ng update @angular/core@19 @angular/cli@19

This command will update your project dependencies and apply necessary migrations.

Handle Standalone Components, Directives, and Pipes

Angular v19.0 makes components, directives, and pipes standalone by default.

@Component({
  selector: 'app-example',
  standalone: false, // Remove this line
  template: `...`
})
export class ExampleComponent {}

If you have declarations that are still part of an NgModule, you need to explicitly set standalone: false in their decorators.

@Component({
  selector: 'app-example',
  standalone: false, // Add this line
  template: `...`
})
export class ExampleComponent {}

The Angular CLI will automatically update your code to reflect this change during the migration.

Replace BrowserModule.withServerTransition()

If your application uses BrowserModule.withServerTransition(), replace it with the APP_ID token injection.

// Before
import { BrowserModule } from '@angular/platform-browser';
BrowserModule.withServerTransition({ appId: 'your-app-id' });

// After
import { APP_ID } from '@angular/core';
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: APP_ID, useValue: 'your-app-id' },
    provideClientHydration(),
    ...
  ]
};

Upgrade TypeScript

Angular v19.0 requires TypeScript 5.5 or later.
Update your TypeScript version by running:

npm install typescript@5.5 --save-dev

Ensure your tsconfig.json file is compatible with the new TypeScript version.

Migrate Router Error Handling

Replace Router.errorHandler with withNavigationErrorHandler (for provideRouter) or errorHandler (for RouterModule.forRoot).

// Before
import { Router } from '@angular/router';
constructor(private router: Router) {
  this.router.errorHandler = (error) => {
    console.error('Navigation error:', error);
  };
}

// After (using provideRouter)
import { provideRouter, withNavigationErrorHandler } from '@angular/router';
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withNavigationErrorHandler((error) => {
      console.error('Navigation error:', error);
    }))
  ]
});

// After (using RouterModule.forRoot)
import { RouterModule } from '@angular/router';
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      errorHandler: (error) => {
        console.error('Navigation error:', error);
      }
    })
  ]
})
export class AppModule {}

Migration to signal inputs

This step explains how to migrate from the traditional @Input decorator to the new signal based input() function introduced in Angular v19.0.

ng generate @angular/core:signal-input-migration

Before Migration

Here’s the original code using @Input:

import { Component, Input } from '@angular/core';

@Component({
  template: `Recipe: {{ recipe?? '' }}`
})
export class MyComponent {
  @Input() recipe: string | undefined = undefined;
  ...
}

After Migration

Here’s the updated code using the input() function:

import { Component, input } from '@angular/core';

@Component({
  template: `Name: {{ name() ?? '' }}`
})
export class MyComponent {
  readonly name = input<string>();
  ...
}

Sass Deprecation Warnings — Angular v.19

If you’re upgrading one of your Angular applications to the Angular v19 release candidate using the CLI command, you might see a large number of deprecation warnings from the Sass compiler during the build or serve process.

The output from the compiler could resemble something like this:

To fix this, add the following configuration to your angular.json file (or project.json if you're working within an Nx monorepo):

"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "sass": {
          "silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
        }
      }
    }
  }
}

This update should effectively remove all the newly added deprecation warnings.

🚨‘imports’ is only valid on a component that is standalone.

The error message indicates that the imports property is being used in a component that is not marked as standalone. In Angular v19, standalone flag is removed by default every component is standalone, and error seems like import: []array is only valid for components that have the standalone: true flag enabled, but this isn’t the case!

Here’s how you can resolve the issue:

Reinstall and Refresh the Angular Language Service extension in VSCode.

Update Third-Party Dependencies

Some third-party packages may not yet be compatible with Angular 19. To check for outdated dependencies in your project, run the following command:

npm outdated

Make sure to test your application thoroughly after updating packages to ensure compatibility with Angular 19. If any issues arise, consider checking the package’s documentation or GitHub repository for updates or workarounds.

Clean up unused imports

As of Angular 19, the framework now detects and reports when a component’s imports array includes symbols that are not used in its template. This helps keep your code clean and efficient.

ng generate @angular/core:cleanup-unused-imports

Github PR for v.19 Migration

Migrate/v19 #4

muhammadawaisshaikh posted on Feb 09, 2025

Migration to v.19 done: (@angular/core@19, @angular/cli@19)
Signal Input Migration: @angular/core:signal-input-migration
Sass Deprecation Warnings - fixed
Remove unused imports: (@angular/core:cleanup-unused-imports)

View on GitHub

Conclusion

Upgrading to Angular 19 unlocks significant benefits, including enhanced performance, improved server-side rendering (SSR) hydration, and support for TypeScript 5.6. By following this step-by-step guide, you can ensure a seamless migration while taking full advantage of the latest features and optimizations. 🚀

Angular Version 19: New Features and Updates

Muhammad Awais — Wed, 20 Nov 2024 14:00:06 +0000

Angular Version 19 marks a significant milestone in web development, offering groundbreaking features to elevate developer experience, optimize performance, and boost productivity. Building on its legacy of robustness and scalability, Angular continues to empower millions of developers worldwide, from startups to enterprises. This release introduces innovations like standalone components, fine-grained reactivity with signals, enhanced server-side rendering inspired by Google Search, and collaborations with ecosystem partners like Firebase and Netlify. Dive into this article for an in-depth exploration of Angular 19’s transformative updates and its promising roadmap for the future.

Empowering Developers Worldwide

Angular continues to serve millions of developers globally, from startups to scalable enterprises. Its reliability and performance have made it a backbone for mission-critical products at Google, such as Gemini and Google Cloud. This release builds on Angular’s commitment to enabling developers to create transformative web applications.

Angular Version 19 Highlights

1. Standalone Components by Default:

All components, directives, and pipes are now standalone by default, eliminating the need to manually specify "standalone: true".

The ng update command will automatically refactor existing code, ensuring seamless compatibility.

2. Signals:

Signal-based APIs like Input, Model, Output, and signal-based queries are now stable.

New Experimental APIs:

linkedSignal: Combines a computed expression with mutable state. when linked computed expression changes, it returns to the computed signal.

Resource API: Simplifies handling asynchronous values in Angular’s signal graph.

3. Automatic Refactoring Tools:

Tool like signal-input-migration — convert inputs using decorator Api to the new signal based input

signal-queries-migration help migrate existing code of queries like ViewChild and ContentChild to use signals.

Refactoring options are integrated into the Angular Language Service for fine-grained updates.

Angular Material Updates

1. Simplified Theming:

New mat.theme API reduces complexity in creating custom themes with application-wide CSS variables.
New mat.theme override mixins enable both global and per-component customizations.
A theme color schematic helps generate custom palettes.

2. Component Enhancements:

2D Drag-and-Drop: Items can now be moved horizontally and vertically.

Time Picker: A long-requested component is now available.

3. Documentation Improvements:

A new tab for each component in the Material docs guides users on style overrides.
A beginner-friendly theming guide ensures an easier onboarding process. These updates are a testament to Angular’s commitment to delivering a modern and efficient development experience. Be sure to check out the Angular blog and Angular Material documentation for more details.

Key Highlights of Angular Version 19

1. Standalone Components, Directives, and Pipes

Since Angular 14, the framework has been evolving with features like standalone components, directives, and pipes. These enhancements simplify application authoring, reducing boilerplate and increasing ease of use. In Angular Version 19, below command takes an essential role in enhancing the migration process by updating Standalone Components, Directives, and Pipes with the latest standalone capabilities without writing and updating code.

$ ng update

2. Fine-Grained Reactivity with Signals

Angular continues its transition to fine-grained reactivity through signals, which provide:

Enhanced performance by optimizing data flow.
Simplified debugging.
The ability to make Zone.js optional. The Angular team is also collaborating with other framework authors to potentially introduce signals as a native feature in JavaScript, reflecting its transformative potential.

3. Improved Server-Side Rendering (SSR)

Angular Version 19 brings advancements to server-side rendering (SSR), inspired by lessons learned from Google Search:

Event Replay: This feature, proven to handle billions of events in Google Search, enhances the SSR experience in Angular. Enhanced performance for rendering and rehydration, ensuring faster initial loads and smoother user interactions with Incremental Hydration.

These updates are designed to meet modern web application demands while maintaining high scalability and reliability.

4. Collaboration Across Ecosystems

Collaboration has been a key theme in Angular’s evolution. The team has partnered with:

Firebase: For seamless integration with backend services.
Netlify and Vite: To enhance deployment and build experiences.
Puppeteer and Playwright: For robust end-to-end testing solutions. This ecosystem-driven approach ensures developers have access to powerful tools that make web app development joyful and efficient.

5. Enhanced Developer Experience

Version 19 focuses heavily on making Angular more developer-friendly. By introducing features that streamline workflows and improving debugging and testing capabilities, the framework continues to empower developers to build with confidence.

Conclusion

Angular Version 19 is a testament to the framework’s dedication to continuous improvement. With updates that prioritize performance, developer experience, and collaboration, this release ensures that Angular remains a top choice for building scalable and robust web applications. Whether you’re a seasoned Angular developer or new to the framework, Version 19 is packed with features that will make your development journey smoother and more enjoyable.

As we embrace this new chapter in Angular’s evolution, we can look forward to an exciting roadmap ahead. Happy coding with Angular Version 19!

Auxiliary Routes in Angular

Muhammad Awais — Sun, 10 Nov 2024 09:33:18 +0000

In this article, we’ll explore how auxiliary routes work, how to define and set up named router outlets, and the best practices for implementing them in Angular applications.

What are Auxiliary Routes?

Auxiliary routes, also known as secondary routes, allow you to add multiple independent routes to your Angular application, enhancing your app’s navigation and interaction capabilities. Unlike primary routes, which determine the main content of the page, auxiliary routes work as secondary content that can appear alongside the primary content without disrupting the user’s main view. They are typically used for components like sidebars, modals, or any additional section of the interface.

Each component in Angular can have one primary route and any number of auxiliary outlets, which must have unique names within the component.

Setting Up Auxiliary Routes

To define an auxiliary route, you’ll need to create a named router outlet in the template where you want the content for the auxiliary route to render. By setting up multiple outlets in this way, you can manage different parts of the UI independently.

Here’s a step-by-step guide on setting up auxiliary routes in Angular.

Step 1: Define the Named Router Outlet

To use an auxiliary route, start by adding a named outlet in your template where you want the secondary route content to display. For example:

<div>
    <router-outlet name="pages"></router-outlet>
</div>

<!-- Primary router-outlet for main content -->
<router-outlet></router-outlet>

Here, is a named outlet where the auxiliary route content will render. It can display separate route content independently of the main router outlet, , which is typically used for primary navigation.

Step 2: Configure Auxiliary Routes in the Router

After setting up the named outlet in the template, define your auxiliary route in the router configuration. Angular uses the outlet property in the route definition to specify which outlet the route should render in.

Here’s an example:

const routes = [
    {
        path: '',
        loadComponent: () =>
            import('./pages/homepage/homepage.component').then(c => c.HomepageComponent)
    },
    {
        path: 'experience',
        loadComponent: () =>
            import('./pages/experience/experience.component').then(c => c.ExperienceComponent),
        outlet: 'pages'  // Specify the named outlet for this route
    }
];

In this example:

The primary route (empty path) loads HomepageComponent.
The experience path is an auxiliary route that loads ExperienceComponent into the pages outlet.

Step 3: Navigating to Auxiliary Routes

To navigate to an auxiliary route, use Angular’s RouterLink directive with a specific syntax. Auxiliary routes require a segmented URL structure, which specifies both the primary and auxiliary paths.

For example:

<a [routerLink]="[{ outlets: { primary: '', pages: 'experience' } }]">Experience</a>

onNavigate(link: string) {
   this.router.navigate([{ outlets: { primary: '', pages: 'experience' } }]);
}

Here, primary corresponds to the main content path (in this case, an empty path for the homepage), and pages: 'experience' sets the auxiliary route for the named outlet pages.

Step 4: Accessing Auxiliary Routes Programmatically

You can also navigate to auxiliary routes programmatically using Angular’s Router service. To set an auxiliary route, specify both the primary and secondary route paths in an object passed to the navigate method.

This code navigates to the homepage in the primary outlet and opens the ExperienceComponent in the pages auxiliary outlet.

Common Use Cases

Sidebars: Use an auxiliary route to toggle a sidebar with links or settings without disrupting the primary content.
Modals and Dialogs: Auxiliary routes make it easy to open and close modals, allowing users to view details or edit information in a dialog.
Chat or Notifications Panels: Displaying live chats, notifications, or real-time feeds independently of the main content.

Detailed Talk Video:

Conclusion

Auxiliary routes in Angular offer a flexible way to manage multiple sections of an application independently. By defining named router outlets and configuring routes with the outlet property, you can create a seamless and modular user experience. Auxiliary routes are especially beneficial for applications with complex UI structures, as they allow parts of the interface to operate independently. With this setup, you can provide users with a more engaging and responsive experience.

Experiment with auxiliary routes in your Angular projects to see how they can transform your app’s navigation and interactivity, and tailor the UX to fit your specific requirements.

Streamlining API Calls in Angular v18 with TanStack Angular Query

Muhammad Awais — Sun, 10 Nov 2024 09:27:07 +0000

This article provides guidance on using the stable @tanstack/query-angular package in Angular v18 projects for efficient API calling 🚀

Managing API interactions in Angular projects often involves repetitive logic, leading to code duplication, increased maintenance burden, and potential state management complexities. While @tanstack/angular-query-experimentaloffers a robust solution, it's important to note that this package is still under experimental development. Instead, for Angular v17 projects specifically, consider utilizing the stable @tanstack/angular-query-experimental package.

Key Benefits of TanStack Angular Query:

Declarative Approach: Define query functions that encapsulate API requests and associated data processing, promoting clean and readable code.

Automatic Caching and Refetching: Leverage built-in caching strategies like “stale-while-revalidate” to optimize performance and reduce unnecessary server calls. Implement data refetching based on your needs (e.g., data staleness or window refocus) for enhanced data consistency.

Reactive Data Handling: Access and manage data using observables and signals, enabling reactive updates in UI components without manual lifecycle hooks or complex state management patterns.

Modular Design: Organize API logic into reusable query entities, promoting code organization and maintainability.

Dedicated Devtools: Gain insights into query execution, cache state, and refetching patterns through the TanStack Query Devtools, facilitating debugging and optimization.

Installation:

Install the necessary packages using npm or yarn:

npm install @tanstack/query-angular-experimental @tanstack/angular-query-devtools-experimental

Step by Step Implementation:

While @tanstack/angular-query-experimental is available for Angular v17, it's currently under experimental development and not recommended for production use. For stable and reliable API call management in Angular v17 projects, consider using the stable @tanstack/query-angular package.

Here's a step-by-step implementation guide:

1. Add Providers in app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { QueryClient, provideAngularQuery } from '@tanstack/angular-query-experimental';

const queryClient = new QueryClient();

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAngularQuery(queryClient)
  ]
};

Importing provideHttpClient, QueryClient, provideAngularQuery.
Defining and exporting the app configuration object by providing routing, HTTP, and Angular Query functionality through dependency injection.

2. Define a Typescript based Type for API response:

Types are used in TypeScript to specify the structure and type of data, aiding in code organization and error prevention. Within your Angular application, this type likely serves as a blueprint for structuring data retrieved from an API or other data source.

export type Response = {
  name: string
  description: string
  subscribers_count: number
  stargazers_count: number
  forks_count: number
}

3. Define a Service repos.service.ts to consume API call:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Response } from '../../types/responce.type';

@Injectable({
  providedIn: 'root'
})
export class ReposService {

  endpoint: string = 'https://api.github.com';

  constructor(
    private http: HttpClient
  ) { }

  getRepos() {
    return this.http.get<Response>(`${this.endpoint}/repos/tanstack/query`);
  }
}

The service is responsible for making HTTP requests to the GitHub API to fetch repository data. It uses the HttpClient to make the requests and expects the response data to conform to the structure defined in the Response type.

4. Initiate Angular Query in the Component github-repo-list.component.ts:

Component uses Angular Query to manage data fetching and caching. It injects the ReposService to make API calls. It defines a query with the unique key 'repoData' to fetch repository data using the queryFn.

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
import { lastValueFrom } from 'rxjs';
import { ReposService } from '../services/repos/repos.service';

@Component({
  selector: 'app-github-repo-list',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [AngularQueryDevtools],
  templateUrl: './github-repo-list.component.html',
  styleUrl: './github-repo-list.component.scss'
})
export class GithubRepoListComponent{

  reposService = inject(ReposService);

  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      lastValueFrom(
        this.reposService.getRepos()
      ),
  }))
}

5. Let’s render the data in component UI github-repo-list.component.html:

@if (query.isPending()) {
    Loading...
}

@if (query.error()) {
    An error has occurred: {{ query.error()?.message }}
}

@if (query.data(); as data) {
    <h1>Name: {{ data.name }}</h1>
    <p>Description: {{ data.description }}</p>
    <strong>👀 {{ data.subscribers_count }}</strong>
    <strong>✨ {{ data.stargazers_count }}</strong>
    <strong>🍴 {{ data.forks_count }}</strong>
}

<angular-query-devtools initialIsOpen />

This template conditionally renders different content based on the query’s state: loading, error, or success.
It effectively handles different scenarios, providing appropriate feedback to the user.
It incorporates Angular Query devtools for debugging and inspection.

Working Demo:

Checkout complete source code at Github. Thanks 😊

Streamlining API Calls in Angular v18 with TanStack Angular Query

Muhammad Awais — Wed, 23 Oct 2024 12:48:14 +0000

This article provides guidance on using the stable @tanstack/query-angular package in Angular v18 projects for efficient API calling 🚀

Key Benefits of TanStack Angular Query:

Declarative Approach: Define query functions that encapsulate API requests and associated data processing, promoting clean and readable code.

Reactive Data Handling: Access and manage data using observables and signals, enabling reactive updates in UI components without manual lifecycle hooks or complex state management patterns.

Modular Design: Organize API logic into reusable query entities, promoting code organization and maintainability.

Dedicated Devtools: Gain insights into query execution, cache state, and refetching patterns through the TanStack Query Devtools, facilitating debugging and optimization.

Installation:

Install the necessary packages using npm or yarn:

npm install @tanstack/query-angular-experimental @tanstack/angular-query-devtools-experimental

Step by Step Implementation:

Here's a step-by-step implementation guide:

1. Add Providers in app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { QueryClient, provideAngularQuery } from '@tanstack/angular-query-experimental';

const queryClient = new QueryClient();

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAngularQuery(queryClient)
  ]
};

Importing provideHttpClient, QueryClient, provideAngularQuery.
Defining and exporting the app configuration object by providing routing, HTTP, and Angular Query functionality through dependency injection.

2. Define a Typescript based Type for API response:

export type Response = {
  name: string
  description: string
  subscribers_count: number
  stargazers_count: number
  forks_count: number
}

3. Define a Service repos.service.ts to consume API call:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Response } from '../../types/responce.type';

@Injectable({
  providedIn: 'root'
})
export class ReposService {

  endpoint: string = 'https://api.github.com';

  constructor(
    private http: HttpClient
  ) { }

  getRepos() {
    return this.http.get<Response>(`${this.endpoint}/repos/tanstack/query`);
  }
}

4. Initiate Angular Query in the Component github-repo-list.component.ts:

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
import { lastValueFrom } from 'rxjs';
import { ReposService } from '../services/repos/repos.service';

@Component({
  selector: 'app-github-repo-list',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [AngularQueryDevtools],
  templateUrl: './github-repo-list.component.html',
  styleUrl: './github-repo-list.component.scss'
})
export class GithubRepoListComponent{

  reposService = inject(ReposService);

  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      lastValueFrom(
        this.reposService.getRepos()
      ),
  }))
}

5. Let’s render the data in component UI github-repo-list.component.html:

@if (query.isPending()) {
    Loading...
}

@if (query.error()) {
    An error has occurred: {{ query.error()?.message }}
}

@if (query.data(); as data) {
    <h1>Name: {{ data.name }}</h1>
    <p>Description: {{ data.description }}</p>
    <strong>👀 {{ data.subscribers_count }}</strong>
    <strong>✨ {{ data.stargazers_count }}</strong>
    <strong>🍴 {{ data.forks_count }}</strong>
}

<angular-query-devtools initialIsOpen />

This template conditionally renders different content based on the query’s state: loading, error, or success.
It effectively handles different scenarios, providing appropriate feedback to the user.
It incorporates Angular Query devtools for debugging and inspection.

Working Demo:

Checkout complete source code at Github. Thanks 😊

Keep Hydrated with Angular Incremental Hydration 💦

Muhammad Awais — Mon, 21 Oct 2024 14:14:50 +0000

By leveraging deferrable views, or defer blocks, developers can control when and how different parts of the application become interactive (hydrated). This approach allows content to be incrementally hydrated based on user actions, visibility, or specific conditions, such as hydrate on, hydrate when, or hydrate never.

In modern web applications, optimizing performance and user experience is essential, especially when dealing with large-scale, dynamic content. Angular introduces incremental hydration as a solution to improve page interactivity and load times. By leveraging deferrable views, or defer blocks, developers can control when and how different parts of the application become interactive (hydrated). This approach allows content to be incrementally hydrated based on user actions, visibility, or specific conditions, such as hydrate on, hydrate when, or hydrate never.

Hydration in Angular:

Hydration is the process of re-establishing a server-side rendered application on the client. It involves tasks such as reusing the DOM elements generated by the server, maintaining the application’s state, transferring data that the server has already retrieved, and other related operations.

If you’ve utilized Angular CLI to activate server-side rendering (SSR), either during the application’s initial setup or later by running ng add @angular/ssr, the code necessary for enabling hydration will already be integrated into your application.

ng add @angular/ssr

this is how your app.config looks like:

import {
  bootstrapApplication,
  provideClientHydration,
} from '@angular/platform-browser';
...
bootstrapApplication(AppComponent, {
  providers: [provideClientHydration()]
});

How to check Hydration is Enabled?

When running an application in development mode, you can verify that hydration is enabled by opening the Developer Tools in your browser and checking the console. There, you should see a message displaying hydration-related statistics, such as the number of components and nodes that have been hydrated. Angular computes these statistics based on all components rendered on the page, including those from third-party libraries.

How to Allow users to interact even before Hydration accomplishes?

When an application is rendered on the server, the produced HTML becomes visible in the browser as soon as it loads. Users might think they can interact with the page right away, but event listeners are not attached until the hydration process is finished. Starting from version 18, you can enable the Event Replay feature, which captures all events that occur before hydration and replays them once hydration is complete. You can activate this feature using the withEventReplay() function. For example:

import {provideClientHydration, withEventReplay} from '@angular/platform-browser';
...
bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

How to Disable Hydration for Specific Components?

Certain components might not function correctly with hydration enabled due to issues like direct DOM manipulation. As a workaround, you can add the ngSkipHydration attribute to a component's tag to bypass the hydration process for that entire component.

<app-example ngSkipHydration />

@Component({
  ...
  host: {ngSkipHydration: 'true'},
})
class UserProjectsComponent {}

Configuration — Incremental Hydration:

Defines a configuration object, appConfig, for an Angular application using incremental hydration. The ApplicationConfig object includes a providers array, which registers services or functionalities available throughout the app.

In this case, the code adds client-side hydration capabilities by using provideClientHydration, along with the withPartialHydration() option. Here's a breakdown:

provideClientHydration(): This function enables client-side hydration in the application. Hydration refers to the process of converting static content (typically generated during server-side rendering) into fully interactive, dynamic content once the client-side JavaScript is loaded.
withPartialHydration(): This option enables partial hydration, allowing specific parts of the application to be hydrated incrementally rather than hydrating the entire page all at once. It optimizes performance by only hydrating necessary portions of the app based on user interaction or predefined conditions.

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(withPartialHydration())
  ]
｝；

Incremental Hydration in Action:

Deferrable views, also known as defer blocks, serve as the foundational unit and boundary for incremental hydration in Angular.

A defer block defines an incremental hydration boundary by applying conditions such as hydrate on, hydrate when, or hydrate never. It supports idle, viewport and interaction.

For example:

<user-detail />

@defer (on immediate; hydrate on interaction) {
  <deferred-user-projects />
  <deferred-user-blogs />
}

Nested Hydration:

When multiple @defer blocks are in a dehydrated state, their conditions are evaluated concurrently. For instance, in the following structure:

@defer (hydrate on hover) {
  @defer (hydrate on timer(15s)) {
    ...
  }
}

The outer block “hydrate on hover” will hydrate if the mouse is hovered over any of the content inside of it. Even if the block is never hovered, the inner block’s “hydrate on timer(15s)” timer will trigger hydration after 15 seconds.

Hydrate with never trigger:

The @defer (hydrate never) trigger in Angular defines a defer block that will never be hydrated, meaning the content inside the block remains static and non-interactive.

@defer (hydrate never) {
  <user-projects />
}

The component will be rendered but will not be hydrated.
It means that even if the application is fully loaded on the client-side, the content inside this defer block will stay static and will not become interactive.

This is useful for scenarios where certain parts of the application do not require interactivity or should remain in a static state to save resources.

Reference:
Angular RFC: https://github.com/angular/angular/discussions/57664
Angular Source PR: https://github.com/angular/angular/pull/58193

Adding GenAI to Angular Application Using AWS Bedrock

Muhammad Awais — Thu, 08 Aug 2024 11:56:27 +0000

Integrating AI into web applications has become increasingly prevalent. AWS Bedrock offers a powerful platform to access and leverage foundation models (FMs) for building generative AI applications. This article will guide you through incorporating AI capabilities into your Angular application using AWS Bedrock.

Prerequisites

Basic understanding of Angular and TypeScript.
AWS account with necessary permissions.
Node.js and npm (or yarn) installed.
An Angular project set up.

Step-by-Step Guide

This article will guide you through incorporating AI capabilities into your Angular application using AWS Bedrock.

1. Setting Up AWS Bedrock

Create an AWS account: If you don’t have one, create an AWS account.
Set up IAM roles: Create IAM roles with necessary permissions to access AWS Bedrock and other required services.
Choose a foundation model: AWS Bedrock offers a variety of foundation models from different providers. Select the model that best suits your application’s requirements.

2. Creating an AWS Lambda Function

Create a new Lambda function: Use the AWS Management Console or the AWS CLI to create a new Lambda function.
Choose Node.js runtime: Select Node.js as the runtime for your function.
Write the Lambda function code: This code will interact with the AWS Bedrock API to send prompts and receive responses.

const AWS = require('aws-sdk');

const bedrockClient = new AWS.Bedrock({ region: 'us-east-1' }); // Replace with your region

exports.handler = async (event) => {
  const prompt = event.prompt;

  const params = {
    modelId: 'YOUR_MODEL_ID', // Replace with your model ID
    inputText: prompt
  };

  try {
    const response = await bedrockClient.generateText(params).promise();
    return response.text;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

Configure the function: Set the appropriate IAM role and environment variables.

3. Creating an Angular Service

Generate a new Angular service: Use the Angular CLI to create a new service to handle interactions with the Lambda function.

ng generate service bedrock

Inject HttpClient: Inject the HttpClient to make HTTP requests to the Lambda function.
Create a method to call the Lambda function: This method will send the prompt to the Lambda function and return the response.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BedrockService {
  constructor(private http: HttpClient) {}

  generateText(prompt: string) {
    return this.http.post<string>('https://your-lambda-function-endpoint', { prompt });
  }
}

4. Integrating AI into Your Angular Component

Import the Bedrock service: Import the Bedrock service into your component.
Create a form or input field: Allow users to input text as a prompt.
Call the Bedrock service: When a user submits the prompt, call the Bedrock service to generate text.
Display the generated text: Display the generated text in your component’s view.

import { Component } from '@angular/core';
import { BedrockService } from './bedrock.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  prompt: string = '';
  generatedText: string = '';

  constructor(private bedrockService: BedrockService) {}

  generate() {
    this.bedrockService.generateText(this.prompt)
      .subscribe(text => {
        this.generatedText = text;
      });
  }
}

Conclusion:

By following these steps, you can successfully integrate AI capabilities into your Angular application using AWS Bedrock. This integration can enhance user experiences, automate tasks, and unlock new possibilities for your application.

Note: Replace placeholders like YOUR_MODEL_ID and https://your-lambda-function-endpoint with actual values.

Muhammad Awais

Muhammad Awais — Sat, 16 Dec 2023 19:26:22 +0000

👋 Hi there! I'm Muhammad Awais, a passionate Principal Software Engineer / Full Stack Software Engineer with 8+ years of experience who finds joy in crafting exceptional web experiences using JavaScript, Typescript, Angular, React, Vue, NodeJS, ROR 🚀. and leading the team of 4+ developers across the globe. My days are filled with lines of code, bringing creativity to life through top-notch technology stack.

🎤 When I'm not immersed in coding, you can often find me on the tech speaking stage, sharing insights and trends in software development. I thrive on inspiring and connecting with fellow developers, fostering a community that shares a love for opensource and innovation.

🌐 With 8+ years of experience in the industry, I've honed my skills in building scalable, efficient and performant softwares and enterprise applications for multiple domains including various domains like Ecommerce, Fintech, Audio Streaming, News Media, Logistics, Automotive, EdTech and others 🚀. From Angular to React and Vue, I'm always eager to explore cutting-edge frameworks and stay ahead of the technology curve.

📈 As an advocate for best practices and accessibility, I believe in creating inclusive digital experiences that leave a lasting impact. I'm also a community representative and contributor of (Google Developers, Angular, JetBrains, AWS, Auth0, Postman, DigitalOcean) 🇵🇰🇺🇸🇿🇦🏴󠁧󠁢󠁥󠁮󠁧󠁿🇬🇧

🌟 Let's connect and collaborate on exciting software projects (frontend + backend) or catch me at the next tech event, sharing my knowledge and passion for all things software and web development. Together, we can shape the future of digital experiences! Feel free to reach out for opportunities or a friendly tech chat. 🤝

Introduction: https://youtu.be/89t-cRNvfMU
Portfolio: https://bit.ly/muhammadawaisshaikh
Resume: https://bit.ly/muhammad-awais-resume

Streamlining State Management with Redux Toolkit

Muhammad Awais — Sat, 16 Dec 2023 09:03:12 +0000

Introduction

In the ever-evolving landscape of frontend development, effective state management is crucial for building robust applications. Handling state without proper tools can lead to complex, error-prone code. Enter Redux Toolkit, a library that simplifies and streamlines state management in Redux applications. In this article, we’ll explore the fundamentals of Redux Toolkit and how it enhances the developer experience.

Section 1: Understanding Redux Toolkit:

Redux Toolkit is a set of utilities and conventions designed to make Redux development more straightforward. At its core, it introduces the concept of “slices,” which are smaller pieces of the Redux store responsible for managing specific parts of the application state. This approach helps organize the codebase and reduces the boilerplate traditionally associated with Redux.

Section 2: Setting Up Redux Toolkit:

Let’s start by installing the necessary packages:

npm install @reduxjs/toolkit react-redux

Now, create a basic Redux slice using the createSlice function:

// slices/messageSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: '',
};

export const messageSlice = createSlice({
  name: 'message',
  initialState,
  reducers: {
    update: (state, action) => {
      state.value = action.payload;
    },
    remove: (state) => {
      state.value = '';
    },
  },
});

// Action creators are generated for each case reducer function
export const { update, remove } = messageSlice.actions;

export default messageSlice.reducer;

Section 3: Creating the Redux Store:

Next, configure the Redux store by combining your slices:

// store/index.js

import { configureStore } from '@reduxjs/toolkit';
import messagerReducer from '../slices/messageSlice';

export const store = configureStore({
  reducer: {
    message: messagerReducer,
  },
});

Section 4: Connecting React with Redux:

To make the Redux store available to your components, use the Provider component from react-redux:

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

import { store } from './store';
import { Provider } from 'react-redux';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>
);

Section 5: Using Redux Toolkit in Components:

Now, let’s build a simple message component using Redux Toolkit:

// Message.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { update, remove } from './slices/messageSlice';

export function Message() {
  const message = useSelector((state) => state.message.value);
  const dispatch = useDispatch();

  const onHandleChange = (e) => {
    let value = e.target.value;
    dispatch(update(e.target.value));
  };

  return (
    <div style={{ marginTop: '30px' }}>
      <h1>Message State</h1>

      <input placeholder="message" onChange={(e) => onHandleChange(e)} />

      <p>{message}</p>
    </div>
  );
}

Section 6: Advantages of Redux Toolkit:

Redux Toolkit offers several advantages, including reduced boilerplate code and an improved developer experience. By embracing Redux Toolkit, developers can focus more on building features and less on managing the intricacies of state.

Section 7: Best Practices and Tips:

As with any tool, there are best practices to consider. Explore structuring your Redux code with Redux Toolkit efficiently and discover tips for optimizing performance and maintaining a clean, scalable codebase.

Conclusion:

In conclusion, Redux Toolkit is a game-changer for state management in Redux applications. Its simplicity and powerful features make it an ideal choice for modern frontend development. By adopting Redux Toolkit, developers can build scalable, maintainable applications with ease.

Additional Resources:

Github: https://github.com/muhammadawaisshaikh/react-redux-toolkit

Working Demo: https://react-3jdguq.stackblitz.io

Check out the official documentation.

Unleashing the Power of Dynamic Postman Collections

Muhammad Awais — Wed, 29 Nov 2023 06:06:08 +0000

🔍 Understanding the Basics:

Postman collections are the backbone of API development, organizing requests and ensuring seamless communication between services. They act as a blueprint for your APIs, simplifying the testing and debugging process.

🔄 The Power of Dynamism:

Imagine a world where your Postman collections adapt to changing environments automatically. Dynamic collections empower you to handle diverse scenarios, making your testing robust and future-proof. No more manual adjustments for each environment change!

🛠️ Steps to Create a Dynamic Postman Collection:

Open Postman and navigate to your collection.
Click on the '... More' option and select 'Edit'.
In the collection editor, navigate to the 'Variables' tab.
Define your variables and use them in your requests.
Set initial values or use scripts to dynamically update values during runtime.

🌐 Real-world Application:

We recently implemented dynamic collections in our project, and the results were game-changing. By adapting to various environments seamlessly, we reduced testing time by 30% and caught bugs earlier in the development cycle. This translates to faster and more reliable software releases.

🚦 Tips and Best Practices:

Regularly update variables to reflect changes in your environments.
Leverage scripts for advanced dynamic behaviours.
Collaborate with your team by sharing dynamic collections via Postman workspaces.

🚀 Ready to revolutionise your API testing?

Creating dynamic Postman collections opens up a world of possibilities. Try it out, and let me know your thoughts! 💬