npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-library-seed-demo

v0.2.3

Published

AOT/JIT/UMD build demo of angular library seed

Downloads

1

Readme

angular-library-seed demo projects

This folder contains two demo-projects (esm and umd folders) for angular-library-seed. These demo projects may help you to test whether your library supports AOT/JIT/UMD builds or not.

  • esm folder contains Angular project that is built using @angular/compiler and Webpack. This demo project utilizes ESM (pure ES2015) sources of your library to do two kind of compilations:
    • AOT (ahead-of-time) compilation.
    • JIT (just-in-time) compilation.
  • umd folder contains Angular project that is being built and assembled in browser by SystemJS. This demo project utilizes UMD bundle of your library.

Demo-projects are created as an alternative to npm link command. You may simply delete this demo folder if you prefer to use yarn link instead to check how your library is being built.

Quick Start

# Assuming the you are already in angular-library-seed/demo folder

# Install all dependencies
yarn install

# Start watching library dist folder and do JIT project build in watch mode.
yarn start

# Or you may simply build AOT/JIT/UMD versions all at once by running the following command
yarn build

File Structure

angular-library-seed
  └─ demo                           * Folder for demo applications (MAY BE DELETED if not required) 
     ├─ esm                         * AOT/JIT demo project
     |  └─ dist                     * This folder will contain project ESM builds
     |  |  ├─ aot                   * This folder contains project build made via AOT compilation
     |  |  |  └─ index.html         * <-- RUN THIS FILE TO CHECK AOT BUILD
     |  |  |
     |  |  └─ jit                   * This folder contains project build made via JIT compilation
     |  |     └─ index.html         * <-- RUN THIS FILE TO CHECK JIT BUILD
     |  |
     |  ├─ lib                      * Temporary folder with a copy of your library built sources
     |  ├─ src
     |  |  ├─ app                   * Demo application sources. Adopt them with your library.
     |  |  ├─ index.ejs             * Main application template.
     |  |  ├─ main-aot.ts           * AOT main entry.
     |  |  ├─ main-jit.ts           * JIT main entry.
     |  |  └─ polyfills.browser.ts  * Browser polyfills.
     |  |
     |  ├─ tsconfig-aot.json        * TypeScript configuration for AOT build.
     |  ├─ tsconfig.json            * TypeScript configuration for JIT build.
     |  ├─ webpack-aot.config.js    * Webpack configuration for AOT build.
     |  └─ webpack.config.js        * Webpack configuration for JIT build.
     |   
     ├─ umd                         * UMD demo project
     |  ├─ app                      * Demo application sources. Adopt them with your library.
     |  ├─ lib                      * Temporary folder with a copy of your library built sources
     |  ├─ index.html               * <-- RUN THIS FILE TO CHECK UMD BUILD
     |  ├─ main.ts                  * Main application entry file.
     |  └─ systemjs.config.js       * SystemJS configuration.
     |   
     ├─ .gitignore                  * List of files that are ignored while publishing to git repository
     ├─ gulpfile.js                 * Gulp helper scripts for building demos
     ├─ package.json                * NPM dependencies and helper scripts for building demos
     └─ yarn.lock                   * Yarn dependency versions lock for demo applications

Getting Started

Dependencies

Node/NPM

Install latest Node and NPM following the instructions. Make sure you have Node version ≥ 7.0 and NPM ≥ 4.

  • brew install node for Mac.

Yarn

Install Yarn by following the instructions.

  • brew install yarn for Mac.

Installing

  • Switch to demo folder in your console.
  • yarn install to install required dependencies.

Replace TickTock library related code with your own library tags and imports

This step may be optional at first since you might just want to build demo projects with TickTock library example.

Once you're ready to develop your own library you should do the following.

  • Adjust source codes of angular-library-seed/demo/esm/src/app/*.ts files for AOT/JIT builds.
  • Adjust source codes of angular-library-seed/demo/umd/app/*.ts files for UMD builds.

Build demo projects

  • yarn build for building AOT, JIT and UMD demo versions all at once.

You may also build projects separately:

  • yarn build:jit - for building JIT version of demo project.
  • yarn build:aot - for building AOT version of demo project.
  • yarn build:umd - for building UMD version of demo project.

To see your library in action launch the following files in your browser:

  • angular-library-seed/demo/esm/dist/jit/index.html file for JIT build
  • angular-library-seed/demo/esm/dist/aot/index.html file for AOT build
  • angular-library-seed/demo/umd/index.html file for UMD build

Build JIT project in watch mode

  • yarn start for building JIT version of demo project and start watching for library changes.

This command may be used simultaneously in combination with angular-library-seed's yarn build:watch. As a result once you change library source code it will be automatically re-compiled and in turn your JIT demo-project will be automatically re-built and you will be able to see that changes in your browser instantly.

See Development Workflow section of angular-library-seed's README for more details.

Other commands

Cleaning

  • yarn clean:tmp command will clean up all temporary files like dist, lib, *.ngsummary.json etc.
  • yarn clean:all command will clean up all temporary files along with node_modules folder.