@@ -18,6 +18,8 @@ include ../_util-fns
1818 This cookbook shows how to publish a third party library in a way that makes it possible to
1919 fully benefit from techniques like Ahead of Time Compilation (AOT) and Tree Shaking.
2020
21+ The **QuickStart Library seed**
22+
2123.alert.is-important
2224 :marked
2325 The setup shown in this cookbook is only for Angular version 4 (and up) libraries.
@@ -28,9 +30,7 @@ include ../_util-fns
2830
2931 [Library package format](#library-package-format)
3032
31- [Published file layout](#published-file-layout)
32-
33- [Setup a local development environment](#setup-a-local-development-environment)
33+ [Building your library](#building-your-library)
3434
3535 [What's in the QuickStart Library seed?](#what-s-in-the-quickstart-library-seed-)
3636
@@ -95,73 +95,116 @@ table(width="100%")
9595 td ESM+ES2015
9696 td
9797 :marked
98- `angular- library-name.js`
98+ `library-name.js`
9999 tr
100100 td Angular CLI / Webpack/ Rollup
101101 td ESM+ES5
102102 td
103103 :marked
104- `angular- library-name.es5.js`
104+ `library-name.es5.js`
105105 tr
106106 td Plunker / Fiddle / ES5 / script tag
107107 td UMD
108108 td
109109 :marked
110- Requires manual resolution to `bundles/angular- library-name.umd.js`/`bundles/angular- library-name.umd.min.js`
110+ Requires manual resolution to `bundles/library-name.umd.js`/`bundles/library-name.umd.min.js`
111111 tr
112112 td Node.js
113113 td UMD
114114 td
115115 :marked
116- `bundles/angular- library-name.umd.js`
116+ `bundles/library-name.umd.js`
117117 tr
118118 td TypeScript
119119 td ESM+*.d.ts
120120 td
121121 :marked
122- `angular- library-name.d.ts`
122+ `library-name.d.ts`
123123 tr
124124 td AOT compilation
125125 td *.metadata.json
126126 td
127127 :marked
128- `angular-library-name.metadata.json`
129-
130- .l-sub-section
131- :marked
132- A flat ECMAScript module (FESM) is a bundled ECMAScript module where all imports were followed
133- copied onto the same file file.
134- It always contains ES module import/export statements but can have different levels of ES code
135- inside.
136-
128+ `library-name.metadata.json`
137129
138- .l-main-section
139130:marked
140- ## Published file layout
141-
142131 A library should have the following file layout when published:
143132
144133.filetree
145- .file node_modules/angular- library-name
134+ .file node_modules/library-name
146135.children
147136 .file bundles
148137 .children
149- .file angular- library-name.umd.js ('main' entry point)
150- .file angular- library-name.umd.js.map
151- .file angular- library-name.umd.min.js
152- .file angular- library-name.umd.min.js.map
138+ .file library-name.umd.js ('main' entry point)
139+ .file library-name.umd.js.map
140+ .file library-name.umd.min.js
141+ .file library-name.umd.min.js.map
153142 .file src/*.d.ts
154- .file angular- library-name.d.ts ('typings' entry point)
155- .file angular- library-name.es5.js ('module' entry point)
156- .file angular- library-name.es5.js.map
157- .file angular- library-name.js ('es2015' entry point)
158- .file angular- library-name.js.map
159- .file angular- library-name.metadata.json
143+ .file library-name.d.ts ('typings' entry point)
144+ .file library-name.es5.js ('module' entry point)
145+ .file library-name.es5.js.map
146+ .file library-name.js ('es2015' entry point)
147+ .file library-name.js.map
148+ .file library-name.metadata.json
160149 .file index.d.ts
161150 .file LICENSE
162151 .file package.json (lists all entry points)
163152 .file README.md
164153
154+ .l-sub-section
155+ :marked
156+ A flat ECMAScript module (FESM) is a bundled ECMAScript module where all imports were followed
157+ copied onto the same file file.
158+ It always contains ES module import/export statements but can have different levels of ES code
159+ inside.
160+
161+
162+ .l-main-section
163+ :marked
164+ ## Building your library
165+
166+ You can use any set of tools you choose to package your library.
167+ The only tool that is mandatory is the AOT compiler `ngc`, which should have the following
168+ configuration in the used `tsconfig.json`:
169+
170+ code-example( language ="json" ) .
171+ {
172+ "compilerOptions": { ... },
173+ "angularCompilerOptions": {
174+ "annotateForClosureCompiler": true,
175+ "strictMetadataEmit": true,
176+ "flatModuleOutFile": "library-name.js",
177+ "flatModuleId": "library-name"
178+ }
179+ }
180+
181+ :marked
182+ You should also have a `library-name.js` file to be overwritten by `ngc` in order to create
183+ flat module, re-exporting the public API of your library.
184+
185+ This file is not used to build you library.
186+ It is only used during editing by the TypeScript language service and during build for verification.
187+ `ngc` replaces this file with production file when it rewrites private symbol names.
188+
189+ Below is a handy list for you to check if your entry points files are correctly build:
190+
191+ - common to all entry points:
192+ - HTML and CSS templates inlined in your TypeScript files that will be compiled.
193+ - sourcemaps all the way back to the source files.
194+ - compiled using `"module": "es2015"` in `compilerOptions`
195+ - `main` (`bundles/library-name.umd.js`)
196+ - compiled with `ngc`, using `"target": "es5"`.
197+ - bundled using a UMD format.
198+ - also produce a minimized copy.
199+ - `module` (`library-name.es5.js`)
200+ - compiled with `ngc`, using `"target": "es5"`.
201+ - bundled using ES modules format.
202+ - `es2015` (`library-name.js`)
203+ - compiled with `ngc`, using `"target": "es2015"`.
204+ - bundled using ES modules format.
205+ - `typings` (`library-name.d.ts`)
206+ - compiled with `ngc`.
207+ - only publish `*.d.ts` and `library-name.metadata.json` files.
165208
166209.l-main-section
167210:marked
0 commit comments