node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

@bizappframework/angular-build

angular-build

Build status Build Status npm version Dependency Status npm

What is this?

Build system for Angular app and lib projects. This is similar to angular-cli with some features and customizations. Some of those are:

Prerequisites

Make sure you have Node version >= 6.9 and npm >= 3.

Table of Contents

Installation

BEFORE YOU INSTALL: please read the prerequisites

npm install -g @bizappframework/angular-build

Create, build and run a new Angular Starter app

  1. In command prompt or terminal, type 'ngb new'.
  2. Choose 'Angular Starter' template (Use down arrow key and then press Enter/Return key).
  3. Enter project name (e.g. ng-app1).
  4. Go to your newly created project directory and run ngb build.
  5. To run the app, run 'npm run http-server'.

Create, build and run a new ASP.Net Core Angular Universal Starter app

BEFORE YOU START: make sure dotnet core version >= 2.0.0-preview2 is installed by typing 'dotnet --version' in command prompt or terminal. .Net Core Download Page.

  1. In command prompt or terminal, type 'ngb new'.
  2. Choose 'ASP.NET Core Angular Universal Starter' template.
  3. Enter project name (e.g. WebApplication1).
  4. Go to your newly created project directory and run dotnet build.
  5. To run the app, run 'dotnet run'.

Build your existing library/app project

  1. Go to your project directory and run ngb init to init configuration files.
  2. To build your project, run 'ngb build'.

Library projects built with angular-build
@bizappframework/ng-config
@bizappframework/ng-config-http-loader

More about ngb

ngb --help

angular-build.json config file

The main configuration file to build your angular project.
The following is an example configuration for angular app(s).

{
  "apps": [
    {
      // Your angular app src directory.
      "srcDir": "ClientApp",
 
      // The output directory for build results.
      "outDir": "wwwroot",
 
      // The main entry file to be bundled.
      "entry": "main.browser.ts",
 
      // List of assets to be copied to bundle output location.
      "assets": [
        "favicon.ico",
        {
          "from": "assets/**/*",
          "to": "assets"
        }
      ],
 
      // Global style entries to be included in the build.       
      "styles": [
        "styles.scss"
      ],      
 
      // The polyfill entries for app.
      "polyfills": [
        "core-js/es6/reflect",
        "core-js/es7/reflect",
        "zone.js/dist/zone"
      ],
 
      // The typescript configuration file
      "tsconfig": "tsconfig.app.json",
 
      // The favicon configuration file.
      "faviconConfig": "favicon-config.json",
 
      // The public url address of the output files.
      "publicPath": "/",
 
      // The html injection options.
      "htmlInjectOptions": {
        "index": "index.html"
      },
 
      // Build target overrides
      "envOverrides": {
 
        // For development build
        "dev": {
          "referenceDll": true
        },
 
        // For production build
        "prod": {
          "moduleReplacements": [
            {
              "resourcePath": "environments/environment.ts",
              "newResourcePath": "environments/environment.prod.ts"
            }
          ]
        }
      }
    }
  ]
}

The following is an example configuration for angular lib project(s).

{  
  "libs": [
    {
      "srcDir": "libs/ng-config",
      "outDir": "dist/packages/ng-config",
      "assets": [
        "../../LICENSE",
        "README.md"
      ],
      "tsTranspilations": [
        {
          "tsconfig": "tsconfig.json",
          "target": "es2015",
          "copyTemplateAndStyleUrls": false,
          "inlineMetaDataResources": false,
          "outDir": "es2015"
        },
        {
          "tsconfig": "tsconfig.json",
          "target": "es5",
          "copyTemplateAndStyleUrls": false,
          "inlineMetaDataResources": false,
          "outDir": ""
        }
      ],
      "bundleTargets": [
        {
          "name": "esm-es2015",
          "entry": "index.js",
          "entryResolution": {
            "entryRoot": "tsTranspilationOutDir"
          },
          "libraryTarget": "es",
          "outDir": "bundles",
          "inlineResources": true
        },
        {
          "name": "esm-es5",
          "entryResolution": {
            "entryRoot": "bundleTargetOutDir"
          },
          "libraryTarget": "es",
          "outDir": "bundles",
          "inlineResources": false,
          "addPureAnnotations": true,
          "transformScriptTargetOnly": true,
          "scriptTarget": "es5"
        },
        {
          "name": "umd-es5",
          "entryResolution": {
            "entryRoot": "bundleTargetOutDir"
          },
          "libraryTarget": "umd",
          "outDir": "bundles",
          "inlineResources": false
        }
      ],
      "packageOptions": {
        "packageConfigFile": "package.json"
      },
      "banner": "banner.txt"
    }  
  ]
}

The typescript model is here.

favicon-config.json config file

The configuration file for cross-platform favicons generation.

{
  // Your API key. No key yet? Register it now.
  "apiKey": "87d5cd739b05c00416c4a19cd14a8bb5632ea563",
 
  // Indicate how the master picture (used to generate the various favicon pictures) is transmitted to RealFaviconGenerator.
  "masterPicture": "favicon.svg",
 
  // These values reflect the various choices offered when you generate a favicon manually.
  "design": {
    "desktopBrowser": {},
    "androidChrome": {
      "pictureAspect": "noChange",
      "assets": {
        "legacyIcon": false,
        "lowResolutionIcons": false
      }
    },
    "ios": {
      "pictureAspect": "backgroundAndMargin",
      "margin": "0",
      "assets": {
        "declareOnlyDefaultIcon": true
      }
    }
  },
 
  // The background color applied as the background of the icon.
  "background": "#ffffff",
 
  // Use online realfavicongenerator.net only.
  "online": false,
 
  // If true, first try to generate using realfavicongenerator.net, if failed, use local generator.
  "preferOnline": true
}

For more information see realfavicongenerator.net, ** note use lower camel case instead and replace 'favicon_design' with 'design'.
The typescript model is here

License

MIT License