diff --git a/README.md b/README.md index 7d71796fa..0875db922 100644 --- a/README.md +++ b/README.md @@ -191,6 +191,21 @@ For example, the following would use `index.ts` as the secondary entry point: } ``` +##### How do I use es2016 or es2017 features in my TypeScript library? + +You can change the TypeScript language level support in tsconfig by also using the `ngPackage` configuration field in your secondary `package.json` and setting the `languageLevel` property in `lib`: +For example,: + +```json +{ + "ngPackage": { + "lib": { + "languageLevel": [ "dom", "es2017" ] + } + } +} +``` + #### How to embed assets in CSS? You can embed assets such as font and images inside the outputted css. More information [in the CSS tricks website](https://css-tricks.com/data-uris) diff --git a/docs/DESIGN.md b/docs/DESIGN.md index b3ed5e407..93dc086a7 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -153,6 +153,8 @@ If auto-generating a tsconfig, `ng-packagr` would need to read its default value The most important setting here is the `"files": []` property, which must contain exactly one file since `"flatModuleId"` and `"flatModuleOutFile"` options will also be used for flattended library indexes. The value for `"flatModuleId"` could be inferred by the library's name as given in `package.json`, `"flatModuleOutFile"` could be statically set to `"index"`. +The `"lib"` property that denotes TypeScript language level support can be overriden through a `lib.languageLevel` property in `ng-package.json`. + Other configuration properties like `"target"` or `"module"` cannot be set by users since the order of transformations relies on certain settings. For example, `ngc` will need to compile to `"target": "es2015"` and `"module": "es2015"` in order to allow subsequent steps to happen. diff --git a/integration/samples/embed-assets/package.json b/integration/samples/embed-assets/package.json index f8d9accfa..9b7286e7b 100644 --- a/integration/samples/embed-assets/package.json +++ b/integration/samples/embed-assets/package.json @@ -1,6 +1,6 @@ { "name": "@sample/embed-assets", - "description": "A sample library with embeded css assets", + "description": "A sample library with embedded css assets", "version": "1.0.0-pre.0", "private": true, "repository": "https://github.com/dherges/ng-packagr.git", diff --git a/integration/samples/language-level/ng-package.json b/integration/samples/language-level/ng-package.json new file mode 100644 index 000000000..39af6d992 --- /dev/null +++ b/integration/samples/language-level/ng-package.json @@ -0,0 +1,10 @@ +{ + "$schema": "../../../src/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts", + "languageLevel": [ + "dom", + "es2017" + ] + } +} diff --git a/integration/samples/language-level/package.json b/integration/samples/language-level/package.json new file mode 100644 index 000000000..5407c130f --- /dev/null +++ b/integration/samples/language-level/package.json @@ -0,0 +1,16 @@ +{ + "name": "@sample/language-level", + "description": "A sample library to test es2016/es2017 syntax in TypeScript", + "version": "1.0.0-pre.0", + "private": true, + "repository": "https://github.com/dherges/ng-packagr.git", + "peerDependencies": { + "@angular/common": "^4.1.3", + "@angular/core": "^4.1.3", + "rxjs": "^5.0.1", + "zone.js": "^0.8.4" + }, + "scripts": { + "test": "../../../node_modules/.bin/cross-env TS_NODE_PROJECT=../../../integration/tsconfig.specs.json ../../../node_modules/.bin/mocha --compilers ts:ts-node/register specs/**/*.ts" + } +} diff --git a/integration/samples/language-level/public_api.ts b/integration/samples/language-level/public_api.ts new file mode 100644 index 000000000..05b8f5fa8 --- /dev/null +++ b/integration/samples/language-level/public_api.ts @@ -0,0 +1,2 @@ +export * from './src/angular.component'; +export * from './src/angular.module'; diff --git a/integration/samples/language-level/src/angular.component.ts b/integration/samples/language-level/src/angular.component.ts new file mode 100644 index 000000000..f227759e9 --- /dev/null +++ b/integration/samples/language-level/src/angular.component.ts @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; + + +@Component({ + selector: 'ng-component', + template: '