Porto Angular 22 Template Documentation

1. Install Angular CLI

npm install -g @angular/cli

2. Open the template folder

cd porto-angular-22

3. Install dependencies

npm install

4. Start the development server

npm start

Open http://localhost:4200/ in your browser. The app reloads automatically whenever you change a source file.

Available scripts

porto-angular-22/
├── public/                     favicon
├── scripts/                    build:file post-processing script
├── src/
│   ├── app/
│   │   ├── core/layout/        headers, sidebars, footers, preloader, scroll to top, page banners
│   │   ├── pages/              one folder per route (index ... index15, blog, login, contact ...)
│   │   ├── shared/
│   │   │   ├── components/     homes, abouts, services, works, pricings, teams, blogs, contact-us ...
│   │   │   ├── directives/     scrollspy, counter, skills, input
│   │   │   ├── models/         seo.json, interfaces, footer link data
│   │   │   ├── services/       SeoService, NavlinkService
│   │   │   └── utils/          animated headlines, velocity typings
│   │   ├── app.config.ts       providers (router, HTTP client, hydration)
│   │   ├── app.routes.ts       all routes (lazy loaded)
│   │   └── app.routes.server.ts prerender settings
│   └── assets/
│       ├── css/                third-party CSS (animate.min.css)
│       ├── fonts/  icons/      icon fonts and font files
│       ├── images/             logos, backgrounds, blog, team, work images
│       ├── php/contact.php    contact form mail script
│       └── scss/               theme, components, sections, shared, pages, plugins
├── angular.json
└── package.json

Homepages

The empty path redirects to /index, and unknown paths redirect there too.

To change the default homepage, edit the redirectTo value of the empty path (and of the ** path) in app.routes.ts.

Supportive pages

Edit content from data files

Each section reads its content from a typed data.ts file next to the section components.

Headings and short intro texts that are not in a data file live in the section component template, for example home1.component.html.

Replace images and logo

• Images are in src/assets/images (backgrounds in bg, blog posts in blog, work items in works, testimonials in testi).
• Keep the same file name to replace an image everywhere, or update the path in the matching data file.
• The header uses two logos: logo.png (white, over banners) and logo-blk.png (dark, on a solid header).
• Replace public/favicon.ico with your own icon.

Fonts and icons

Fonts (Roboto, Poppins, Barlow, Open Sans and Roboto Slab) are imported from Google Fonts in src/assets/scss/fonts/_fonts.scss. Change the import there, and the font stacks in _variables.scss. Icon fonts are in src/assets/fonts and src/assets/icons, wired up in icons.scss.

Demo images are for preview purposes only. Replace them with your own before publishing.

Menu items

The menu labels are a plain array in the page component, for example in src/app/pages/index/index.component.ts:

navigations: Array<string> = ['Home', 'About', 'Services', 'Work', 'Pricing', 'Contact'];

Menu items are matched to page sections by position and the active item follows the scroll position (scrollspy). Keep the number and order of labels in line with the sections inside the appScrollspy wrapper of the page template.

Header and menu variations

Switch a page to a different menu style by replacing the header tag in its template and passing the same navigations array. Sticky behavior and the look of each header are controlled by the classes input and the styles in src/assets/scss/shared/_header.scss.

Add, remove or reorder sections

Open the page template, for example src/app/pages/index2/index2.component.html. Each section is a component tag such as <app-service2> or <app-work2>. Delete a tag to remove a section, or move it to reorder. Remember to remove its import from the component's imports array and adjust the navigations labels.

Global variables

