@@ -18,6 +18,8 @@ include ../_util-fns
18
18
This cookbook shows how to publish a third party library in a way that makes it possible to
19
19
fully benefit from techniques like Ahead of Time Compilation (AOT) and Tree Shaking.
20
20
21
+ The **QuickStart Library seed**
22
+
21
23
.alert.is-important
22
24
:marked
23
25
The setup shown in this cookbook is only for Angular version 4 (and up) libraries.
@@ -28,9 +30,7 @@ include ../_util-fns
28
30
29
31
[Library package format](#library-package-format)
30
32
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)
34
34
35
35
[What's in the QuickStart Library seed?](#what-s-in-the-quickstart-library-seed-)
36
36
@@ -95,73 +95,116 @@ table(width="100%")
95
95
td ESM+ES2015
96
96
td
97
97
:marked
98
- `angular- library-name.js`
98
+ `library-name.js`
99
99
tr
100
100
td Angular CLI / Webpack/ Rollup
101
101
td ESM+ES5
102
102
td
103
103
:marked
104
- `angular- library-name.es5.js`
104
+ `library-name.es5.js`
105
105
tr
106
106
td Plunker / Fiddle / ES5 / script tag
107
107
td UMD
108
108
td
109
109
: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`
111
111
tr
112
112
td Node.js
113
113
td UMD
114
114
td
115
115
:marked
116
- `bundles/angular- library-name.umd.js`
116
+ `bundles/library-name.umd.js`
117
117
tr
118
118
td TypeScript
119
119
td ESM+*.d.ts
120
120
td
121
121
:marked
122
- `angular- library-name.d.ts`
122
+ `library-name.d.ts`
123
123
tr
124
124
td AOT compilation
125
125
td *.metadata.json
126
126
td
127
127
: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`
137
129
138
- .l-main-section
139
130
:marked
140
- ## Published file layout
141
-
142
131
A library should have the following file layout when published:
143
132
144
133
.filetree
145
- .file node_modules/angular- library-name
134
+ .file node_modules/library-name
146
135
.children
147
136
.file bundles
148
137
.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
153
142
.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
160
149
.file index.d.ts
161
150
.file LICENSE
162
151
.file package.json (lists all entry points)
163
152
.file README.md
164
153
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.
165
208
166
209
.l-main-section
167
210
:marked
0 commit comments