Skip to content
This repository has been archived by the owner on Jun 22, 2021. It is now read-only.

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
robisim74 committed May 4, 2018
1 parent b444397 commit 9dff613
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 80 deletions.
62 changes: 0 additions & 62 deletions INLINING.md

This file was deleted.

38 changes: 22 additions & 16 deletions README.md
Expand Up @@ -2,7 +2,7 @@
[![Build Status](https://travis-ci.org/robisim74/angular-library-starter.svg?branch=master)](https://travis-ci.org/robisim74/angular-library-starter)
>Build an Angular library compatible with AoT compilation & Tree shaking like an official package.
This starter allows you to create a library for **Angular v5** apps written in _TypeScript_, _ES6_ or _ES5_.
This starter allows you to create a library for **Angular v6** apps written in _TypeScript_, _ES6_ or _ES5_.
The project is based on the official _Angular_ packages.

Get the [Changelog](https://github.com/robisim74/angular-library-starter/blob/master/CHANGELOG.md).
Expand Down Expand Up @@ -46,19 +46,19 @@ Get the [Changelog](https://github.com/robisim74/angular-library-starter/blob/ma
- version: [Semantic Versioning](http://semver.org/)
- description
- urls
- packages (optional): make sure you use a version of _TypeScript_ compatible with _Angular Compiler_ (_@angular/compiler-cli@5.0.0_ requires a peer of _typescript@>=2.4.2 <2.5_)
- packages (optional): make sure you use a version of _TypeScript_ compatible with _Angular Compiler_

and run `npm install`.

4. Create your classes in `src` folder, and export public classes in `my-library.ts`: if you have _components_, note that this starter supports only _inline templates & styles_ as the official Angular building process.
4. Create your classes in `src` folder, and export public classes in `my-library.ts`.

5. You can create only one _module_ for the whole library:
I suggest you create different _modules_ for different functions,
so that the host app can only import the modules it uses, and optimize its _Tree shaking_.

6. Update in `rollup.config.js` file `globals` external dependencies with those that actually you use to build the _umd_ bundle.

7. Create unit & integration tests in `tests` folder, or unit tests next to the things they test in `src` folder, always using `.spec.ts` extension: note that _Karma_ is configured to use _webpack_ only for `*.ts` files.
7. Create unit & integration tests in `tests` folder, or unit tests next to the things they test in `src` folder, always using `.spec.ts` extension.

## <a name="3"></a>3 Testing
The following command runs unit & integration tests that are in the `tests` folder (you can change the folder in `spec.bundle.js` file):
Expand All @@ -67,7 +67,7 @@ npm test
```
or in watch mode:
```Shell
npm test:watch
npm run test:watch
```
It also reports coverage using _Istanbul_.

Expand All @@ -78,7 +78,7 @@ npm run build
```
- starts _TSLint_ with _Codelyzer_ using _Angular TSLint Preset_
- starts _AoT compilation_ using _ngc_ compiler
- creates `dist` folder with all the files of distribution, following _Angular Package Format (APF) v5.0_:
- creates `dist` folder with all the files of distribution, following _Angular Package Format (APF) v6.0_:
```
└── dist
├── bundles
Expand All @@ -87,9 +87,15 @@ npm run build
| ├── my-library.umd.min.js
| └── my-library.umd.min.js.map
├── esm5
| ├── **/*.js
| └── **/*.js.map
├── esm2015
| ├── **/*.js
| └── **/*.js.map
├── fesm5
| ├── my-library.js
| └── my-library.js.map
├── esm2015
├── fesm2015
| ├── my-library.js
| └── my-library.js.map
├── src
Expand Down Expand Up @@ -158,9 +164,9 @@ The library is compatible with _AoT compilation_.
1. `package.json`

* `"main": "./bundles/angular-library-starter.umd.js"` legacy module format
* `"module": "./esm5/angular-library-starter.js"` flat _ES_ module, for using module bundlers such as _Rollup_ or _webpack_:
[package module](https://github.com/rollup/rollup/wiki/pkg.module)
* `"es2015": "./esm2015/angular-library-starter.js"` _ES2015_ flat _ESM_ format, experimental _ES2015_ build
* `"module": "./esm5/angular-library-starter.js"` flat _ES_ module, for using module bundlers such as _Rollup_ or _webpack_
* `"es2015": "./esm2015/angular-library-starter.js"` _ES2015_ flat _ESM_ format
* `"typings"` declaration files for _TypeScript_ compiler
* `"peerDependencies"` the packages and their versions required by the library when it will be installed

2. `tsconfig.json` file used by _TypeScript_ compiler
Expand All @@ -175,7 +181,8 @@ The library is compatible with _AoT compilation_.
* `"module": "es2015"` & `"target": "es2015"` are used by _Rollup_ to create the _ES2015_ bundle

* Angular Compiler Options:
* `"skipTemplateCodegen": true,` skips generating _AoT_ files
* `"enableResourceInlining": true` inlining of templates & styles
* `"skipTemplateCodegen": true` skips generating _AoT_ files
* `"annotateForClosureCompiler": true` for compatibility with _Google Closure compiler_
* `"strictMetadataEmit": true` without emitting metadata files, the library will not be compatible with _AoT compilation_: it is intended to report syntax errors immediately rather than produce a _.metadata.json_ file with errors
* `"flatModuleId": "@scope/package"` full package name has to include scope as well, otherwise AOT compilation will fail in the consumed application
Expand All @@ -193,11 +200,7 @@ The library is compatible with _AoT compilation_.
* don't manipulate the _nativeElement_ directly

## <a name="9"></a>9 Inlining of templates and stylesheets
From _Angular Package Format v5.0_:

> Component libraries are typically implemented using stylesheets and html templates stored in separate files. While it's not required, we suggest that component authors inline the templates and stylesheets into their FESM files as well as *.metadata.json files by replacing the stylesheetUrls and templateUrl with stylesheets and template metadata properties respectively. This simplifies consumption of the components by application developers.
_ngc_ compiler still does not support inlining of templates & styles. But if you want, you can follow this suggestion: [Inlining of templates and stylesheets](https://github.com/robisim74/angular-library-starter/blob/master/INLINING.md).
Now _ngc_ compiler supports inlining of templates & styles. Moreover, this starter allows you to use `.scss` _sass_ files. If you need, you can use different pre-processors.

## Built with this starter
- [angular-l10n](https://github.com/robisim74/angular-l10n) *An Angular library to translate messages, dates and numbers*
Expand All @@ -209,6 +212,9 @@ _ngc_ compiler still does not support inlining of templates & styles. But if you
- [ngx-store](https://github.com/zoomsphere/ngx-store) *Angular Storage library for managing `localStorage`, `sessionStorage` and cookies, allowing to watch storage changes. Includes easy-to-use decorators, services and API based on builder pattern.*

## Previous versions
- **Angular v5**
- [Branch](https://github.com/robisim74/angular-library-starter/tree/angular_v5)

- **Angular v4**
- [Branch](https://github.com/robisim74/angular-library-starter/tree/angular_v4)

Expand Down
1 change: 0 additions & 1 deletion rollup.es.config.js
Expand Up @@ -12,7 +12,6 @@ export default {
sourcemaps(),
license({
sourceMap: true,

banner: {
file: path.join(__dirname, 'license-banner.txt'),
encoding: 'utf-8',
Expand Down
2 changes: 1 addition & 1 deletion tests/services/sum.service.spec.ts
Expand Up @@ -12,7 +12,7 @@ describe('SumService', () => {
});
});

it('should be calculate the sum',
it('should calculate the sum',
inject([SumService],
(sumService: SumService) => {
sumService.calculate(45, 78, 90, 674);
Expand Down

0 comments on commit 9dff613

Please sign in to comment.