├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── demo ├── .gitignore ├── README.md ├── esm │ ├── src │ │ ├── app │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── index.ejs │ │ ├── main-aot.ts │ │ ├── main-jit.ts │ │ └── polyfills.browser.ts │ ├── tsconfig-aot.json │ ├── tsconfig.json │ ├── webpack-aot.config.js │ └── webpack.config.js ├── gulpfile.js ├── package.json ├── umd │ ├── app │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── index.html │ ├── main.ts │ └── systemjs.config.js └── yarn.lock ├── gulpfile.js ├── karma-test-entry.ts ├── karma.conf.ts ├── package.json ├── src ├── components │ ├── index.ts │ └── tick-tock │ │ ├── index.ts │ │ ├── tick-tock.component.html │ │ ├── tick-tock.component.scss │ │ ├── tick-tock.component.spec.ts │ │ └── tick-tock.component.ts ├── index.ts ├── services │ ├── index.ts │ └── tick-tock │ │ ├── index.ts │ │ ├── tick-tock.service.spec.ts │ │ └── tick-tock.service.ts └── tick-tock.module.ts ├── tsconfig-aot.json ├── tsconfig.json ├── tslint.json ├── webpack-test.config.ts ├── webpack-umd.config.ts └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node 2 | node_modules 3 | npm-debug.log 4 | 5 | # Yarn 6 | yarn-error.log 7 | 8 | # JetBrains 9 | .idea/ 10 | 11 | # VS Code 12 | .vscode/ 13 | 14 | # Windows 15 | Thumbs.db 16 | Desktop.ini 17 | 18 | # Mac 19 | .DS_Store 20 | 21 | # Temporary files 22 | coverage/ 23 | dist 24 | docs 25 | tmp 26 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Node 2 | node_modules 3 | npm-debug.log 4 | 5 | # Yarn 6 | yarn-error.log 7 | 8 | # JetBrains 9 | .idea/ 10 | 11 | # VS Code 12 | .vscode/ 13 | 14 | # Windows 15 | Thumbs.db 16 | Desktop.ini 17 | 18 | # Mac 19 | .DS_Store 20 | 21 | # Temporary files 22 | coverage/ 23 | demo/ 24 | docs 25 | tmp 26 | 27 | # Library files 28 | src/ 29 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | addons: 4 | apt: 5 | sources: 6 | - google-chrome 7 | packages: 8 | - google-chrome-stable 9 | language: node_js 10 | node_js: 11 | - node 12 | script: 13 | - npm run ci 14 | before_script: 15 | - export DISPLAY=:99.0 16 | - sh -e /etc/init.d/xvfb start 17 | - sleep 3 18 | cache: 19 | yarn: true 20 | notifications: 21 | email: false 22 | after_success: 23 | - npm run codecov 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Oleksii Trekhleb 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `angular-library-seed` - the starter for Angular libraries 2 | 3 | [![Build Status](https://travis-ci.org/trekhleb/angular-library-seed.svg?branch=master)](https://travis-ci.org/trekhleb/angular-library-seed) 4 | [![codecov](https://codecov.io/gh/trekhleb/angular-library-seed/branch/master/graph/badge.svg)](https://codecov.io/gh/trekhleb/angular-library-seed) 5 | [![npm version](https://badge.fury.io/js/angular-library-seed.svg)](https://badge.fury.io/js/angular-library-seed) 6 | 7 | > Seed project for [Angular](https://angular.io/) libraries that are [AOT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)/[JIT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) compatible and that use external [SCSS](http://sass-lang.com/)-styles and HTML-templates. 8 | 9 | This project contains TickTock library example. The library itself is small and the only thing it does is [displaying current time](http://embed.plnkr.co/VbO1hldrCfF6ITG6VvGG/) (Plunker example). But what **most important** is that the project contains **reusable environment** for the libraries that allows to build, test, lint, document, explore and publish them. 10 | 11 | > [Read more](https://medium.com/@trekhleb/how-to-create-aot-jit-compatible-angular-4-library-with-external-scss-html-templates-9da6e68dac6e) about architectural **challenges** and **solutions** used in this repository. 12 | 13 | # You might find this project helpful if 14 | - You want to create library for **Angular 4**. 15 | - You want your library to be ready for further **AOT** or **JIT** compilation. 16 | - You want your library to be ready for further usage **directly in browsers** (let's say [UMD](https://github.com/umdjs/umd) bundle loaded by [SystemJS](https://github.com/systemjs/systemjs)). 17 | - You want to write component styles in **external SCSS files**. 18 | - You want to write component templates in **external HTML files**. 19 | - You want to have **watch-mode** for library builds (including AOT build). 20 | 21 | # Main Features 22 | - **AOT/JIT** compatible library build via [Angular Compiler](https://www.npmjs.com/package/@angular/compiler-cli) (ngc). 23 | - **UMD** build via [Webpack](https://webpack.js.org/) that allows you to use your library for browser builds. You may play with it on [Plunker](http://embed.plnkr.co/VbO1hldrCfF6ITG6VvGG/). 24 | - **Testing** with [Karma](https://karma-runner.github.io/1.0/index.html) and [Jasmine](https://jasmine.github.io/). 25 | - **Test coverage** report via [Istanbul](https://github.com/gotwarlost/istanbul). 26 | - **Watch modes** for building and testing procedures that makes developing process easier. 27 | - **Linting** with [TSLint](https://palantir.github.io/tslint/) and [Codelyzer](https://github.com/mgechev/codelyzer) for static code analysis. 28 | - **Exploring your build** via [Sourcemap Explorer](https://www.npmjs.com/package/source-map-explorer) that shows you a treemap visualization to help you debug where all the code is coming from. 29 | - **Documentation generation** via [Compodoc](https://github.com/compodoc/compodoc). Take a look at [documentation example](https://trekhleb.github.io/angular-library-seed/). 30 | - **Documentation hosting** via [GitHub Pages](https://pages.github.com/). 31 | - **AOT/JIT/UMD demos** via [Webpack](https://webpack.js.org/) and [SystemJS](https://github.com/systemjs/systemjs) that allows you to test library builds. 32 | - **Continuous integration** with [Travis CI](https://travis-ci.org/). 33 | - **Code coverage** badge via [Codecov](https://codecov.io) as a reminder to cover code with tests. 34 | 35 | # Quick Start 36 | 37 | ```bash 38 | # Clone the repository 39 | git clone https://github.com/trekhleb/angular-library-seed.git 40 | 41 | # Go to repository folder 42 | cd angular-library-seed 43 | 44 | # Install all dependencies 45 | yarn install 46 | 47 | # Build the library 48 | yarn build 49 | ``` 50 | 51 | # File Structure 52 | 53 | ``` 54 | angular-library-seed 55 | ├─ demo * Folder for demo applications (MAY BE DELETED if not required) 56 | | ├─ esm * AOT/JIT demo project 57 | | ├─ umd * UMD demo project 58 | | └─ ... * More details about this folder may be found in demo folder README file. 59 | | 60 | ├─ src * Library sources home folder (THE PLACE FOR YOUR LIBRARY SOURCES) 61 | | ├─ components * Example of library components with tests 62 | | ├─ services * Example of library services with tests 63 | | ├─ index.ts * Library entry point that is used by builders 64 | | └─ tick-tock.module.ts * Example of library module 65 | | 66 | ├─ .editorconfig * Common IDE configuration 67 | ├─ .gitignore * List of files that are ignored while publishing to git repo 68 | ├─ .npmignore * List of files that are ignored while publishing to npm 69 | ├─ .travis.yml * Travic CI configuration 70 | ├─ LICENSE * License details 71 | ├─ README.md * README for you library 72 | ├─ gulpfile.js * Gulp helper scripts 73 | ├─ karma-test-entry.ts * Entry script for Karma tests 74 | ├─ karma.conf.ts * Karma configuration for our unit tests 75 | ├─ package.json * NPM dependencies, scripts and package configuration 76 | ├─ tsconfig-aot.json * TypeScript configuration for AOT build 77 | ├─ tsconfig.json * TypeScript configuration for UMD and Test builds 78 | ├─ tslint.json * TypeScript linting configuration 79 | ├─ webpack-test.config.ts * Webpack configuration for building test version of the library 80 | ├─ webpack-umd.config.ts * Webpack configuration for building UMD bundle 81 | └─ yarn.lock * Yarn lock file that locks dependency versions 82 | ``` 83 | 84 | # Getting Started 85 | 86 | ## Dependencies 87 | 88 | #### Node/NPM 89 | Install latest Node and NPM following the [instructions](https://nodejs.org/en/download/). Make sure you have Node version ≥ 7.0 and NPM ≥ 4. 90 | 91 | - `brew install node` for Mac. 92 | 93 | #### Yarn 94 | [Yarn package manager](https://yarnpkg.com/en/) is optional but highly recommended. If you prefer to work with `npm` directly you may ignore this step. 95 | 96 | Yarn installs library dependencies faster and also locks theirs versions. It has [more advantages](https://yarnpkg.com/en/) but these two are already pretty attractive. 97 | 98 | Install Yarn by following the [instructions](https://yarnpkg.com/en/docs/install). 99 | 100 | - `brew install yarn` for Mac. 101 | 102 | ## Installing 103 | - `fork` this repository. 104 | - `clone` your fork to your local environment. 105 | - `yarn install` to install required dependencies (or `npm i`). 106 | 107 | ## Replace `TickTock` library with your own library 108 | This step may be optional at first since you might just want to play with existing library example. 109 | 110 | Once you're ready to develop your own library you should do the following. 111 | - Check and re-configure `package.json` fields like `name`, `version`, `keywords`, `description` etc. You may read about specifics of npm's [package.json handling](https://docs.npmjs.com/files/package.json) to do that. 112 | - Replace the content of `src` folder with your library sources. Your library must have `index.ts` file as an entry point for further building. 113 | - Update `demo` sources to make them consume your library in case if you want to keep the demo folder. 114 | 115 | ## Build the library 116 | - `yarn build` for building the library once (both ESM and AOT versions). 117 | - `yarn build:watch` for building the library (both ESM and AOT versions) and watch for file changes. 118 | 119 | You may also build UMD bundle and ESM files separately: 120 | - `yarn build:esm` - for building AOT/JIT compatible versions of files. 121 | - `yarn build:esm:watch` - the same as previous command but in watch-mode. 122 | - `yarn build:umd` - for building UMD bundle only. 123 | - `yarn build:umd:watch` - the same as previous command but in watch-mode. 124 | 125 | ## Other commands 126 | 127 | #### Lint the code 128 | - `yarn lint` for performing static code analysis. 129 | 130 | #### Test the library 131 | - `yarn test` for running all your `*.spec.ts` tests once. Generated code coverage report may be found in `coverage` folder. 132 | - `yarn test:watch` for running all you `*.spec.ts` and watch for file changes. 133 | 134 | #### Generate documentation 135 | - `yarn docs` for generating documentation locally. 136 | - `yarn gh-pages` for generating documentation and uploading it to GitHub Pages. [Documentation example](https://trekhleb.github.io/angular-library-seed/). 137 | 138 | #### Explore the bundle 139 | - `yarn explorer` to find out where all your code in bundle is coming from. 140 | 141 | #### Bump library version 142 | - `npm version patch` to increase library version. [More on bumping](https://docs.npmjs.com/cli/version). 143 | 144 | `preversion` script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing. 145 | 146 | #### Publish library to NPM 147 | - `npm publish` to publish your library sources on [npmjs.com](https://www.npmjs.com/). Once the library is published it will be [available for usage](https://www.npmjs.com/package/angular-library-seed) in npm packages. 148 | 149 | `prepublishOnly` script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing. 150 | 151 | #### Cleaning 152 | - `yarn clean:tmp` command will clean up all temporary files like `docs`, `dist`, `coverage` etc. 153 | - `yarn clean:all` command will clean up all temporary files along with `node_modules` folder. 154 | 155 | # Library development workflow 156 | 157 | In order to debug your library in browser you need to have Angular project that will consume your library, build the application and display it. For your convenience all of that should happen automatically in background so once you change library source code you should instantly see the changes in browser. 158 | 159 | There are several ways to go here: 160 | - Use your **real library-consumer project** and link your library to it via `yarn link` command (see below). 161 | - Use [demo applications](https://github.com/trekhleb/angular-library-seed/tree/master/demo) that are provided for your convenience as a part of this repository. 162 | - Use [Angular-CLI](https://cli.angular.io/) to generate library-consumer project for you and then use `yarn link` to link your library to it. 163 | 164 | ### Using demo applications 165 | 166 | You may take advantage of watch-modes for both library build and [demo-projects](https://github.com/trekhleb/angular-library-seed/tree/master/demo) builds in order to see changes to your library's source code immediately in your browser. 167 | 168 | To do so you need to: 169 | 1. Open two console instances. 170 | 2. Launch library build in watch mode in first console instance by running `yarn build:watch` (assuming that you're in `angular-library-seed` root folder). 171 | 3. Launch demo project build (JIT version) in watch-mode by running `yarn start` in second console instance (assuming that you're in `angular-library-seed/demo` folder). 172 | 173 | 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. 174 | 175 | For more details about demo projects, their folder structure and npm commands please take a look at [demo projects README](https://github.com/trekhleb/angular-library-seed/tree/master/demo). 176 | 177 | ### Using `yarn link` 178 | 179 | In you library root folder: 180 | 181 | ```bash 182 | # Create symbolic link 183 | yarn link 184 | 185 | # Build library in watch mode 186 | yarn build:watch 187 | ``` 188 | 189 | In you project folder that should consume the library: 190 | 191 | ```bash 192 | # Link you library to the project 193 | yarn link "angular-library-seed" 194 | 195 | # Build your project. In case of Angular-CLI use the following command. 196 | ng serve --aot 197 | ``` 198 | 199 | Then you need to import your library into your project's source code. 200 | 201 | Now, once you update your library source code it will automatically be re-compiled and your project will be re-built so you may see library changes instantly. 202 | 203 | [More information](https://yarnpkg.com/en/docs/cli/link) about `yarn link` command. 204 | 205 | > At the moment of publishing this project there is a [bug](https://github.com/angular/angular-cli/issues/3854) exists when using `yarn link` in combination with Angular CLI. The issue is caused by having `node_modules` folder inside linked library. There is a [workaround](https://github.com/angular/angular-cli/issues/3854#issuecomment-274344771) has been provided that suggests to add a `paths` property with all Angular dependencies to the `tsconfig.json` file of the Angular CLI project like it is shown below: 206 | ``` 207 | { 208 | "compilerOptions": { 209 | "paths": { "@angular/*": ["../node_modules/@angular/*"] } 210 | } 211 | } 212 | ``` 213 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | esm/dist 2 | esm/lib 3 | esm/src/**/*.ngfactory.ts 4 | esm/src/**/*.ngsummary.json 5 | node_modules 6 | umd/lib 7 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # `angular-library-seed` demo projects 2 | 3 | > This folder contains two demo-projects (`esm` and `umd` folders) for [angular-library-seed](https://github.com/trekhleb/angular-library-seed). These demo projects may help you to test whether your library supports AOT/JIT/UMD builds or not. 4 | > 5 | > - `esm` folder contains Angular project that is built using [@angular/compiler](https://www.npmjs.com/package/@angular/compiler) and [Webpack](https://webpack.js.org/). This demo project utilizes ESM (pure ES2015) sources of your library to do two kind of compilations: 6 | > - [AOT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) (ahead-of-time) compilation. 7 | > - [JIT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) (just-in-time) compilation. 8 | > 9 | > - `umd` folder contains Angular project that is being built and assembled in browser by [SystemJS](https://github.com/systemjs/systemjs). This demo project utilizes [UMD](https://github.com/umdjs/umd) bundle of your library. 10 | 11 | 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](https://yarnpkg.com/en/docs/cli/link) instead to check how your library is being built. 12 | 13 | # Quick Start 14 | 15 | ```bash 16 | # Assuming the you are already in angular-library-seed/demo folder 17 | 18 | # Install all dependencies 19 | yarn install 20 | 21 | # Start watching library dist folder and do JIT project build in watch mode. 22 | yarn start 23 | 24 | # Or you may simply build AOT/JIT/UMD versions all at once by running the following command 25 | yarn build 26 | ``` 27 | 28 | # File Structure 29 | 30 | ``` 31 | angular-library-seed 32 | └─ demo * Folder for demo applications (MAY BE DELETED if not required) 33 | ├─ esm * AOT/JIT demo project 34 | | └─ dist * This folder will contain project ESM builds 35 | | | ├─ aot * This folder contains project build made via AOT compilation 36 | | | | └─ index.html * <-- RUN THIS FILE TO CHECK AOT BUILD 37 | | | | 38 | | | └─ jit * This folder contains project build made via JIT compilation 39 | | | └─ index.html * <-- RUN THIS FILE TO CHECK JIT BUILD 40 | | | 41 | | ├─ lib * Temporary folder with a copy of your library built sources 42 | | ├─ src 43 | | | ├─ app * Demo application sources. Adopt them with your library. 44 | | | ├─ index.ejs * Main application template. 45 | | | ├─ main-aot.ts * AOT main entry. 46 | | | ├─ main-jit.ts * JIT main entry. 47 | | | └─ polyfills.browser.ts * Browser polyfills. 48 | | | 49 | | ├─ tsconfig-aot.json * TypeScript configuration for AOT build. 50 | | ├─ tsconfig.json * TypeScript configuration for JIT build. 51 | | ├─ webpack-aot.config.js * Webpack configuration for AOT build. 52 | | └─ webpack.config.js * Webpack configuration for JIT build. 53 | | 54 | ├─ umd * UMD demo project 55 | | ├─ app * Demo application sources. Adopt them with your library. 56 | | ├─ lib * Temporary folder with a copy of your library built sources 57 | | ├─ index.html * <-- RUN THIS FILE TO CHECK UMD BUILD 58 | | ├─ main.ts * Main application entry file. 59 | | └─ systemjs.config.js * SystemJS configuration. 60 | | 61 | ├─ .gitignore * List of files that are ignored while publishing to git repository 62 | ├─ gulpfile.js * Gulp helper scripts for building demos 63 | ├─ package.json * NPM dependencies and helper scripts for building demos 64 | └─ yarn.lock * Yarn dependency versions lock for demo applications 65 | ``` 66 | 67 | # Getting Started 68 | 69 | ## Dependencies 70 | 71 | #### Node/NPM 72 | Install latest Node and NPM following the [instructions](https://nodejs.org/en/download/). Make sure you have Node version ≥ 7.0 and NPM ≥ 4. 73 | 74 | - `brew install node` for Mac. 75 | 76 | #### Yarn 77 | Install Yarn by following the [instructions](https://yarnpkg.com/en/docs/install). 78 | 79 | - `brew install yarn` for Mac. 80 | 81 | ## Installing 82 | - Switch to `demo` folder in your console. 83 | - `yarn install` to install required dependencies. 84 | 85 | ## Replace `TickTock` library related code with your own library tags and imports 86 | This step may be optional at first since you might just want to build demo projects with TickTock library example. 87 | 88 | Once you're ready to develop your own library you should do the following. 89 | - Adjust source codes of `angular-library-seed/demo/esm/src/app/*.ts` files for AOT/JIT builds. 90 | - Adjust source codes of `angular-library-seed/demo/umd/app/*.ts` files for UMD builds. 91 | 92 | ## Build demo projects 93 | - `yarn build` for building AOT, JIT and UMD demo versions all at once. 94 | 95 | You may also build projects separately: 96 | - `yarn build:jit` - for building JIT version of demo project. 97 | - `yarn build:aot` - for building AOT version of demo project. 98 | - `yarn build:umd` - for building UMD version of demo project. 99 | 100 | To see your library in action launch the following files in your browser: 101 | - `angular-library-seed/demo/esm/dist/jit/index.html` file for JIT build 102 | - `angular-library-seed/demo/esm/dist/aot/index.html` file for AOT build 103 | - `angular-library-seed/demo/umd/index.html` file for UMD build 104 | 105 | ## Build JIT project in watch mode 106 | - `yarn start` for building JIT version of demo project and start watching for library changes. 107 | 108 | This command may be used simultaneously in combination with [angular-library-seed](https://github.com/trekhleb/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. 109 | 110 | See [Development Workflow](https://github.com/trekhleb/angular-library-seed#development-workflow) section of [angular-library-seed](https://github.com/trekhleb/angular-library-seed)'s README for more details. 111 | 112 | ## Other commands 113 | 114 | #### Cleaning 115 | - `yarn clean:tmp` command will clean up all temporary files like `dist`, `lib`, `*.ngsummary.json` etc. 116 | - `yarn clean:all` command will clean up all temporary files along with `node_modules` folder. 117 | -------------------------------------------------------------------------------- /demo/esm/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | public header: string = 'UMD Demo'; 9 | } 10 | -------------------------------------------------------------------------------- /demo/esm/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | 5 | import { TickTockModule } from '../../lib'; 6 | 7 | @NgModule({ 8 | imports: [ BrowserModule, TickTockModule ], 9 | declarations: [ AppComponent ], 10 | bootstrap: [ AppComponent ] 11 | }) 12 | export class AppModule { 13 | } 14 | -------------------------------------------------------------------------------- /demo/esm/src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 | 11 | Loading demo... 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/esm/src/main-aot.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowser } from '@angular/platform-browser'; 2 | 3 | import { AppModuleNgFactory } from './app/app.module.ngfactory'; 4 | 5 | platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 6 | -------------------------------------------------------------------------------- /demo/esm/src/main-jit.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /demo/esm/src/polyfills.browser.ts: -------------------------------------------------------------------------------- 1 | // Polyfills 2 | 3 | // import 'ie-shim'; // Internet Explorer 9 support 4 | 5 | // import 'core-js/es6'; 6 | // Added parts of es6 which are necessary for your project or your browser support requirements. 7 | import 'core-js/es6/symbol'; 8 | import 'core-js/es6/object'; 9 | import 'core-js/es6/function'; 10 | import 'core-js/es6/parse-int'; 11 | import 'core-js/es6/parse-float'; 12 | import 'core-js/es6/number'; 13 | import 'core-js/es6/math'; 14 | import 'core-js/es6/string'; 15 | import 'core-js/es6/date'; 16 | import 'core-js/es6/array'; 17 | import 'core-js/es6/regexp'; 18 | import 'core-js/es6/map'; 19 | import 'core-js/es6/set'; 20 | import 'core-js/es6/weak-map'; 21 | import 'core-js/es6/weak-set'; 22 | import 'core-js/es6/typed'; 23 | import 'core-js/es6/reflect'; 24 | // see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709 25 | // import 'core-js/es6/promise'; 26 | 27 | import 'core-js/es7/reflect'; 28 | import 'zone.js/dist/zone'; 29 | -------------------------------------------------------------------------------- /demo/esm/tsconfig-aot.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "noEmit": true, 7 | "declaration": false, 8 | "sourceMap": true, 9 | "inlineSources": true, 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "noImplicitAny": true, 13 | "skipLibCheck": true, 14 | "lib": [ 15 | "es2015", 16 | "dom" 17 | ] 18 | }, 19 | "include": [ 20 | "src/**/*.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /demo/esm/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "inlineSources": true, 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "noImplicitAny": true, 11 | "skipLibCheck": true, 12 | "lib": [ 13 | "es2015", 14 | "dom" 15 | ] 16 | }, 17 | "include": [ 18 | "./src/**/*.ts" 19 | ], 20 | "exclude": [ 21 | "./src/main-aot.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /demo/esm/webpack-aot.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 5 | 6 | const config = { 7 | devtool: 'source-map', 8 | entry: { 9 | polyfills: path.resolve(__dirname, 'src', 'polyfills.browser.ts'), 10 | main: path.resolve(__dirname, 'src', 'main-aot.ts') 11 | }, 12 | resolve: { 13 | extensions: ['.js', '.ts'] 14 | }, 15 | output: { 16 | path: path.resolve(__dirname, 'dist', 'aot'), 17 | filename: '[name].js' 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.ts$/, 23 | use: [ 24 | { 25 | loader: 'awesome-typescript-loader', 26 | options: { 27 | configFileName: path.resolve(__dirname, 'tsconfig.json') 28 | } 29 | } 30 | ] 31 | } 32 | ] 33 | }, 34 | plugins: [ 35 | new webpack.ProgressPlugin(), 36 | 37 | /* 38 | * Plugin: HtmlWebpackPlugin 39 | * Description: Simplifies creation of HTML files to serve your webpack bundles. 40 | * This is especially useful for webpack bundles that include a hash in the filename 41 | * which changes every compilation. 42 | * 43 | * See: https://github.com/ampedandwired/html-webpack-plugin 44 | */ 45 | new HtmlWebpackPlugin({ 46 | template: path.resolve(__dirname, 'src', 'index.ejs'), 47 | title: 'Angular Library Starter', 48 | inject: 'body' 49 | }), 50 | 51 | /** 52 | * Plugin: ContextReplacementPlugin 53 | * Description: Provides context to Angular's use of System.import 54 | * 55 | * @see: https://github.com/angular/angular/issues/11580 56 | */ 57 | new webpack.ContextReplacementPlugin( 58 | /angular(\\|\/)core(\\|\/)@angular/, 59 | path.resolve(__dirname, 'src'), 60 | {} 61 | ), 62 | 63 | /* 64 | * Plugin: CommonsChunkPlugin 65 | * Description: Shares common code between the pages. 66 | * It identifies common modules and put them into a commons chunk. 67 | * 68 | * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin 69 | * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app 70 | */ 71 | new CommonsChunkPlugin({ 72 | name: 'polyfills', 73 | chunks: ['polyfills'] 74 | }), 75 | 76 | // This enables tree shaking of the vendor modules 77 | new CommonsChunkPlugin({ 78 | name: 'vendor', 79 | chunks: ['main'], 80 | minChunks: module => /node_modules/.test(module.resource) 81 | }), 82 | 83 | // Specify the correct order the scripts will be injected in 84 | new CommonsChunkPlugin({ 85 | name: ['polyfills', 'vendor'].reverse() 86 | }), 87 | ] 88 | }; 89 | 90 | module.exports = config; 91 | -------------------------------------------------------------------------------- /demo/esm/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 5 | 6 | const config = { 7 | devtool: 'source-map', 8 | entry: { 9 | polyfills: path.resolve(__dirname, 'src', 'polyfills.browser.ts'), 10 | main: path.resolve(__dirname, 'src', 'main-jit.ts') 11 | }, 12 | resolve: { 13 | extensions: ['.js', '.ts'] 14 | }, 15 | output: { 16 | path: path.resolve(__dirname, 'dist', 'jit'), 17 | filename: '[name].js' 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.ts$/, 23 | use: [ 24 | { 25 | loader: 'awesome-typescript-loader', 26 | options: { 27 | configFileName: path.resolve(__dirname, 'tsconfig.json') 28 | } 29 | } 30 | ] 31 | } 32 | ] 33 | }, 34 | plugins: [ 35 | new webpack.ProgressPlugin(), 36 | 37 | /* 38 | * Plugin: HtmlWebpackPlugin 39 | * Description: Simplifies creation of HTML files to serve your webpack bundles. 40 | * This is especially useful for webpack bundles that include a hash in the filename 41 | * which changes every compilation. 42 | * 43 | * See: https://github.com/ampedandwired/html-webpack-plugin 44 | */ 45 | new HtmlWebpackPlugin({ 46 | template: path.resolve(__dirname, 'src', 'index.ejs'), 47 | title: 'Angular Library Starter', 48 | inject: 'body' 49 | }), 50 | 51 | /** 52 | * Plugin: ContextReplacementPlugin 53 | * Description: Provides context to Angular's use of System.import 54 | * 55 | * @see: https://github.com/angular/angular/issues/11580 56 | */ 57 | new webpack.ContextReplacementPlugin( 58 | /angular(\\|\/)core(\\|\/)@angular/, 59 | path.resolve(__dirname, 'src'), 60 | {} 61 | ), 62 | 63 | /* 64 | * Plugin: CommonsChunkPlugin 65 | * Description: Shares common code between the pages. 66 | * It identifies common modules and put them into a commons chunk. 67 | * 68 | * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin 69 | * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app 70 | */ 71 | new CommonsChunkPlugin({ 72 | name: 'polyfills', 73 | chunks: ['polyfills'] 74 | }), 75 | 76 | // This enables tree shaking of the vendor modules 77 | new CommonsChunkPlugin({ 78 | name: 'vendor', 79 | chunks: ['main'], 80 | minChunks: module => /node_modules/.test(module.resource) 81 | }), 82 | 83 | // Specify the correct order the scripts will be injected in 84 | new CommonsChunkPlugin({ 85 | name: ['polyfills', 'vendor'].reverse() 86 | }), 87 | ], 88 | 89 | devServer: { 90 | port: 8000, 91 | historyApiFallback: true, 92 | watchOptions: { 93 | aggregateTimeout: 300, 94 | poll: 1000 95 | } 96 | }, 97 | }; 98 | 99 | module.exports = config; 100 | -------------------------------------------------------------------------------- /demo/gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const copyfiles = require('copyfiles'); 3 | 4 | const LIBRARY_SRC = '../dist/**/*'; 5 | const LIBRARY_DIST = 'esm/lib'; 6 | 7 | gulp.task('copy-lib', (callback) => { 8 | copyfiles([ LIBRARY_SRC, LIBRARY_DIST ], 2, callback); 9 | }); 10 | 11 | gulp.task('copy-lib:watch', () => { 12 | gulp.watch(LIBRARY_SRC, ['copy-lib']); 13 | }); 14 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-library-seed-demo", 3 | "description": "AOT/JIT/UMD build demo of angular library seed", 4 | "license": "MIT", 5 | "scripts": { 6 | "build": "npm run build:aot && npm run build:jit && npm run build:umd", 7 | "build:aot": "npm run build:aot:compile && npm run build:aot:bundle", 8 | "build:aot:bundle": "webpack --config esm/webpack-aot.config.js --bail", 9 | "build:aot:compile": "node_modules/.bin/ngc -p esm/tsconfig-aot.json", 10 | "build:jit": "webpack --config esm/webpack.config.js --bail", 11 | "build:umd": "npm run clean:umd && copyfiles --up 2 \"../dist/index.umd.*\" umd/lib", 12 | "clean:all": "npm run clean:tmp && rimraf node_modules", 13 | "clean:tmp": "npm run clean:esm:aot && npm run clean:esm:jit && npm run clean:umd && rimraf esm/dist", 14 | "clean:esm:aot": "npm run clean:esm:tmp && rimraf esm/dist/aot", 15 | "clean:esm:jit": "npm run clean:esm:tmp && rimraf esm/dist/jit", 16 | "clean:esm:tmp": "rimraf esm/lib esm/node_modules esm/src/app/*.ngfactory.ts esm/src/app/*.ngsummary.json", 17 | "clean:umd": "rimraf umd/lib", 18 | "copy-lib": "copyfiles --up 2 \"../dist/**/*\" esm/lib", 19 | "prebuild:aot": "npm run clean:esm:aot && npm run copy-lib", 20 | "prebuild:jit": "npm run clean:esm:jit && npm run copy-lib", 21 | "prestart": "npm run clean:esm:jit && npm run copy-lib", 22 | "start": "concurrently --raw \"gulp copy-lib:watch\" \"webpack-dev-server --open --watch --config esm/webpack.config.js\"" 23 | }, 24 | "dependencies": { 25 | "@angular/common": "^4.0.0", 26 | "@angular/core": "^4.0.0", 27 | "@angular/platform-browser": "^4.0.0", 28 | "@angular/platform-browser-dynamic": "^4.0.0" 29 | }, 30 | "devDependencies": { 31 | "@angular/compiler": "^4.0.0", 32 | "@angular/compiler-cli": "^4.0.0", 33 | "awesome-typescript-loader": "^3.1.2", 34 | "concurrently": "^3.4.0", 35 | "copyfiles": "^1.2.0", 36 | "core-js": "^2.4.1", 37 | "gulp": "^3.9.1", 38 | "html-webpack-plugin": "^2.8.1", 39 | "rimraf": "^2.6.1", 40 | "rxjs": "^5.2.0", 41 | "typescript": "^2.2.0", 42 | "webpack": "^3.6.0", 43 | "webpack-dev-server": "^2.4.5", 44 | "zone.js": "^0.8.4" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /demo/umd/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | public header: string = 'UMD Demo'; 9 | } 10 | -------------------------------------------------------------------------------- /demo/umd/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | 5 | import { TickTockModule } from 'ticktock'; 6 | 7 | @NgModule({ 8 | imports: [ BrowserModule, TickTockModule ], 9 | declarations: [ AppComponent ], 10 | bootstrap: [ AppComponent ] 11 | }) 12 | export class AppModule { 13 | } 14 | -------------------------------------------------------------------------------- /demo/umd/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 | Loading... 18 | 19 | 20 | -------------------------------------------------------------------------------- /demo/umd/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /demo/umd/systemjs.config.js: -------------------------------------------------------------------------------- 1 | (function (global) { 2 | System.config({ 3 | // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER. 4 | transpiler: 'ts', 5 | typescriptOptions: { 6 | "target": "es5", 7 | "module": "system", 8 | "moduleResolution": "node", 9 | "sourceMap": true, 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "lib": ["es2015", "dom"], 13 | "noImplicitAny": true, 14 | "suppressImplicitAnyIndexErrors": true 15 | }, 16 | meta: { 17 | "typescript": { 18 | "exports": "ts" 19 | } 20 | }, 21 | paths: { 22 | 'npm:': 'https://unpkg.com/' 23 | }, 24 | map: { 25 | // Our app is within the app folder. 26 | 'app': 'app', 27 | 28 | // Angular bundles. 29 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 30 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 31 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 32 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 33 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 34 | 35 | // Third party libraries. 36 | 'rxjs': 'npm:rxjs@5.0.1', 37 | 'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js', 38 | 'typescript': 'npm:typescript@2.2.1/lib/typescript.js', 39 | 40 | 'ticktock': 'lib/index.umd.js' 41 | }, 42 | // packages tells the System loader how to load when no filename and/or no extension 43 | packages: { 44 | app: { 45 | main: 'main.ts', 46 | defaultExtension: 'ts' 47 | }, 48 | rxjs: { 49 | defaultExtension: 'js' 50 | }, 51 | ticktock: { 52 | defaultExtension: 'js' 53 | } 54 | } 55 | }); 56 | 57 | })(this); 58 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('node-sass'); 3 | const inlineTemplates = require('gulp-inline-ng2-template'); 4 | const exec = require('child_process').exec; 5 | 6 | /** 7 | * Inline templates configuration. 8 | * @see https://github.com/ludohenin/gulp-inline-ng2-template 9 | */ 10 | const INLINE_TEMPLATES = { 11 | SRC: './src/**/*.ts', 12 | DIST: './tmp/src-inlined', 13 | CONFIG: { 14 | base: '/src', 15 | target: 'es6', 16 | useRelativePaths: true, 17 | styleProcessor: compileSass 18 | } 19 | }; 20 | 21 | /** 22 | * Inline external HTML and SCSS templates into Angular component files. 23 | * @see: https://github.com/ludohenin/gulp-inline-ng2-template 24 | */ 25 | gulp.task('inline-templates', () => { 26 | return gulp.src(INLINE_TEMPLATES.SRC) 27 | .pipe(inlineTemplates(INLINE_TEMPLATES.CONFIG)) 28 | .pipe(gulp.dest(INLINE_TEMPLATES.DIST)); 29 | }); 30 | 31 | /** 32 | * Build ESM by running npm task. 33 | * This is a temporary solution until ngc is supported --watch mode. 34 | * @see: https://github.com/angular/angular/issues/12867 35 | */ 36 | gulp.task('build:esm', ['inline-templates'], (callback) => { 37 | exec('npm run ngcompile', function (error, stdout, stderr) { 38 | console.log(stdout, stderr); 39 | callback(error) 40 | }); 41 | }); 42 | 43 | /** 44 | * Implements ESM build watch mode. 45 | * This is a temporary solution until ngc is supported --watch mode. 46 | * @see: https://github.com/angular/angular/issues/12867 47 | */ 48 | gulp.task('build:esm:watch', ['build:esm'], () => { 49 | gulp.watch('src/**/*', ['build:esm']); 50 | }); 51 | 52 | /** 53 | * Compile SASS to CSS. 54 | * @see https://github.com/ludohenin/gulp-inline-ng2-template 55 | * @see https://github.com/sass/node-sass 56 | */ 57 | function compileSass(path, ext, file, callback) { 58 | let compiledCss = sass.renderSync({ 59 | file: path, 60 | outputStyle: 'compressed', 61 | }); 62 | callback(null, compiledCss.css); 63 | } 64 | -------------------------------------------------------------------------------- /karma-test-entry.ts: -------------------------------------------------------------------------------- 1 | import 'core-js'; 2 | import 'rxjs/Rx'; 3 | import 'zone.js/dist/zone'; 4 | import 'zone.js/dist/long-stack-trace-zone'; 5 | import 'zone.js/dist/async-test'; 6 | import 'zone.js/dist/fake-async-test'; 7 | import 'zone.js/dist/sync-test'; 8 | import 'zone.js/dist/proxy'; 9 | import 'zone.js/dist/jasmine-patch'; 10 | 11 | import { TestBed } from '@angular/core/testing'; 12 | 13 | import { 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting 16 | } from '@angular/platform-browser-dynamic/testing'; 17 | 18 | TestBed.initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | 23 | const testsContext: any = require.context('./src', true, /\.spec/); 24 | testsContext.keys().forEach(testsContext); 25 | -------------------------------------------------------------------------------- /karma.conf.ts: -------------------------------------------------------------------------------- 1 | import webpackTestConfig from './webpack-test.config'; 2 | import { ConfigOptions } from 'karma'; 3 | 4 | export default (config) => { 5 | config.set({ 6 | // Base path that will be used to resolve all patterns (eg. files, exclude). 7 | basePath: './', 8 | 9 | // Frameworks to use. 10 | // Available frameworks: https://npmjs.org/browse/keyword/karma-adapter 11 | frameworks: ['jasmine'], 12 | 13 | // List of files to load in the browser. 14 | files: [ 15 | 'karma-test-entry.ts' 16 | ], 17 | 18 | // Preprocess matching files before serving them to the browser. 19 | // Available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 20 | preprocessors: { 21 | 'karma-test-entry.ts': ['webpack', 'sourcemap'] 22 | }, 23 | 24 | webpack: webpackTestConfig, 25 | 26 | // Webpack please don't spam the console when running in karma! 27 | webpackMiddleware: { 28 | noInfo: true, 29 | // Use stats to turn off verbose output. 30 | stats: { 31 | chunks: false 32 | } 33 | }, 34 | 35 | mime: { 36 | 'text/x-typescript': [ 'ts' ] 37 | }, 38 | 39 | coverageIstanbulReporter: { 40 | reports: ['text-summary', 'html', 'lcovonly'], 41 | fixWebpackSourcePaths: true 42 | }, 43 | 44 | // Test results reporter to use. 45 | // Possible values: 'dots', 'progress'. 46 | // Available reporters: https://npmjs.org/browse/keyword/karma-reporter 47 | reporters: ['mocha', 'coverage-istanbul'], 48 | 49 | // Level of logging 50 | // Possible values: 51 | // - config.LOG_DISABLE 52 | // - config.LOG_ERROR 53 | // - config.LOG_WARN 54 | // - config.LOG_INFO 55 | // - config.LOG_DEBUG 56 | logLevel: config.LOG_WARN, 57 | 58 | // Start these browsers. 59 | // Available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 60 | browsers: ['Chrome'], 61 | 62 | browserConsoleLogOptions: { 63 | terminal: true, 64 | level: 'log' 65 | }, 66 | 67 | singleRun: true, 68 | colors: true 69 | } as ConfigOptions); 70 | }; 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-library-seed", 3 | "version": "0.0.20", 4 | "description": "Angular library seed", 5 | "main": "./dist/index.umd.js", 6 | "module": "./dist/index.js", 7 | "typings": "./dist/index.d.ts", 8 | "license": "MIT", 9 | "keywords": [ 10 | "angular", 11 | "angular4", 12 | "aot", 13 | "aot-compatible", 14 | "aot-compilation", 15 | "library", 16 | "ng", 17 | "seed", 18 | "starter", 19 | "tick-tock", 20 | "typescript" 21 | ], 22 | "author": { 23 | "name": "Oleksii Trekhleb", 24 | "url": "https://www.linkedin.com/in/trekhleb/" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/trekhleb/angular-library-seed.git" 29 | }, 30 | "bugs": { 31 | "url": "https://github.com/trekhleb/angular-library-seed/issues" 32 | }, 33 | "homepage": "https://github.com/trekhleb/angular-library-seed#readme", 34 | "scripts": { 35 | "build": "npm run build:esm && npm run build:umd", 36 | "build:esm": "gulp inline-templates && npm run ngcompile", 37 | "build:esm:watch": "gulp build:esm:watch", 38 | "build:umd": "webpack --config webpack-umd.config.ts", 39 | "build:umd:watch": "npm run build:umd -- --watch", 40 | "build:watch": "concurrently --raw \"npm run build:umd:watch\" \"npm run build:esm:watch\"", 41 | "ci": "npm run lint && npm run test && npm run build && npm run docs", 42 | "clean:all": "npm run clean:tmp && rimraf node_modules", 43 | "clean:tmp": "rimraf coverage dist tmp docs", 44 | "codecov": "cat coverage/lcov.info | codecov", 45 | "docs": "compodoc -p tsconfig.json -d docs --disableCoverage --disablePrivateOrInternalSupport", 46 | "explorer": "source-map-explorer ./dist/index.umd.js", 47 | "gh-pages": "rimraf docs && npm run docs && gh-pages -d docs", 48 | "lint": "npm run tslint 'src/**/*.ts'", 49 | "ngcompile": "node_modules/.bin/ngc -p tsconfig-aot.json", 50 | "postversion": "git push && git push --tags", 51 | "prebuild": "rimraf dist tmp", 52 | "prebuild:watch": "rimraf dist tmp", 53 | "prepublishOnly": "npm run ci", 54 | "preversion": "npm run ci", 55 | "test": "karma start", 56 | "test:watch": "karma start --auto-watch --no-single-run", 57 | "tslint": "tslint" 58 | }, 59 | "dependencies": {}, 60 | "peerDependencies": { 61 | "@angular/common": "^4.0.0", 62 | "@angular/core": "^4.0.0" 63 | }, 64 | "devDependencies": { 65 | "@angular/common": "^4.0.0", 66 | "@angular/compiler": "^4.0.0", 67 | "@angular/compiler-cli": "^4.0.0", 68 | "@angular/core": "^4.0.0", 69 | "@angular/platform-browser": "^4.0.0", 70 | "@angular/platform-browser-dynamic": "^4.0.0", 71 | "@compodoc/compodoc": "^1.0.0-beta.9", 72 | "@types/jasmine": "^2.5.47", 73 | "@types/karma": "^1.7.0", 74 | "@types/node": "^8.0.0", 75 | "@types/webpack": "^3.0.13", 76 | "@types/webpack-env": "^1.13.0", 77 | "angular2-template-loader": "^0.6.2", 78 | "awesome-typescript-loader": "^3.1.3", 79 | "codecov": "^2.2.0", 80 | "codelyzer": "^3.0.1", 81 | "concurrently": "^3.4.0", 82 | "css-loader": "^0.28.1", 83 | "gh-pages": "^1.0.0", 84 | "gulp": "^3.9.1", 85 | "gulp-inline-ng2-template": "^4.0.0", 86 | "istanbul-instrumenter-loader": "^3.0.0", 87 | "jasmine-core": "^2.6.1", 88 | "json-loader": "^0.5.4", 89 | "karma": "^1.7.0", 90 | "karma-chrome-launcher": "^2.1.1", 91 | "karma-coverage-istanbul-reporter": "^1.2.1", 92 | "karma-jasmine": "^1.1.0", 93 | "karma-mocha-reporter": "^2.2.3", 94 | "karma-sourcemap-loader": "^0.3.7", 95 | "karma-webpack": "^2.0.3", 96 | "node-sass": "^4.5.2", 97 | "raw-loader": "^0.5.1", 98 | "rimraf": "^2.6.1", 99 | "rxjs": "^5.3.1", 100 | "sass-loader": "^6.0.5", 101 | "source-map-explorer": "^1.3.3", 102 | "to-string-loader": "^1.1.5", 103 | "ts-node": "^3.0.4", 104 | "tslint": "^5.2.0", 105 | "typescript": "^2.3.2", 106 | "webpack": "^3.6.0", 107 | "webpack-angular-externals": "^1.0.2", 108 | "webpack-rxjs-externals": "^1.0.0", 109 | "zone.js": "^0.8.10" 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tick-tock'; 2 | -------------------------------------------------------------------------------- /src/components/tick-tock/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tick-tock.component'; 2 | -------------------------------------------------------------------------------- /src/components/tick-tock/tick-tock.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ currentTime }} 3 |
4 | -------------------------------------------------------------------------------- /src/components/tick-tock/tick-tock.component.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:100'); 2 | 3 | // Timer styles. 4 | .tick-tock-time { 5 | font-size: 2em; 6 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/tick-tock/tick-tock.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | async, 3 | ComponentFixture, 4 | TestBed 5 | } from '@angular/core/testing'; 6 | 7 | import { By } from '@angular/platform-browser'; 8 | 9 | import { TickTockModule } from '../../'; 10 | import { TickTockComponent } from './tick-tock.component'; 11 | 12 | describe('TickTockComponent', () => { 13 | const timeStringFormat = /[0-9]{2}:[0-9]{2}:[0-9]{2}/i; 14 | let componentFixture: ComponentFixture; 15 | let componentInstance: TickTockComponent; 16 | 17 | // Asynchronous beforeEach. 18 | beforeEach( 19 | async(() => { 20 | TestBed.configureTestingModule({ 21 | imports: [ TickTockModule ] 22 | }).compileComponents().then(() => { /* Don't do anything */ }); 23 | }) 24 | ); 25 | 26 | // Synchronous BeforeEach. 27 | beforeEach(() => { 28 | componentFixture = TestBed.createComponent(TickTockComponent); 29 | componentInstance = componentFixture.componentInstance; 30 | }); 31 | 32 | it('should display time string', (done) => { 33 | componentFixture.detectChanges(); 34 | 35 | setInterval(() => { 36 | componentFixture.detectChanges(); 37 | 38 | const tickTockPageElement = componentFixture.debugElement.queryAll(By.css('.tick-tock-time')); 39 | const displayedTimeText = tickTockPageElement[0].nativeElement.innerText; 40 | 41 | expect(tickTockPageElement).toBeDefined(); 42 | expect(tickTockPageElement.length).toEqual(1); 43 | expect(displayedTimeText.length).toEqual(8); 44 | expect(timeStringFormat.test(displayedTimeText)).toBeTruthy(); 45 | 46 | done(); 47 | }, 1000); 48 | }); 49 | }); 50 | -------------------------------------------------------------------------------- /src/components/tick-tock/tick-tock.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | import { TickTockService } from '../../services'; 4 | 5 | @Component({ 6 | selector: 'tick-tock', 7 | styleUrls: ['./tick-tock.component.scss'], 8 | templateUrl: './tick-tock.component.html', 9 | }) 10 | export class TickTockComponent implements OnInit { 11 | // Current time string. 12 | public currentTime: string; 13 | 14 | /** 15 | * Component constructor with injected dependencies. 16 | * @param tickTockService 17 | */ 18 | public constructor( 19 | private tickTockService: TickTockService 20 | ) {} 21 | 22 | /** 23 | * Implements onInit event handler. 24 | */ 25 | public ngOnInit(): void { 26 | this.tickTockService.getTick().subscribe( 27 | (timeString) => this.currentTime = timeString 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { TickTockService } from './services'; 2 | export { TickTockComponent } from './components'; 3 | export { TickTockModule } from './tick-tock.module'; 4 | -------------------------------------------------------------------------------- /src/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tick-tock'; 2 | -------------------------------------------------------------------------------- /src/services/tick-tock/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tick-tock.service'; 2 | -------------------------------------------------------------------------------- /src/services/tick-tock/tick-tock.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TickTockService } from './tick-tock.service'; 2 | 3 | describe('TickTockService', () => { 4 | let tickTockService: TickTockService; 5 | 6 | beforeEach(() => { 7 | tickTockService = new TickTockService(); 8 | }); 9 | 10 | it('should return observable with time string', (done) => { 11 | const timeStringFormat = /[0-9]{2}:[0-9]{2}:[0-9]{2}/i; 12 | 13 | tickTockService.getTick().subscribe( 14 | (timeString) => { 15 | expect(timeStringFormat.test(timeString)).toBeTruthy( 16 | 'Time string should have hh:mm:ss format' 17 | ); 18 | 19 | // Stop asynchronous test. 20 | done(); 21 | } 22 | ); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/services/tick-tock/tick-tock.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable } from 'rxjs/Rx'; 3 | 4 | /** 5 | * TickTockService class. 6 | */ 7 | @Injectable() 8 | export class TickTockService { 9 | 10 | /** 11 | * Extend time value with zero if required. 12 | * @param value 13 | * @returns {string} 14 | */ 15 | private static formatTimeNumber(value: number): string { 16 | const stringValue = value.toString(); 17 | return ('0' + stringValue).slice(-2); 18 | } 19 | 20 | /** 21 | * Get current time string. 22 | * @returns {string} 23 | */ 24 | private static getNowString(): string { 25 | const date = new Date(); 26 | 27 | const hours = TickTockService.formatTimeNumber(date.getHours()); 28 | const minutes = TickTockService.formatTimeNumber(date.getMinutes()); 29 | const seconds = TickTockService.formatTimeNumber(date.getSeconds()); 30 | 31 | return `${hours}:${minutes}:${seconds}`; 32 | } 33 | 34 | /** 35 | * Set up timer frequency. 36 | * @type {number} 37 | */ 38 | private readonly TIMEOUT: number = 1000; 39 | 40 | /** 41 | * Get current time observable. 42 | * @returns Observable 43 | */ 44 | public getTick(): Observable { 45 | return Observable 46 | .timer(0, this.TIMEOUT) 47 | .map((tick) => TickTockService.getNowString()); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/tick-tock.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { TickTockComponent } from './components'; 3 | import { TickTockService } from './services'; 4 | 5 | @NgModule({ 6 | providers: [ 7 | TickTockService, 8 | ], 9 | declarations: [ 10 | TickTockComponent, 11 | ], 12 | exports: [ 13 | TickTockComponent, 14 | ] 15 | }) 16 | export class TickTockModule { 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig-aot.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "declaration": true, 8 | "removeComments": false, 9 | "noImplicitAny": true, 10 | "experimentalDecorators": true, 11 | "emitDecoratorMetadata": true, 12 | "allowUnreachableCode": false, 13 | "allowUnusedLabels": false, 14 | "pretty": true, 15 | "stripInternal": true, 16 | "skipLibCheck": true, 17 | "outDir": "dist", 18 | "rootDir": "./tmp/src-inlined" 19 | }, 20 | "files": [ 21 | "./tmp/src-inlined/index.ts" 22 | ], 23 | "angularCompilerOptions": { 24 | "genDir": "dist", 25 | "debug": false, 26 | "skipTemplateCodegen": true, 27 | "skipMetadataEmit": false, 28 | "strictMetadataEmit": true 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "noEmit": true, 7 | "sourceMap": true, 8 | "declaration": false, 9 | "noImplicitAny": false, 10 | "experimentalDecorators": true, 11 | "emitDecoratorMetadata": true, 12 | "lib": [ 13 | "es2015", 14 | "dom" 15 | ], 16 | "typeRoots" : [ 17 | "./node_modules/@types" 18 | ], 19 | "types": [ 20 | "jasmine", 21 | "karma", 22 | "node", 23 | "webpack", 24 | "webpack-env" 25 | ] 26 | }, 27 | "include": [ 28 | "src/**/*.ts" 29 | ], 30 | "exclude": [ 31 | "src/**/*.spec.ts", 32 | "node_modules", 33 | "demo", 34 | "dist" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:recommended"], 3 | "rulesDirectory": ["node_modules/codelyzer"], 4 | "rules": { 5 | "component-class-suffix": true, 6 | "directive-class-suffix": true, 7 | "interface-name": false, 8 | "invoke-injectable": true, 9 | "max-line-length": [true, 100], 10 | "no-access-missing-member": false, 11 | "no-attribute-parameter-decorator": true, 12 | "no-console": [true, "time", "timeEnd", "trace"], 13 | "no-forward-ref": true, 14 | "no-input-rename": true, 15 | "no-output-rename": true, 16 | "no-string-literal": false, 17 | "object-literal-sort-keys": false, 18 | "ordered-imports": false, 19 | "pipe-naming": [true, "camelCase", "my"], 20 | "quotemark": [true, "single", "avoid-escape"], 21 | "trailing-comma": [false, {"multiline": "always", "singleline": "never"}], 22 | "use-host-property-decorator": true, 23 | "use-input-property-decorator": true, 24 | "use-output-property-decorator": true, 25 | "use-pipe-transform-interface": true, 26 | "variable-name": [true, "allow-leading-underscore", "ban-keywords", "check-format"] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /webpack-test.config.ts: -------------------------------------------------------------------------------- 1 | import * as webpack from 'webpack'; 2 | import * as path from 'path'; 3 | 4 | export default { 5 | resolve: { 6 | extensions: [ '.ts', '.js', '.json' ] 7 | }, 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.ts$/, 12 | use: [ 13 | { 14 | loader: 'awesome-typescript-loader', 15 | options: { 16 | configFileName: 'tsconfig.json' 17 | } 18 | }, 19 | { 20 | loader: 'angular2-template-loader' 21 | } 22 | ], 23 | exclude: [ 24 | /\.e2e\.ts$/, 25 | /node_modules/ 26 | ] 27 | }, 28 | 29 | { 30 | test: /.ts$/, 31 | exclude: /(node_modules|\.spec\.ts|\.e2e\.ts$)/, 32 | loader: 'istanbul-instrumenter-loader', 33 | enforce: 'post' 34 | }, 35 | 36 | { 37 | test: /\.json$/, 38 | use: 'json-loader' 39 | }, 40 | 41 | { 42 | test: /\.css$/, 43 | use: ['to-string-loader', 'css-loader'] 44 | }, 45 | 46 | { 47 | test: /\.scss$/, 48 | use: ['to-string-loader', 'css-loader', 'sass-loader'] 49 | }, 50 | 51 | { 52 | test: /\.html$/, 53 | use: 'raw-loader' 54 | } 55 | ] 56 | }, 57 | plugins: [ 58 | new webpack.SourceMapDevToolPlugin({ 59 | filename: null, 60 | test: /\.(ts|js)($|\?)/i 61 | }), 62 | 63 | new webpack.ContextReplacementPlugin( 64 | /angular(\\|\/)core(\\|\/)@angular/, 65 | path.join(__dirname, 'src') 66 | ), 67 | 68 | new webpack.NoEmitOnErrorsPlugin() 69 | ] 70 | } as webpack.Configuration; 71 | -------------------------------------------------------------------------------- /webpack-umd.config.ts: -------------------------------------------------------------------------------- 1 | import * as webpack from 'webpack'; 2 | import * as path from 'path'; 3 | import * as fs from 'fs'; 4 | import * as angularExternals from 'webpack-angular-externals'; 5 | import * as rxjsExternals from 'webpack-rxjs-externals'; 6 | 7 | const pkg = JSON.parse(fs.readFileSync('./package.json').toString()); 8 | 9 | export default { 10 | entry: { 11 | 'index.umd': './src/index.ts', 12 | 'index.umd.min': './src/index.ts', 13 | }, 14 | output: { 15 | path: path.join(__dirname, 'dist'), 16 | filename: '[name].js', 17 | libraryTarget: 'umd', 18 | library: 'ticktock' 19 | }, 20 | resolve: { 21 | extensions: [ '.ts', '.js', '.json' ] 22 | }, 23 | externals: [ 24 | angularExternals(), 25 | rxjsExternals() 26 | ], 27 | devtool: 'source-map', 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.ts$/, 32 | use: [ 33 | { 34 | loader: 'awesome-typescript-loader', 35 | options: { 36 | configFileName: 'tsconfig.json' 37 | } 38 | }, 39 | { 40 | loader: 'angular2-template-loader' 41 | } 42 | ], 43 | exclude: [ 44 | /node_modules/, 45 | /\.(spec|e2e)\.ts$/ 46 | ] 47 | }, 48 | 49 | { 50 | test: /\.json$/, 51 | use: 'json-loader' 52 | }, 53 | 54 | { 55 | test: /\.css$/, 56 | use: ['to-string-loader', 'css-loader'] 57 | }, 58 | 59 | { 60 | test: /\.scss$/, 61 | use: ['to-string-loader', 'css-loader', 'sass-loader'] 62 | }, 63 | 64 | { 65 | test: /\.html$/, 66 | use: 'raw-loader' 67 | } 68 | ] 69 | }, 70 | plugins: [ 71 | new webpack.ContextReplacementPlugin( 72 | /angular(\\|\/)core(\\|\/)@angular/, 73 | path.join(__dirname, 'src') 74 | ), 75 | 76 | new webpack.optimize.UglifyJsPlugin({ 77 | include: /\.min\.js$/, 78 | sourceMap: true 79 | }), 80 | 81 | new webpack.BannerPlugin({ 82 | banner: ` 83 | /** 84 | * ${pkg.name} - ${pkg.description} 85 | * @version v${pkg.version} 86 | * @author ${pkg.author.name} 87 | * @link ${pkg.homepage} 88 | * @license ${pkg.license} 89 | */ 90 | `.trim(), 91 | raw: true, 92 | entryOnly: true 93 | }) 94 | 95 | ] 96 | } as webpack.Configuration; 97 | --------------------------------------------------------------------------------