Skip to content

Commit

Permalink
schematics: use scripts instead of copying files to assets
Browse files Browse the repository at this point in the history
  • Loading branch information
@manfredsteyer
manfredsteyer committed Nov 1, 2019
1 parent 24f4fd1 commit b2871c3
Show file tree
Hide file tree
Showing 105 changed files with 7,014 additions and 3,584 deletions.
115 changes: 30 additions & 85 deletions lib/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ Extend the Angular CLI's default build behavior without ejecting:
- 📄 Alternative: Extend the default behavior by providing a custom function
- 📦 Optional: Build a single bundle (e. g. for Angular Elements)
- ☑️ Inherits from the default builder, hence you have the same options
- ☑️ Provides schematics for some advanced use cases like webpack externals
- 🍰 Simple to use
- ⏏️ No eject needed

Expand All @@ -24,13 +25,27 @@ Big thanks to [Rob Wormald](https://twitter.com/robwormald) and [David Herges](h
ng update ngx-build-plus --force
```

## Breaking Change in Version 7
## Breaking Changes

## Version 7

- The switch ``single-bundle`` now defaults to ``false`` to align with the CLI's default behavior.

## Example
## Version 9

- `keepPolyfills` and `keepStyles` default to true to avoid misunderstandings.

## Schematics and Options

### Options

https://github.com/manfredsteyer/ngx-build-plus
- ``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.

### Schamtics

- ``ng add ngx-build-plus``
- ``ng g ngx-build-plus:wc-polyfill``: Adds webcomponent polyfills to your app
- ``ng g ngx-build-plus:externals``: Updates your app to use webpack externals (see example at the end)

## Getting started

Expand Down Expand Up @@ -219,26 +234,13 @@ The result of this description can be found in the [repository's](https://github
ng add ngx-build-plus --project myProject
```

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:

```
npm install ngx-build-plus --save-dev
```

After this, update your angular.json:

```json
[...]
"architect": {
"build": {
"builder": "ngx-build-plus:build",
[...]
}
}
[...]
```
4. Execute the externals schematc:

```
ng g ngx-build-plus:externals --project myProject
```

5. Create a file ``webpack.extra.js`` with a partial webpack config that tells webpack to exclude packages like ``@angular/core``:
5. This creates a partial webpack config in your project's root:
```JavaScript
module.exports = {
Expand All @@ -252,76 +254,19 @@ The result of this description can be found in the [repository's](https://github
}
```
6. Build your application:
6. Build your application. You can use the npm script created by the above mentioned schematic:
```
ng build --prod --extraWebpackConfig webpack.extra.js --output-hashing none --single-bundle true
npm run build:externals:myProject
```
7. You will see that just one bundle (besides the ``script.js`` that could also be shared) is built. The size of the ``main.js`` tells you, that the mentioned packages have been excluded.
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.
![Result](result.png)
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.

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ElementsLoading</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- Consider putting the following UMD (!) bundles -->
<!-- into a big one -->
<!-- core-js for legacy browsers -->
<script src="./assets/core-js/core.js"></script>
<!-- Zone.js -->
<!--
Consider excluding zone.js when creating
custom Elements by using the noop zone.
-->
<script src="./assets/zone.js/zone.js"></script>
<!-- Polyfills for Browsers supporting
Custom Elements. Needed b/c we downlevel
to ES5. See: @webcomponents/custom-elements
-->
<script src="./assets/custom-elements/src/native-shim.js"></script>
<!-- Polyfills for Browsers not supporting
Custom Elements. See: @webcomponents/custom-elements
-->
<script src="./assets/custom-elements/custom-elements.min.js"></script>
<!-- Rx -->
<script src="./assets/rxjs/rxjs.umd.js"></script>
<!-- Angular Packages -->
<script src="./assets/core/bundles/core.umd.js"></script>
<script src="./assets/common/bundles/common.umd.js"></script>
<script src="./assets/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="./assets/elements/bundles/elements.umd.js"></script>
<!-- Calling Custom Element -->
<custom-element></custom-element>
</body>
</html>
```
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).
9. Test your solution.
## Angular Trainings, Consultings, Schulungen
**Hint:** For production, consider using the minified versions of those bundles. They can be found in the ``node_modules`` folder after npm installing them.
see http://www.softwarearchitekt.at
**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.
2 changes: 1 addition & 1 deletion lib/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-build-plus",
"version": "8.1.5",
"version": "9.0.1",
"description": "Extends the Angular CLI's build process!",
"license": "MIT",
"repository": {
Expand Down
Loading

0 comments on commit b2871c3

Please sign in to comment.