Edit src/assets/scss/_variables.scss. The main brand color is $theme-color-1 (#3584A7), and the Bootstrap color map (primary, secondary, success and so on) is built from the variables in the same file.

$theme-color-1: #3584A7;
$warning: #fab758;
$success: #45c4a0;

Per-homepage themes

Each homepage loads one theme file from src/assets/scss/themes through styleUrls in its component, for example theme-1.scss for /index. Theme files set CSS custom properties such as --app-theme-color and the gradients used for buttons and overlays.

:root {
  --app-theme-color: #4e5aff;
  --app-btn-gred: linear-gradient(to right, #4e5aff 0%, #800fee 51%, #2540f0 100%);
}

Change the values in the theme file used by the homepage you want to recolor. Because page styles are loaded with ViewEncapsulation.None, theme changes apply to the whole page.

SCSS organization

Porto pages are standalone components, so a new page only needs a component, a route and an SEO entry. The easiest start is to copy an existing page folder, for example src/app/pages/index10.

1. Copy the page folder and rename the component, selector and class (for example my-page and MyPageComponent).
2. Edit the template to keep, remove or reorder section tags, and update the imports array to match.
3. Register a lazy loaded route in src/app/app.routes.ts, above the ** route:

{
  path: 'my-page',
  loadComponent: () =>
    import('./pages/my-page/my-page.component').then((m) => m.MyPageComponent),
},

4. Add an entry with the same key (my-page) to seo.json with a title, description and breadcrumb.

Because the build prerenders routes, the new page is generated as static HTML the next time you run npm run build.

The form component (contact-us-form) sends firstName, lastName, email, phone and message to assets/php/contact.php. The script checks the name and email and then calls PHP mail().

Set it up

1. Open src/assets/php/contact.php.
2. Set $recipient to your own email address. In the demo it is set to the sender's address, so replace it or you will not receive messages.
3. Remove or replace the demo address in $bcc.
4. Deploy the built site to PHP hosting so that assets/php/contact.php is served by PHP.

$recipient = "you@yourdomain.com";
$bcc = "";   // optional

The form does not work from npm start because the Angular dev server does not run PHP. Test it on PHP hosting or a local PHP server.

Edit src/app/shared/models/seo.json. The site block holds the site name, URL, default image and product details. The pages block has a title, description and breadcrumb for each route key (index, index2, contact-us and so on). SeoService applies them to each route, including during prerendering.

SEO checklist before launch

• Write a unique title (about 50 to 60 characters) and description (about 150 to 160 characters) for every route in seo.json.
• Replace demo images and give every image a descriptive alt text.
• Keep one h1 per page and use headings in order.
• Add a robots.txt and a sitemap.xml to the public folder so they are copied into the build output.
• Serve the site over HTTPS and submit the sitemap in Google Search Console.

Angular 22 targets the current versions of Chrome, Edge, Firefox and Safari, on desktop as well as on iOS and Android. Older browsers that do not support modern JavaScript features are not supported. Layouts use the Bootstrap 5 grid, so pages adapt to phones, tablets and desktops without extra setup.

Some animations (AOS scroll effects) are switched off on tablet and smaller screens by design, which keeps scrolling smooth on mobile devices.

Packages

Dev packages

• @angular/cli, @angular/build, @angular/compiler-cli: build tooling
• typescript 6, vitest, jsdom: language and unit tests
• prettier: code formatting (see .prettierrc)

Security audit (known vulnerabilities)

Last checked with npm audit on October 19, 2026, across 500 installed packages (164 production, 336 development). No known vulnerabilities were reported.

New advisories are published over time, so run the audit yourself before you deploy:

npm audit
npm audit fix

npm run build

The production build prerenders every route, including each blog post, so the output in dist/porto-angular-22/browser is plain static files that work on any web host.

Hosting options

• Static hosting: upload the contents of dist/porto-angular-22/browser to Netlify, Vercel, GitHub Pages, S3 or a shared host.
• PHP hosting: use the same upload if you want the contact form to work.
• Open from disk: npm run build:file creates a build in dist/porto-angular-22-file/browser that opens by double-clicking index.html. It uses hash URLs (for example index.html#/index2).

Server rewrite rule

If you deploy without prerendered files, send unknown paths to index.html. Nginx example:

location / {
  try_files $uri $uri/ /index.html;
}

Testing

npm test

Unit tests run with Vitest through the Angular CLI.

npm install fails or the build errors out

Check node -v against the versions in Requirements. Delete node_modules and package-lock.json only as a last resort, then run npm install again.

Port 4200 is already in use

npm start -- --port 4300

Page shows 404 after refresh on the live site

Upload the full contents of the browser folder, including the prerendered route folders, or add the server rewrite rule from Build & Deploy.

Contact form shows an error or nothing happens

Make sure the site is on PHP hosting with mail() enabled, set $recipient, and on PHP 8 remove the get_magic_quotes_gpc() block. See Contact Form (PHP).

Changes to SCSS variables do not appear

Restart npm start. If a homepage still shows old colors, check the theme file that page loads in its styleUrls, since theme files override global variables.

Images are not showing

Image paths are relative to src/assets. Check the spelling and letter case of the file name and path.

• Angular, Bootstrap, ng-bootstrap, Popper
• Swiper, ngx-owl-carousel-o, PhotoSwipe, Shuffle.js
• AOS, Typed.js, Velocity, Vivus, Jarallax, parallax.js, tsParticles
• Google Fonts: Roboto, Poppins, Barlow, Open Sans, Roboto Slab

Demo images are for preview purposes only. Replace them with your own before publishing.

Check the troubleshooting and FAQ sections first. Your purchase includes one year of free premium support and unlimited updates. Contact LettstartDesign through the support link on your purchase page, and include your template version and a short description of the issue.