Cap-angular-schematic-responsive NPM

cap-angular-schematic-responsive

The Schematic will create a responsive plate scaffold application with many useful features, modules and useful function to start a project.

Prerequisites

Have an Angular app
Node 10.6 to the current.

Installation

To run the schematic, execute the following command.

ng add cap-angular-schematic-responsive

The schematic will add an angular.json

"styles": [
{
    "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
},
{
    "input": "./src/assets/webslidemenu/dropdown-effects/fade-down.css"
},
{
    "input": "./src/assets/webslidemenu/webslidemenu.scss"
}
],
"scripts": [
{
    "input": "./node_modules/jquery/dist/jquery.min.js"
},
{
    "input": "./node_modules/popper.js/dist/umd/popper.min.js"
},
{
    "input": "./node_modules/bootstrap/dist/js/bootstrap.min.js"
}
]

The schematic will be configurated after you answer the following questions.

What is the project title for the App? : < string >
Do you want to remove the content for app.component.html? : < Y/N >
Would you like to add cap-authentication functionallity to the menu? : < Y/N >
Which service for authentication you choose? : < auth0 / firebase >
Do you want to add cap-authentication Schematic? : < Y/N >
Do you want to integrate with cap-sfcore module?? : < Y/N >

The Schematic will create a responsive plate scaffold application with the next features:

Bootstrap 4.0.0 Wrapper.
Responsive Menu.
Modal Component/Service.
Loading Screen Interceptor/Animation.
SEO metatags service.
REST API request service.
Cache Request Interceptor.
Header and Fotter components.
Integration with cap-angular-schematic-auth-auth0 (Autentication menu links).
Integration with cap-angular-schematic-sfcore (Salesforce Components menu links).
Pipes for url encode and string decode.
Common Service with useful common functions.
Banner and Breadcrumbs components.
Custom Elememnts implementation, a image lazy defer screen custom element included.

Touched files:

app
    |-- footer/
        |-- footer.component.html
        |-- footer.component.scss
        |-- footer.component.ts
    |-- header/
        |-- header.component.html
        |-- header.component.scss
        |-- header.component.ts
    |-- home/
        |-- home.component.html
        |-- home.component.scss
        |-- home.component.ts
        |-- home.module.ts
	|-- app.component.html
    |-- app.module.ts  
    |-- app-routing.module.ts
    |-- angular.json
    |-- package.json
    |-- modules/
        |-- cap-responsive/
            |-- services/
                |-- load-scripts.service.ts
                |-- loading-screen.interceptor.ts
                |-- seo-service.ts
                |-- api.service.ts
                |-- cache.interceptor.ts
                |-- common.service.ts
            |-- custom-elements/
            |-- components/
                |-- banner/
                |-- breadcrumbs/
                |-- modal/
                    |-- modal.component.ts
                    |-- modal.service.ts
                |-- loading-screen/
                    |-- loading-screen.component.html
                    |-- loading-screen.component.scss
                    |-- loading-screen.component.ts
                    |-- loading-screen.service.ts
            |-- pipes/
                    |-- encode-uri.pipe.ts
                    |-- str-decode.pipe.ts
            |-- cap-responsive.module.ts
assets
    |-- images/
        |-- angular-logo.png
    |-- webslidemenu/
        |-- webslidemenu.scss
        |-- webslidemenu.js
        |-- color-skins/
            |-- white-red.css
        |-- dropdown-effects/
            |-- fade-down.css
    |-- images/
        |-- angular-logo.png

How implement Banner Component

<app-banner [title]="'Connected Apps Plattform'" [background]="'https://ep01.epimg.net/elpais/imagenes/2019/10/30/album/1572424649_614672_1572453030_noticia_normal.jpg'"></app-banner>

How implement Breadcrumbs Component

<app-breadcrumbs [links]="{home: '/', publications: '/publications'}"></app-breadcrumbs>

Custom Elements

How to register img-lazy component as a custom element

This custom element is useful to increment the Performance of a application because use the defer offscreen hability, is compatible with SSR and very useful for SEO, the images are wrapped in a figure element and the description in a figure-caption element also.

In a SSR application:

