Angular 10 Example SEO

An Angular starter kit featuring Angular 10.1.1, Angular CLI 10.1.1

it's part of a repo series designed to create a Progressive Web App with Angular

• Step 1 : Example Starter

• Step 2 : Example Routing

• Step 3 : Example Lazy-loading

• Step 4 : Example Bootstrap

• Step 5 : Example Modules

• Step 6 : Example Server Side Rendering

• Step 7 : Example HTTP Client

• Step 8 : Example Transfer State

• Step 9 : Example PWA

• Step 10 : Example SEO

• Step 11 : Angular 10 Application

Web Application Live Demo

Quick start

# clone the repo
git clone https://github.com/ganatan/angular-example-seo.git

# change directory
cd angular-example-seo

# install the repo with npm
npm install

# start the server
npm start

in your browser go to http://localhost:4200

Prerequisites

What do you need to run this app:

• Angular version 10.1.1
• Angular CLI version 10.1.1
• Jquery version 3.5.1
• Bootstrap version 4.5.1
• Fontawesome version 5.14.0

Getting Started

Installation

• npm install (installing dependencies)
• npm outdated (verifying dependencies)

Developpement

• npm run start
• in your browser http://localhost:4200

Use Chrome version 85 min !!!!

Tests

• npm run lint
• npm run test
• npm run e2e

Chrome Installation on Linux

sudo sh -c 'echo "deb [arch=amd64] https://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list'

wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -

sudo apt-get update

sudo apt-get install google-chrome-stable --yes

Compilation

• npm run build ( without SSR)
• npm run build:ssr ( with SSR)

Production

• npm run serve:ssr
• in your browser http://localhost:4000

Prototype Bootstrap 4

• change directory cd ui
• launch html pages in your browser

Prototype Bootstrap 5.0.0-alpha1

• change directory cd ui-v5
• launch html pages in your browser

Author

• Updated : 15/09/2020
• Author : danny

Documentation

English Tutorials

• Installation - https://www.ganatan.com/tutorials/search-engine-optimization-with-angular
• Tutorials Step-by-Step - https://www.ganatan.com/tutorials/en

Tutoriels en français

• Installation - https://www.ganatan.com/tutorials/search-engine-optimization-avec-angular
• Tutoriels Etape par étape - https://www.ganatan.com/tutorials