CAP Utilities 💡

CAP Utilities is part of the CAP Generator and was created to provider a collection of general and useful utilities for Schematics in Angular.

To learn more about Schematics we recomend you to see the Schematic documentation.

How to install❓

To Install using npm, simply do:

npm install cap-utilities

How to Use❓

To import all the functions we recommend you the following import declaration:

import * as astUtils from 'cap-utilities'

Functions 📂

• addStylesToAngularJSON
• addLinkStyleToHTMLHead
• addRoutes
• addBodyClass
• addEnvironmentVar
• addExportToModule
• addEntryComponentToModule
• addPackageToPackageJson
• addToNgModule
• appendToStartFile
• appendHtmlElementToBody
• getAppName
• getAppModulePath
• getAngularAppConfig
• getAppNameFromPackageJSON
• hasBootstrap
• isAngularBrowserProject
• readIntoSourceFile
• removeContentFromFile
• updateIndexFile
• updateIndexHeadFile
• updateBodyOfIndexFile
• addIdToElement
• addToAngularJSONArchitectBudgets

addIdToElement

Disclaimer 🚧

This repository contains parts of code which is directly taken from Angular Schematics package. All credits go to the respective developers!

Importan

We are still working on the documentation of the functions (methods).

Functions 📂

addStylesToAngularJSON

Function to add styles into the angular. json.

Example:

param	Description
host
stylePaths	array of strings

  cap_utils.addStylesToAngularJSON(
    host, [
      './src/assets/webslidemenu/dropdown-effects/fade-down.css',
      './src/assets/webslidemenu/webslidemenu.scss'])

addLinkStyleToHTMLHead

Insert an html link on the head of and html file

Example:

param	Description
host
linkHTMLTags	array of strings
path	string

  cap_utils.addLinkStyleToHTMLHead(host, [
      '<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=optional" rel="stylesheet" async defer>',
      '<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=optional" rel="stylesheet" async defer>',
      '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" async defer>'
    ], path)

addRoutes

param	Description
host
routingPath
routePaths
srcImport

@return

Example:

astUtils.addRoutes(host, filePath, [
  { path: '', pathMatch: 'full', component: 'HomeComponent' },
  { path: 'home', pathMatch: 'full', component: 'HomeComponent' }
], importUrl)

addBodyClass

Adds a class to the body of the document.

param	Description
host
htmlFilePath
className
srcImport

@return

Example:

addEnvironmentVar

Appends a key: value on a specific environment file.

param	Description
host	Tree
routePaths	An array of objects that contains the environments data.

RoutePaths' interface

Property	Description
env	The environment to be added (example: prod, staging...)
appPath	application path (/src...)
key	The key to be added
value	The value to be added

@return void

Example:

cap_utils.addEnvironmentVar(host, [
      {
        env: '',
        appPath: options.path || '/src',
        key: 'apiUrl',
        value: 'http://localhost:4000/api/'
      },
      {
        env: 'prod',
        appPath: options.path || '/src',
        key: 'apiUrl',
        value: 'http://mydomain.com/api/'
      }
    ])

addExportToModule

Custom function to insert an export into NgModule. It also imports it.

param	Description
source
modulePath
classifiedName
importPath

@return

Example:

addEntryComponentToModule

Custom function to insert an entryComponent into NgModule. It also imports it.

param	Description
source
modulePath
classifiedName
importPath

@return

Example:

addPackageToPackageJson

param	Description
Host
packages	Object's array of type packageI

Package interface(packageI)

Name	Value
type	String
pkg	String
version	String

@return

Example:

export function addPackageJsonDependencies(): Rule {
  return (host: Tree) => {
    cap_utilities.addPackageToPackageJson(host, [
      {
        type: NodeDependencyType.Default,
        pkg: 'cap-storage-aws',
        version: '~3.0.3'
      },
      {
        type: NodeDependencyType.Default,
        pkg: 'aws-sdk',
        version: '~2.701.0'
      },
      {
        type: NodeDependencyType.Default,
        pkg: 'ngx-file-drop',
        version: '~9.0.1'
      },
      {
        type: NodeDependencyType.Default,
        pkg: 'sweetalert2',
        version: '~9.15.1'
      },{
        type: NodeDependencyType.Default,
        pkg: 'uuid',
        version: '~8.1.0'
      }
    ])
    // cap_utilities.addPackageToPackageJson(host, NodeDependencyType.Default, 'cap-storage-aws', '~3.0.3')
    return host;
  };
}