import { ImgLazyComponent } from './modules/cap-responsive/custom-elements/img-lazy/img-lazy.component';
import { PLATFORM_ID, Inject, Injector } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private injector: Injector,
    @Inject(PLATFORM_ID) private platformId: string) {
      const { createCustomElement } = require('@angular/elements');
      if (isPlatformBrowser(this.platformId)) {
        // Register Custom Elements and Web Components
        const elements: any[] = [
          [ImgLazyComponent, 'img-lazy-element']
        ];        
        for (const [component, name] of elements) {
          const el = createCustomElement(component, { injector: this.injector });
          customElements.define(name, el);
        }
    }
  }
}

In a non SSR aplication:

import { ImgLazyComponent } from './modules/cap-responsive/custom-elements/img-lazy/img-lazy.component';
import { createCustomElement } from '@angular/elements';
...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {
    // Register Custom Elements and Web Components
    const elements: any[] = [
        [ImgLazyComponent, 'img-lazy-element']
    ];        
    for (const [component, name] of elements) {
        const el = createCustomElement(component, { injector: this.injector });
        customElements.define(name, el);
    }
  }
}

Update the main.ts file

For wait for Web Components are ready are required the next configuration:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';


declare global {
  interface Window {
    WebComponents: {
      ready: boolean;
    };
  }
}

if (environment.production) {
  enableProdMode();
}

function bootstrapModule() {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
}

document.addEventListener('DOMContentLoaded', () => {
  if (window.WebComponents.ready) {
    // Web Components are ready
    bootstrapModule();
  } else {
    // Wait for polyfills to load
    window.addEventListener('WebComponentsReady', bootstrapModule);
  }
});

How implement img-lazy-element in a template

  <div class="row">
      <div class="col-lg-3 col-md-4 col-6" *ngFor="let item of items">
          <a routerLink="/items/{{item.id}}" title="{{item.name}}">
              <img-lazy-element [src]="item.logo.file.url" [alt]="item.logo.file.title"></img-lazy-element>
          </a>
      </div>
  </div>

SEO Service

Update Title and Description metas

Use generateTags method of SeoService to update the main SEO metatags.

Example of implementation:

    import { SeoService } from './../modules/cap-responsive/services/seo.service';

    ...

    constructor(private seoService: SeoService) {}

    ...

    ngOnInit() {
        const tags = {
        title: 'SEO Title text',
        description: 'SEO Description text'
        };
        this.seoService.generateTags(tags);
    }

Facebook and Twitter Share Metas

This schematic put all metas Opengraph and Twitter on index.html.

Use setSocialMediaTags method of SeoService to to update these metatags.

Metas included on index:

  <!-- Facebook metas -->
  <meta property="fb:app_id" content="0123456789876543210">
  <meta property="og:url" content="https://mysite.com">
  <meta property="og:title" content="Page to share title">
  <meta property="og:description" content="Page to share description">
  <meta property="og:image" content="http://mysite.com/assets/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:image:height" content="">
  <meta property="og:image:width" content="">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Mysite.com">

  <!-- Twitter metas -->
  <meta name="twitter:title" content="Page to share title">
  <meta name="twitter:image" content="http://mysite.com/assets/image.jpg">
  <meta name="twitter:image:alt" content="Image description">
  <meta name="twitter:description" content="Page to share description">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:domain" content="mysite.com">

Method Params:

    import { SeoService } from './../modules/cap-responsive/services/seo.service';

    ...

    constructor(private seoService: SeoService) {}

    ...

    this.seoService.setSocialMediaTags(
        'https://mysite.com', // url: string, 
        'Page to share title', // title: string, 
        'Page to share description', // description: string, 
        'http://mysite.com/assets/image.jpg', // image: string, 
        'website', // type: string,
        'Mysite.com', // siteNameMeta: string,
        '300', // imageHeigh: string, 
        '500', // imageWidth: string,
        'summary', // twitterCardMeta: string, 
        'mysite.com', // twitterDomainMeta: string
    );

Set Canonical link tag

Use setCanonicalURL method of SeoService to set the canonical url of a page.

Example of implementation:

    import { SeoService } from './../modules/cap-responsive/services/seo.service';
    import { Router } from '@angular/router';

    ...

    constructor(private seoService: SeoService, private router: Router) {}

    ...

    this.seoService.setCanonicalURL(this.router.url);