A ng4 test module to check if it builds well with ng4 projects
npm install ng4-test-pkgThis starter allows you to create a library for Angular 4+ apps written in _TypeScript_, _ES6_ or _ES5_.
The project is based on the official _Angular_ packages.
Get the Changelog.
2. Rename ng4-test-pkg and ng4TestPkg everywhere to my-library and myLibrary.
3. Update in package.json file:
- version: Semantic Versioning
- description
- urls
- packages
and run npm install.
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 user can import only those he needs and optimize _Tree shaking_ of his app.
6. Update in rollup.config.js file globals external dependencies with those that actually you use.
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.
_Karma_ is configured to use _webpack_ only for *.ts files.
tests folder, and unit tests that are in src folder: Shell
npm test
`4 Building
The following command:
Shell
npm run build
`
- starts _TSLint_ with _Codelyzer_
- starts _AoT compilation_ using _ngc_ compiler
- creates folder with all the files of distributionTo test locally the npm package:
`Shell
npm run pack-lib
`
Then you can install it in an app to test it:
Shell
npm install [path]my-library-[version].tgz
`5 Publishing
Before publishing the first time:
- you can register your library on Travis CI: you have already configured file
- you must have a user on the _npm_ registry: Publishing npm packages`Shell
npm run publish-lib
`6 Documentation
To generate the documentation, this starter uses compodoc:
Shell
npm run compodoc
npm run compodoc-serve
`7 Using the library
$3
Shell
npm install my-library --save
`
$3
#### Using SystemJS configuration
JavaScript
System.config({
map: {
'my-library': 'node_modules/my-library/bundles/my-library.umd.js'
}
});
`
#### Angular-CLI
No need to set up anything, just import it in your code.
#### Rollup or webpack
No need to set up anything, just import it in your code.
#### Plain JavaScript
Include the bundle in your index.html:
`Html
`
and use global namespace.$3
The library is compatible with _AoT compilation_.8 What it is important to know
1. package.json *
legacy module format
* "module": "./bundles/ng4-test-pkg.es5.js" flat _ES_ module, for using module bundlers such as _Rollup_ or _webpack_:
package module
* "es2015": "./bundles/ng4-test-pkg.js" _ES2015_ flat _ESM_ format, experimental _ES2015_ build
* "peerDependencies" the packages and their versions required by the library when it will be installed2.
tsconfig.json file used by _TypeScript_ compiler * Compiler options:
*
"strict": true enables _TypeScript_ strict master option3.
tsconfig-build.json file used by _ngc_ compiler * Compiler options:
*
"declaration": true to emit _TypeScript_ declaration files
* "module": "es2015" & "target": "es2015" are used by _Rollup_ to create the _ES2015_ bundle * Angular Compiler Options:
*
"skipTemplateCodegen": true, skips generating _AoT_ files
* "annotateForClosureCompiler": true for compatibility with _Google Closure compiler_
* "strictMetadataEmit": true without emitting metadata files, the library will not compatible with _AoT compilation_4.
rollup.config.js file used by _Rollup_ *
format: 'umd' the _Universal Module Definition_ pattern is used by _Angular_ for its bundles
* moduleName: 'ng.ng4TestPkg' defines the global namespace used by _JavaScript_ apps
* external & globals declare the external packages5. Server-side prerendering
If you want the library will be compatible with server-side prerendering:
*
window, document, navigator` and other browser types do not exist on the server