diff --git a/INLINING.md b/INLINING.md deleted file mode 100644 index 514e520..0000000 --- a/INLINING.md +++ /dev/null @@ -1,62 +0,0 @@ -## Inlining of templates and stylesheets - -To use external templates & stylesheets, you can: -- process your `scss` files (if you have them) -- use an external library (or a custom function) to inline the `html/css` files - -Following are the steps to adapt the library to the use of external templates and stylesheets (thanks to Paul Ryan @paullryan for his suggestion): - -- Install the following packages: - - ``` - npm i node-sass --save-dev - ``` - ``` - npm i angular2-inline-template-style --save-dev - ``` - > Note that you could use different packages. - -- `build.js` file: - - Add the `BUILD_DIR` constant: - ``` - const BUILD_DIR = `build`; - ``` - Add to the start: - ``` - shell.rm(`-Rf`, `${BUILD_DIR}/**`); - shell.mkdir(`-p`, `./${BUILD_DIR}`); - ``` - Add before the _Aot Compilation_: - ``` - /* Process scss files */ - shell.echo(`Process scss files`); - shell.cp(`-Rf`, [`src`, `*.ts`, `*.json`], `${BUILD_DIR}`); - shell.exec(`node-sass -r ${BUILD_DIR} -o ${BUILD_DIR}`); - shell.rm(`-Rf`, `${BUILD_DIR}/**/*.scss`); - shell.ls(`${BUILD_DIR}/**/*.css`).forEach(function (file) { - shell.mv(file, file.replace('.css', '.scss')); - }); - - /* Inline templates & stylesheets */ - shell.echo(`Inline templates & stylesheets`); - shell.exec(`ng2-inline -b ${BUILD_DIR} --silent --relative --compress -o . \"${BUILD_DIR}/**/*.ts\"`); - ``` - > Note that you could skip the processing of `scss` files if you don't have them. - - Then change all `ngc -p tsconfig-build.json` with `ngc -p ${BUILD_DIR}/tsconfig-build.json` and finally remove the `build` folder: - ``` - shell.rm(`-Rf`, `${BUILD_DIR}`); - ``` - -- `tsconfig-build.js` file: - - Change: - - - `"node_modules/@angular/*"` => `"../node_modules/@angular/*"` - - `"dist"` => `"../dist"` - - `"node_modules/zone.js/dist/zone.js.d.ts"` => `"../node_modules/zone.js/dist/zone.js.d.ts"` - -> After bundling, make sure that your bundles & `metadata.json` contain the inline templates & styles. - -> If you want test your components that use external templates & stylesheets, you must also update the _webpack_ configuration in _karma.conf.js_ file. diff --git a/README.md b/README.md index 487ae3f..5788137 100644 --- a/README.md +++ b/README.md @@ -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). @@ -46,11 +46,11 @@ 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, @@ -58,7 +58,7 @@ so that the host app can only import the modules it uses, and optimize its _Tree 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. ## 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): @@ -67,7 +67,7 @@ npm test ``` or in watch mode: ```Shell -npm test:watch +npm run test:watch ``` It also reports coverage using _Istanbul_. @@ -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 @@ -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 @@ -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 @@ -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 @@ -193,11 +200,7 @@ The library is compatible with _AoT compilation_. * don't manipulate the _nativeElement_ directly ## 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* @@ -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) diff --git a/rollup.es.config.js b/rollup.es.config.js index 7dcaf56..560833a 100644 --- a/rollup.es.config.js +++ b/rollup.es.config.js @@ -12,7 +12,6 @@ export default { sourcemaps(), license({ sourceMap: true, - banner: { file: path.join(__dirname, 'license-banner.txt'), encoding: 'utf-8', diff --git a/tests/services/sum.service.spec.ts b/tests/services/sum.service.spec.ts index 61f0cd6..4953cff 100644 --- a/tests/services/sum.service.spec.ts +++ b/tests/services/sum.service.spec.ts @@ -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);