You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: lib/README.md
+30-85Lines changed: 30 additions & 85 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,7 @@ Extend the Angular CLI's default build behavior without ejecting:
6
6
- 📄 Alternative: Extend the default behavior by providing a custom function
7
7
- 📦 Optional: Build a single bundle (e. g. for Angular Elements)
8
8
- ☑️ Inherits from the default builder, hence you have the same options
9
+
- ☑️ Provides schematics for some advanced use cases like webpack externals
9
10
- 🍰 Simple to use
10
11
- ⏏️ No eject needed
11
12
@@ -24,13 +25,27 @@ Big thanks to [Rob Wormald](https://twitter.com/robwormald) and [David Herges](h
24
25
ng update ngx-build-plus --force
25
26
```
26
27
27
-
## Breaking Change in Version 7
28
+
## Breaking Changes
29
+
30
+
## Version 7
28
31
29
32
- The switch ``single-bundle`` now defaults to ``false`` to align with the CLI's default behavior.
30
33
31
-
## Example
34
+
## Version 9
35
+
36
+
-`keepPolyfills` and `keepStyles` default to true to avoid misunderstandings.
37
+
38
+
## Schematics and Options
39
+
40
+
### Options
32
41
33
-
https://github.com/manfredsteyer/ngx-build-plus
42
+
-``ng build --single-bundle``: Puts everything reachable from the main entry point into one bundle. Polyfills, scripts, and styles stay in their own bundles as the consuming application might have its own versions of these.
43
+
44
+
### Schamtics
45
+
46
+
-``ng add ngx-build-plus``
47
+
-``ng g ngx-build-plus:wc-polyfill``: Adds webcomponent polyfills to your app
48
+
-``ng g ngx-build-plus:externals``: Updates your app to use webpack externals (see example at the end)
34
49
35
50
## Getting started
36
51
@@ -219,26 +234,13 @@ The result of this description can be found in the [repository's](https://github
219
234
ng add ngx-build-plus --project myProject
220
235
```
221
236
222
-
4.**Alternative**:*If, and only if,*this does not work for you, e. g. because you use an earlier Angular version, you can install the library manually:
223
-
224
-
```
225
-
npm install ngx-build-plus --save-dev
226
-
```
227
-
228
-
After this, update your angular.json:
229
-
230
-
```json
231
-
[...]
232
-
"architect": {
233
-
"build": {
234
-
"builder": "ngx-build-plus:build",
235
-
[...]
236
-
}
237
-
}
238
-
[...]
239
-
```
237
+
4. Execute the externals schematc:
238
+
239
+
```
240
+
ng g ngx-build-plus:externals --project myProject
241
+
```
240
242
241
-
5.Create a file ``webpack.extra.js``witha partial webpack config that tells webpack to exclude packages like ``@angular/core``:
243
+
5.This creates a partial webpack config in your project's root:
242
244
243
245
```JavaScript
244
246
module.exports = {
@@ -252,76 +254,19 @@ The result of this description can be found in the [repository's](https://github
252
254
}
253
255
```
254
256
255
-
6. Build your application:
257
+
6. Build your application. You can use the npm script created by the above mentioned schematic:
256
258
257
259
```
258
-
ng build --prod --extraWebpackConfig webpack.extra.js --output-hashing none --single-bundle true
260
+
npm run build:externals:myProject
259
261
```
260
262
261
-
7.You will see that just one bundle (besides the ``script.js`` that could also be shared) is built. The size ofthe ``main.js`` tells you, that the mentioned packages have been excluded.
263
+
7. Angular will now be compiled into a scripts.js and can be reused amongs several seperately compiled bundles. Your code is in the main bundle which is quite tiny b/c it does not contain Angular.
262
264
263
-
264
265
265
-
8. Copy the bundle into a project that references the UMD versions of all external libraries and your ``main.ts``. You can find such a project with all the necessary script files in the ``deploy`` folder of the sample.
Further information about this can be found in my blog [here](https://www.softwarearchitekt.at/post/2019/01/27/building-angular-elements-with-the-cli.aspx).
321
267
322
-
9. Test your solution.
268
+
## Angular Trainings, Consultings, Schulungen
323
269
324
-
**Hint:** For production, consider using the minified versions of those bundles. They can be found in the ``node_modules`` folder after npm installing them.
270
+
see http://www.softwarearchitekt.at
325
271
326
-
**Hint:** The sample project contains a node script ``copy-bundles.js`` that copies the needed UMD bundles from the ``node_modules`` folder into the assets folder.
0 commit comments