addToNgModule

Add modules, components or services into the declaration module.

Note: If you wanna include a module with the method forRoot into the app module, intance of write the path of the module write the name of the module(link npm import).

param	Type	Description
host	Tree	Tree
options	Any	The available options for the schematic
elementsToImport?	Object array	Object array of type importElementsModulearray

importElementsModule' interface

Property	Type	Description
name	String	Name of the component, module or service to import
path	String	Path of the component, module or service to import
type	String	Type of element to import (component, module or service)
forRootValues?	Object	Object of type forRootValuesI

forRootValuesI

Property	Type	Description
configuration?	Any	Property to append an object, array, etc before to the forRoot values
params	Object array	Params that needs the module into the forRoot method

forRootParamsI

Property	Type	Description
name	String	Params's name
value	Any	Params's value

@return

Example:

  astUtils.addToNgModule(host, options, [{
      name: 'HeaderComponent',
      path: 'app/header/header.component',
      type: 'component'
    },
    {
      name: 'FooterComponent',
      path: 'app/footer/footer.component',
      type: 'component'
    },
    {
      name: 'HomeModule',
      path: 'app/home/home.module',
      type: 'module'
    },
    {
      name: 'CapStorageAWS',
      path: 'cap-storage-aws',
      type: 'module',
      forRootValues: [
          {
            name: 'bucket',
            value: `my-credentials`
          },
          {
            name: 'accessKeyId',
            value: `my-credentials`
          },
          {
            name: 'secretAccessKey',
            value: `my-credentials`
          },
          {
            name: 'region',
            value: `my-credentials`
          },
          {
            name: 'folder',
            value: `my-credentials`
          }
        ]
      }]
    }]);

appendToStartFile

Appends a fragment to the start file.

param	Description
host
filePath	Path of the file.
fragment	The maximum number of items to return.
srcImport

@return A tree with the updates.

Example:

  const mainDiv =
  `<div id="main">
    <router-outlet></router-outlet>
  </div>`;
  astUtils.appendToStartFile(host, filePath, mainDiv);
    
  const content = `<app-header></app-header>` ;
  astUtils.appendToStartFile(host, filePath, content);

appendHtmlElementToBody

Appends the given element HTML fragment to the <body> element of the specified HTML file.

param	Description
host	Tree
htmlFilePath
elementHtml
side

@return

Example:

getAppName

param	Description
config

@return

Example:

getAppModulePath

param	Description
host	Tree
mainPath

@return

Example:

getAngularAppConfig

param	Description
config

@return

Example:

getAppNameFromPackageJSON

param	Description

@return

Example:

hasBootstrap

param	Description

@return

Example:

isAngularBrowserProject

param	Description
projectConfig

@return

Example:

readIntoSourceFile

param	Description

@return

Example:

removeContentFromFile

Remove content from specified file

param	Description
host
filePath	Path of the file that's going to be deleted.

@return The updated tree.

Example:

function removeComponentHtml(filePath: string): Rule {
  return (hostd: Tree) => {
    astUtils.removeContentFromFile(host, filePath);
    return host;
  };
}

updateIndexFile

param	Description

@return

Example:

updateIndexHeadFile

Appends the given element HTML fragment to the <head> element of the specified HTML file.

param	Description
hostP
path
arrayLinks

@return

Example:

updateBodyOfIndexFile

param	Description

@return

Example:

addIdToElement

Add a id to a element on a html file

param	Description
host	Tree
htmlFilePath	Html file path
idName	Name of the id to be added
tagName	Html tag name to append the id

Example:

  function addIdAppToBody(htmlFilePath: string): Rule {
    return (host: Tree) => {
      addIdToElement(host, htmlFilePath, 'app', 'body');
    }
}*/

addToAngularJSONArchitectBudgets

Modify the budgets object within the Architect property of the Angular JSON File

Property	Type	Description
host	Tree
data	any	An object that it's going to modified the current budget information.

Example:

  cap_utilities.addToAngularJSONArchitectBudgets(host, {
    type: 'anyComponentStyle',
    maximumWarning: '40kb',
    maximumError: '50kb'
  }

License

Apache-2.0 © Software Allies