From 1016eabf15090b9055c6210eaf5555219a543f9a Mon Sep 17 00:00:00 2001 From: Isaac Mann Date: Wed, 13 Nov 2019 22:03:13 -0500 Subject: [PATCH 01/15] Fix path in package.json script --- lib/schematics/externals/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/schematics/externals/index.ts b/lib/schematics/externals/index.ts index 79dd4d5..8f00337 100644 --- a/lib/schematics/externals/index.ts +++ b/lib/schematics/externals/index.ts @@ -135,10 +135,10 @@ function updateScripts(path: string, config: any, tree: Tree, _options: any, _co // Heuristic for default project if (!project.root) { - config.scripts['build:externals'] = `ng build --extra-webpack-config ${path}webpack.externals.js --prod ${additionalFlags}`; + config.scripts['build:externals'] = `ng build --extra-webpack-config ${path}/webpack.externals.js --prod ${additionalFlags}`; } if (_options.project) { - config.scripts[`build:${_options.project}:externals`] = `ng build --extra-webpack-config ${path}webpack.externals.js --prod --project ${_options.project} ${additionalFlags}`; + config.scripts[`build:${_options.project}:externals`] = `ng build --extra-webpack-config ${path}/webpack.externals.js --prod --project ${_options.project} ${additionalFlags}`; } -} \ No newline at end of file +} From c4efcab630dd6eab01c1a4a46c1d8b747e3fa137 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Fri, 22 Nov 2019 16:16:36 -0500 Subject: [PATCH 02/15] updated code formatting in README --- readme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 24bfe77..2de2f13 100644 --- a/readme.md +++ b/readme.md @@ -81,12 +81,12 @@ Please find the example shown here in the sample application in the folder ``pro declare const VERSION: string; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'Version: ' + VERSION; + title = 'Version: ' + VERSION; } ``` From 9375445ba2f72957d4b4de66dbcd46cfa850f668 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yasin=20Ayd=C4=B1n?= Date: Tue, 17 Dec 2019 14:09:56 +0300 Subject: [PATCH 03/15] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 24bfe77..2eea4e5 100644 --- a/readme.md +++ b/readme.md @@ -41,7 +41,7 @@ ng update ngx-build-plus --force - ``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 +### Schematics - ``ng add ngx-build-plus`` - ``ng g ngx-build-plus:wc-polyfill``: Adds webcomponent polyfills to your app From 9de490f8ad6d9f2e9261017b0ef453b943a3e2fc Mon Sep 17 00:00:00 2001 From: Mariano Santoro Date: Tue, 17 Mar 2020 09:58:20 -0500 Subject: [PATCH 04/15] Update index.ts fix(schematics): Support projects created with minimal flag set to true --- lib/schematics/add-ngx-build-plus/index.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/schematics/add-ngx-build-plus/index.ts b/lib/schematics/add-ngx-build-plus/index.ts index 80a0e7f..75703b0 100644 --- a/lib/schematics/add-ngx-build-plus/index.ts +++ b/lib/schematics/add-ngx-build-plus/index.ts @@ -22,11 +22,10 @@ export function addNgxBuildPlus(_options: any): Rule { serve.builder = 'ngx-build-plus:dev-server'; const test = architect.test; - if (!test) throw new Error(`expected node projects/${project}/architect/test in angular.json`); - test.builder = 'ngx-build-plus:karma'; + if (test) test.builder = 'ngx-build-plus:karma'; return updateWorkspace(workspace); }; } - \ No newline at end of file + From 3dce8c524b68e1a64fe38f857d4dd886e56219c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20K=C3=BChnel?= Date: Mon, 6 Apr 2020 09:05:08 +0200 Subject: [PATCH 05/15] Fix typos in readme --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 24bfe77..90e4069 100644 --- a/readme.md +++ b/readme.md @@ -41,7 +41,7 @@ ng update ngx-build-plus --force - ``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 +### Schematics - ``ng add ngx-build-plus`` - ``ng g ngx-build-plus:wc-polyfill``: Adds webcomponent polyfills to your app @@ -239,7 +239,7 @@ The result of this description can be found in the [repository's](https://github ng g ngx-build-plus:wc-polyfill --project myProject ``` -5. Execute the externals schematc: +5. Execute the externals schematic: ``` ng g ngx-build-plus:externals --project myProject From 603c4cd4d1b6bb9466167c4642f85de3e63c817d Mon Sep 17 00:00:00 2001 From: Matt Ezell Date: Mon, 20 Apr 2020 11:32:39 -0500 Subject: [PATCH 06/15] Correct Schematics spelling in readme Corrected the spelling of 'Schematics' in readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 24bfe77..2eea4e5 100644 --- a/readme.md +++ b/readme.md @@ -41,7 +41,7 @@ ng update ngx-build-plus --force - ``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 +### Schematics - ``ng add ngx-build-plus`` - ``ng g ngx-build-plus:wc-polyfill``: Adds webcomponent polyfills to your app From 53bdb9a63f018e868f2dab255d4b1c40438612c6 Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Sun, 7 Jun 2020 08:09:44 +0200 Subject: [PATCH 07/15] docs: fix typo "Schamtics" --- lib/README.md | 2 +- readme.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/README.md b/lib/README.md index 24bfe77..2eea4e5 100644 --- a/lib/README.md +++ b/lib/README.md @@ -41,7 +41,7 @@ ng update ngx-build-plus --force - ``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 +### Schematics - ``ng add ngx-build-plus`` - ``ng g ngx-build-plus:wc-polyfill``: Adds webcomponent polyfills to your app diff --git a/readme.md b/readme.md index 24bfe77..2eea4e5 100644 --- a/readme.md +++ b/readme.md @@ -41,7 +41,7 @@ ng update ngx-build-plus --force - ``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 +### Schematics - ``ng add ngx-build-plus`` - ``ng g ngx-build-plus:wc-polyfill``: Adds webcomponent polyfills to your app From df4970673e2bdf6ef45f2768a01452689d4f890d Mon Sep 17 00:00:00 2001 From: Gleb Mikheev Date: Mon, 15 Jun 2020 20:02:16 +0300 Subject: [PATCH 08/15] feat(interface): buildWebpackBrowserPlus added to package exports --- lib/src/browser/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/browser/index.ts b/lib/src/browser/index.ts index 2adb578..156b66a 100644 --- a/lib/src/browser/index.ts +++ b/lib/src/browser/index.ts @@ -11,5 +11,6 @@ function buildWebpackBrowserPlus( return runBuilderHandler(options, transforms, context, executeBrowserBuilder); } +export { buildWebpackBrowserPlus as executeBrowserBuilderPlus }; //export default createBuilder(buildWebpackBrowserPlus); export default createBuilder(buildWebpackBrowserPlus); \ No newline at end of file From 8e33ea9a91370bd1672730c516b025c0cbc4d3c0 Mon Sep 17 00:00:00 2001 From: Gleb Mikheev Date: Fri, 19 Jun 2020 12:01:15 +0300 Subject: [PATCH 09/15] exported dev-server function --- lib/src/plus-dev-server/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/plus-dev-server/index.ts b/lib/src/plus-dev-server/index.ts index 7021e93..35e0e7e 100644 --- a/lib/src/plus-dev-server/index.ts +++ b/lib/src/plus-dev-server/index.ts @@ -5,7 +5,7 @@ import { Transforms, runBuilderHandler } from "../utils"; import { JsonObject } from "@angular-devkit/core"; -function serveWebpackBrowserPlus( +export function serveWebpackBrowserPlus( options: any, context: BuilderContext, transforms: Transforms = {} From a397736350d0f4f57b011fd55e4599d261727060 Mon Sep 17 00:00:00 2001 From: Christoph Stenglein Date: Sat, 25 Jul 2020 17:19:17 +0200 Subject: [PATCH 10/15] Fixes #212: add typescript definitions to npm package --- lib/.npmignore | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/.npmignore b/lib/.npmignore index 6461dee..bd6c7fe 100644 --- a/lib/.npmignore +++ b/lib/.npmignore @@ -1 +1,2 @@ *.ts +!*.d.ts \ No newline at end of file From 973aef94c18c7ef425c92fd1f7bda7dbec9e5667 Mon Sep 17 00:00:00 2001 From: Christoph Stenglein Date: Sat, 25 Jul 2020 17:20:40 +0200 Subject: [PATCH 11/15] add missing newline at end of file --- lib/.npmignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/.npmignore b/lib/.npmignore index bd6c7fe..f0e06b3 100644 --- a/lib/.npmignore +++ b/lib/.npmignore @@ -1,2 +1,2 @@ *.ts -!*.d.ts \ No newline at end of file +!*.d.ts From adc7695442f34e8b7d6969d7e0e03e181e768502 Mon Sep 17 00:00:00 2001 From: Stephan Plath Date: Mon, 27 Jul 2020 10:43:48 +0200 Subject: [PATCH 12/15] minor changes --- readme.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 24bfe77..fe4b3da 100644 --- a/readme.md +++ b/readme.md @@ -18,6 +18,7 @@ Big thanks to [Rob Wormald](https://twitter.com/robwormald) and [David Herges](h - Angular 6-7/ CLI 6-7: ngx-build-plus@^7 - Angular 8/ CLI 8: ngx-build-plus^8.0.0 +- Angular 9/ CLI 9: ngx-build-plus^9.0.0 ## Updating to Version 8 @@ -41,7 +42,7 @@ ng update ngx-build-plus --force - ``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 +### Schematics - ``ng add ngx-build-plus`` - ``ng g ngx-build-plus:wc-polyfill``: Adds webcomponent polyfills to your app From 1a1d2c41e944ac4f50d78272e34cd0363ea1d9e6 Mon Sep 17 00:00:00 2001 From: Hardik Arvind Kumar Patel Date: Mon, 7 Sep 2020 11:28:48 +0530 Subject: [PATCH 13/15] updated build command --- readme.md | 308 +++++++++++++++++++++++++++--------------------------- 1 file changed, 154 insertions(+), 154 deletions(-) diff --git a/readme.md b/readme.md index 24bfe77..03ddc04 100644 --- a/readme.md +++ b/readme.md @@ -7,7 +7,7 @@ Extend the Angular CLI's default build behavior without ejecting: - 📦 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 +- 🍰 Simple to use - ⏏️ No eject needed ## Credits @@ -29,7 +29,7 @@ ng update ngx-build-plus --force ## Version 7 -- The switch ``single-bundle`` now defaults to ``false`` to align with the CLI's default behavior. +- The switch `single-bundle` now defaults to `false` to align with the CLI's default behavior. ## Version 9 @@ -39,76 +39,77 @@ ng update ngx-build-plus --force ### Options -- ``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. +- `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) +- `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 -This shows a minimal example for getting started. It uses a minimal partial webpack configuration that is merged into the CLI's one. Representative for all possible custom webpack configurations, the used one just leverages the ``DefinePlugin`` to create a global ``VERSION`` constant during the build. +This shows a minimal example for getting started. It uses a minimal partial webpack configuration that is merged into the CLI's one. Representative for all possible custom webpack configurations, the used one just leverages the `DefinePlugin` to create a global `VERSION` constant during the build. -Please find the example shown here in the sample application in the folder ``projects/getting-started``. +Please find the example shown here in the sample application in the folder `projects/getting-started`. 1. Create a new Angular project with the CLI -2. Add ngx-build-plus: ``ng add ngx-build-plus`` - - **Note:** If you want to add it to specific sub project in your ``projects`` folder, use the ``--project`` switch to point to it: ``ng add ngx-build-plus --project getting-started`` - - **Remark:** This step installs the package via npm and updates your angular.json so that your project uses custom builders for ``ng serve`` and ``ng build``. - -3. Add a file ``webpack.partial.js`` to the root of your (sub-)project: - - ```javascript - const webpack = require('webpack'); - - module.exports = { - plugins: [ - new webpack.DefinePlugin({ - "VERSION": JSON.stringify("4711") - }) - ] - } - ``` -4. Use the global variable VERSION in your ``app.component.ts``: - - ```typescript - import { Component } from '@angular/core'; - - declare const VERSION: string; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - export class AppComponent { - title = 'Version: ' + VERSION; - } - ``` - -5. Start your application with the ``--extra-webpack-config`` switch pointing to your partial webpack config: - - ``` - ng serve --extra-webpack-config webpack.partial.js -o - ``` - - If your project is a CLI based sub project, use the ``--project`` switch too: - - ``` - ng serve --project getting-started -o --extra-webpack-config webpack.partial.js - ``` - - **Hint**: Consider creating a npm script for this command. +2. Add ngx-build-plus: `ng add ngx-build-plus` + + **Note:** If you want to add it to specific sub project in your `projects` folder, use the `--project` switch to point to it: `ng add ngx-build-plus --project getting-started` + + **Remark:** This step installs the package via npm and updates your angular.json so that your project uses custom builders for `ng serve` and `ng build`. + +3. Add a file `webpack.partial.js` to the root of your (sub-)project: + + ```javascript + const webpack = require("webpack"); + + module.exports = { + plugins: [ + new webpack.DefinePlugin({ + VERSION: JSON.stringify("4711"), + }), + ], + }; + ``` + +4. Use the global variable VERSION in your `app.component.ts`: + + ```typescript + import { Component } from "@angular/core"; + + declare const VERSION: string; + + @Component({ + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"], + }) + export class AppComponent { + title = "Version: " + VERSION; + } + ``` + +5. Start your application with the `--extra-webpack-config` switch pointing to your partial webpack config: + + ``` + ng serve --extra-webpack-config webpack.partial.js -o + ``` + + If your project is a CLI based sub project, use the `--project` switch too: + + ``` + ng serve --project getting-started -o --extra-webpack-config webpack.partial.js + ``` + + **Hint**: Consider creating a npm script for this command. 6. Make sure that the VERSION provided by your webpack config is displayed. ## ngx-build-plus and Angular Elements -While ``ngx-build-plus`` can be used in every Angular configuration, it also comes with some schematics automating some scenarios for Angular Elements. More information about can be found [here](https://www.softwarearchitekt.at/post/2019/01/27/building-angular-elements-with-the-cli.aspx). +While `ngx-build-plus` can be used in every Angular configuration, it also comes with some schematics automating some scenarios for Angular Elements. More information about can be found [here](https://www.softwarearchitekt.at/post/2019/01/27/building-angular-elements-with-the-cli.aspx). ## Using Plugins @@ -116,162 +117,161 @@ Plugins allow you to provide some custom code that modifies your webpack configu ```typescript export default { - pre(options) { - console.debug('pre'); - }, - config(cfg) { - console.debug('config'); - return cfg; - }, - post(options) { - console.debug('post'); - } -} + pre(options) { + console.debug("pre"); + }, + config(cfg) { + console.debug("config"); + return cfg; + }, + post(options) { + console.debug("post"); + }, +}; ``` As this plugin is written with TypeScript you need to compile it. -The ``config`` method works like a ``configHook`` (see above). +The `config` method works like a `configHook` (see above). -To use a plugin, point to it's JavaScript representation (not the TypeScript file) using the ``--plugin`` switch: +To use a plugin, point to it's JavaScript representation (not the TypeScript file) using the `--plugin` switch: ``` ng build --plugin ~dist\out-tsc\hook\plugin ``` -The prefix ``~`` points to the current directory. Without this prefix, ngx-build-plus assumes that the plugin is an installed ``node_module``. +The prefix `~` points to the current directory. Without this prefix, ngx-build-plus assumes that the plugin is an installed `node_module`. ## Using different merging strategies You can also use plugins to implement different merging strategies. The following plugin demonstrates this: ```javascript -var merge = require('webpack-merge'); -var webpack = require('webpack'); +var merge = require("webpack-merge"); +var webpack = require("webpack"); exports.default = { - config: function(cfg) { - const strategy = merge.strategy({ - 'plugins': 'prepend' - }); - - return strategy (cfg, { - plugins: [ - new webpack.DefinePlugin({ - "VERSION": JSON.stringify("4711") - }) - ] - }); - } -} + config: function (cfg) { + const strategy = merge.strategy({ + plugins: "prepend", + }); + + return strategy(cfg, { + plugins: [ + new webpack.DefinePlugin({ + VERSION: JSON.stringify("4711"), + }), + ], + }); + }, +}; ``` + To execute this, use the following command: ``` ng build --plugin ~my-plugin.js ``` -One more time, the ``~`` tells ngx-build-plus that the plugin is not an installed node_module but a local file. +One more time, the `~` tells ngx-build-plus that the plugin is not an installed node_module but a local file. ## Advanced example: Externals and Angular Elements -This shows another example for using ``ngx-build-plus``. It uses a custom webpack configuration to define some dependencies of an Angular Element as external which can be loaded separately into the browser and shared among several bundles. +This shows another example for using `ngx-build-plus`. It uses a custom webpack configuration to define some dependencies of an Angular Element as external which can be loaded separately into the browser and shared among several bundles. -*If you are not interested into this very use case, skip this section.* +_If you are not interested into this very use case, skip this section._ -The result of this description can be found in the [repository's](https://github.com/manfredsteyer/ngx-build-plus) ``sample`` directory. +The result of this description can be found in the [repository's](https://github.com/manfredsteyer/ngx-build-plus) `sample` directory. -1. Create a new Angular CLI based project and install ``@angular/elements`` as well as ``@webcomponents/custom-elements`` which provides needed polyfills: +1. Create a new Angular CLI based project and install `@angular/elements` as well as `@webcomponents/custom-elements` which provides needed polyfills: - ``` - npm i @angular/elements --save - ``` + ``` + npm i @angular/elements --save + ``` 2. Expose a component as an Custom Element: - ```TypeScript - import { BrowserModule } from '@angular/platform-browser'; - import { NgModule, Injector } from '@angular/core'; - import { createCustomElement } from '@angular/elements'; - - import { AppComponent } from './app.component'; - - @NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent - ], - providers: [], - bootstrap: [], - entryComponents:[AppComponent] - }) - export class AppModule { - - constructor(private injector: Injector) { - } - - ngDoBootstrap() { - const elm = createCustomElement(AppComponent, { injector: this.injector }); - customElements.define('custom-element', elm); - } + ```TypeScript + import { BrowserModule } from '@angular/platform-browser'; + import { NgModule, Injector } from '@angular/core'; + import { createCustomElement } from '@angular/elements'; + + import { AppComponent } from './app.component'; + + @NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent + ], + providers: [], + bootstrap: [], + entryComponents:[AppComponent] + }) + export class AppModule { + + constructor(private injector: Injector) { + } + + ngDoBootstrap() { + const elm = createCustomElement(AppComponent, { injector: this.injector }); + customElements.define('custom-element', elm); + } + + } + ``` - } - ``` -3. Install ``ngx-build-plus``: +3. Install `ngx-build-plus`: - When using Angular >= 7 and CLI >= 7, you can simply use ``ng add`` for installing ``ngx-build-plus``: + When using Angular >= 7 and CLI >= 7, you can simply use `ng add` for installing `ngx-build-plus`: - ``` - ng add ngx-build-plus - ``` + ``` + ng add ngx-build-plus + ``` - If you are using a monorepo, mention the project you want to install ngx-build-plus for: + If you are using a monorepo, mention the project you want to install ngx-build-plus for: - ``` - ng add ngx-build-plus --project myProject - ``` + ``` + ng add ngx-build-plus --project myProject + ``` 4. Add polyfills: - + ``` ng g ngx-build-plus:wc-polyfill --project myProject ``` 5. Execute the externals schematc: - + ``` ng g ngx-build-plus:externals --project myProject ``` 6. This creates a partial webpack config in your project's root: - ```JavaScript - module.exports = { - "externals": { - "rxjs": "rxjs", - "@angular/core": "ng.core", - "@angular/common": "ng.common", - "@angular/platform-browser": "ng.platformBrowser", - "@angular/elements": "ng.elements" - } - } - ``` + ```JavaScript + module.exports = { + "externals": { + "rxjs": "rxjs", + "@angular/core": "ng.core", + "@angular/common": "ng.common", + "@angular/platform-browser": "ng.platformBrowser", + "@angular/elements": "ng.elements" + } + } + ``` 7. Build your application. You can use the npm script created by the above mentioned schematic: - ``` - npm run build:externals:myProject - ``` - -8. 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. + ``` + npm run build:myProject:externals + ``` +8. 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. 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). ## Angular Trainings, Consultings, Schulungen see http://www.softwarearchitekt.at - - From ad041b45f0794aaaf3162999e9daa957a5445fc7 Mon Sep 17 00:00:00 2001 From: Hardik Patel Date: Mon, 7 Sep 2020 11:30:41 +0530 Subject: [PATCH 14/15] Update readme.md --- readme.md | 308 +++++++++++++++++++++++++++--------------------------- 1 file changed, 154 insertions(+), 154 deletions(-) diff --git a/readme.md b/readme.md index 03ddc04..151fe71 100644 --- a/readme.md +++ b/readme.md @@ -7,7 +7,7 @@ Extend the Angular CLI's default build behavior without ejecting: - 📦 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 +- 🍰 Simple to use - ⏏️ No eject needed ## Credits @@ -29,7 +29,7 @@ ng update ngx-build-plus --force ## Version 7 -- The switch `single-bundle` now defaults to `false` to align with the CLI's default behavior. +- The switch ``single-bundle`` now defaults to ``false`` to align with the CLI's default behavior. ## Version 9 @@ -39,77 +39,76 @@ ng update ngx-build-plus --force ### Options -- `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. +- ``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) +- ``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 -This shows a minimal example for getting started. It uses a minimal partial webpack configuration that is merged into the CLI's one. Representative for all possible custom webpack configurations, the used one just leverages the `DefinePlugin` to create a global `VERSION` constant during the build. +This shows a minimal example for getting started. It uses a minimal partial webpack configuration that is merged into the CLI's one. Representative for all possible custom webpack configurations, the used one just leverages the ``DefinePlugin`` to create a global ``VERSION`` constant during the build. -Please find the example shown here in the sample application in the folder `projects/getting-started`. +Please find the example shown here in the sample application in the folder ``projects/getting-started``. 1. Create a new Angular project with the CLI -2. Add ngx-build-plus: `ng add ngx-build-plus` - - **Note:** If you want to add it to specific sub project in your `projects` folder, use the `--project` switch to point to it: `ng add ngx-build-plus --project getting-started` - - **Remark:** This step installs the package via npm and updates your angular.json so that your project uses custom builders for `ng serve` and `ng build`. - -3. Add a file `webpack.partial.js` to the root of your (sub-)project: - - ```javascript - const webpack = require("webpack"); - - module.exports = { - plugins: [ - new webpack.DefinePlugin({ - VERSION: JSON.stringify("4711"), - }), - ], - }; - ``` - -4. Use the global variable VERSION in your `app.component.ts`: - - ```typescript - import { Component } from "@angular/core"; - - declare const VERSION: string; - - @Component({ - selector: "app-root", - templateUrl: "./app.component.html", - styleUrls: ["./app.component.css"], - }) - export class AppComponent { - title = "Version: " + VERSION; - } - ``` - -5. Start your application with the `--extra-webpack-config` switch pointing to your partial webpack config: - - ``` - ng serve --extra-webpack-config webpack.partial.js -o - ``` - - If your project is a CLI based sub project, use the `--project` switch too: - - ``` - ng serve --project getting-started -o --extra-webpack-config webpack.partial.js - ``` - - **Hint**: Consider creating a npm script for this command. +2. Add ngx-build-plus: ``ng add ngx-build-plus`` + + **Note:** If you want to add it to specific sub project in your ``projects`` folder, use the ``--project`` switch to point to it: ``ng add ngx-build-plus --project getting-started`` + + **Remark:** This step installs the package via npm and updates your angular.json so that your project uses custom builders for ``ng serve`` and ``ng build``. + +3. Add a file ``webpack.partial.js`` to the root of your (sub-)project: + + ```javascript + const webpack = require('webpack'); + + module.exports = { + plugins: [ + new webpack.DefinePlugin({ + "VERSION": JSON.stringify("4711") + }) + ] + } + ``` +4. Use the global variable VERSION in your ``app.component.ts``: + + ```typescript + import { Component } from '@angular/core'; + + declare const VERSION: string; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + export class AppComponent { + title = 'Version: ' + VERSION; + } + ``` + +5. Start your application with the ``--extra-webpack-config`` switch pointing to your partial webpack config: + + ``` + ng serve --extra-webpack-config webpack.partial.js -o + ``` + + If your project is a CLI based sub project, use the ``--project`` switch too: + + ``` + ng serve --project getting-started -o --extra-webpack-config webpack.partial.js + ``` + + **Hint**: Consider creating a npm script for this command. 6. Make sure that the VERSION provided by your webpack config is displayed. ## ngx-build-plus and Angular Elements -While `ngx-build-plus` can be used in every Angular configuration, it also comes with some schematics automating some scenarios for Angular Elements. More information about can be found [here](https://www.softwarearchitekt.at/post/2019/01/27/building-angular-elements-with-the-cli.aspx). +While ``ngx-build-plus`` can be used in every Angular configuration, it also comes with some schematics automating some scenarios for Angular Elements. More information about can be found [here](https://www.softwarearchitekt.at/post/2019/01/27/building-angular-elements-with-the-cli.aspx). ## Using Plugins @@ -117,161 +116,162 @@ Plugins allow you to provide some custom code that modifies your webpack configu ```typescript export default { - pre(options) { - console.debug("pre"); - }, - config(cfg) { - console.debug("config"); - return cfg; - }, - post(options) { - console.debug("post"); - }, -}; + pre(options) { + console.debug('pre'); + }, + config(cfg) { + console.debug('config'); + return cfg; + }, + post(options) { + console.debug('post'); + } +} ``` As this plugin is written with TypeScript you need to compile it. -The `config` method works like a `configHook` (see above). +The ``config`` method works like a ``configHook`` (see above). -To use a plugin, point to it's JavaScript representation (not the TypeScript file) using the `--plugin` switch: +To use a plugin, point to it's JavaScript representation (not the TypeScript file) using the ``--plugin`` switch: ``` ng build --plugin ~dist\out-tsc\hook\plugin ``` -The prefix `~` points to the current directory. Without this prefix, ngx-build-plus assumes that the plugin is an installed `node_module`. +The prefix ``~`` points to the current directory. Without this prefix, ngx-build-plus assumes that the plugin is an installed ``node_module``. ## Using different merging strategies You can also use plugins to implement different merging strategies. The following plugin demonstrates this: ```javascript -var merge = require("webpack-merge"); -var webpack = require("webpack"); +var merge = require('webpack-merge'); +var webpack = require('webpack'); exports.default = { - config: function (cfg) { - const strategy = merge.strategy({ - plugins: "prepend", - }); - - return strategy(cfg, { - plugins: [ - new webpack.DefinePlugin({ - VERSION: JSON.stringify("4711"), - }), - ], - }); - }, -}; + config: function(cfg) { + const strategy = merge.strategy({ + 'plugins': 'prepend' + }); + + return strategy (cfg, { + plugins: [ + new webpack.DefinePlugin({ + "VERSION": JSON.stringify("4711") + }) + ] + }); + } +} ``` - To execute this, use the following command: ``` ng build --plugin ~my-plugin.js ``` -One more time, the `~` tells ngx-build-plus that the plugin is not an installed node_module but a local file. +One more time, the ``~`` tells ngx-build-plus that the plugin is not an installed node_module but a local file. ## Advanced example: Externals and Angular Elements -This shows another example for using `ngx-build-plus`. It uses a custom webpack configuration to define some dependencies of an Angular Element as external which can be loaded separately into the browser and shared among several bundles. +This shows another example for using ``ngx-build-plus``. It uses a custom webpack configuration to define some dependencies of an Angular Element as external which can be loaded separately into the browser and shared among several bundles. -_If you are not interested into this very use case, skip this section._ +*If you are not interested into this very use case, skip this section.* -The result of this description can be found in the [repository's](https://github.com/manfredsteyer/ngx-build-plus) `sample` directory. +The result of this description can be found in the [repository's](https://github.com/manfredsteyer/ngx-build-plus) ``sample`` directory. -1. Create a new Angular CLI based project and install `@angular/elements` as well as `@webcomponents/custom-elements` which provides needed polyfills: +1. Create a new Angular CLI based project and install ``@angular/elements`` as well as ``@webcomponents/custom-elements`` which provides needed polyfills: - ``` - npm i @angular/elements --save - ``` + ``` + npm i @angular/elements --save + ``` 2. Expose a component as an Custom Element: - ```TypeScript - import { BrowserModule } from '@angular/platform-browser'; - import { NgModule, Injector } from '@angular/core'; - import { createCustomElement } from '@angular/elements'; - - import { AppComponent } from './app.component'; - - @NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent - ], - providers: [], - bootstrap: [], - entryComponents:[AppComponent] - }) - export class AppModule { - - constructor(private injector: Injector) { - } - - ngDoBootstrap() { - const elm = createCustomElement(AppComponent, { injector: this.injector }); - customElements.define('custom-element', elm); - } - - } - ``` + ```TypeScript + import { BrowserModule } from '@angular/platform-browser'; + import { NgModule, Injector } from '@angular/core'; + import { createCustomElement } from '@angular/elements'; -3. Install `ngx-build-plus`: + import { AppComponent } from './app.component'; - When using Angular >= 7 and CLI >= 7, you can simply use `ng add` for installing `ngx-build-plus`: + @NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent + ], + providers: [], + bootstrap: [], + entryComponents:[AppComponent] + }) + export class AppModule { - ``` - ng add ngx-build-plus - ``` + constructor(private injector: Injector) { + } - If you are using a monorepo, mention the project you want to install ngx-build-plus for: + ngDoBootstrap() { + const elm = createCustomElement(AppComponent, { injector: this.injector }); + customElements.define('custom-element', elm); + } - ``` - ng add ngx-build-plus --project myProject - ``` + } + ``` +3. Install ``ngx-build-plus``: -4. Add polyfills: + When using Angular >= 7 and CLI >= 7, you can simply use ``ng add`` for installing ``ngx-build-plus``: + + ``` + ng add ngx-build-plus + ``` + If you are using a monorepo, mention the project you want to install ngx-build-plus for: + + ``` + ng add ngx-build-plus --project myProject + ``` + +4. Add polyfills: + ``` ng g ngx-build-plus:wc-polyfill --project myProject ``` 5. Execute the externals schematc: - + ``` ng g ngx-build-plus:externals --project myProject ``` 6. This creates a partial webpack config in your project's root: - ```JavaScript - module.exports = { - "externals": { - "rxjs": "rxjs", - "@angular/core": "ng.core", - "@angular/common": "ng.common", - "@angular/platform-browser": "ng.platformBrowser", - "@angular/elements": "ng.elements" - } - } - ``` + ```JavaScript + module.exports = { + "externals": { + "rxjs": "rxjs", + "@angular/core": "ng.core", + "@angular/common": "ng.common", + "@angular/platform-browser": "ng.platformBrowser", + "@angular/elements": "ng.elements" + } + } + ``` 7. Build your application. You can use the npm script created by the above mentioned schematic: - ``` - npm run build:myProject:externals - ``` + ``` + npm run build:myProject:externals + ``` + +8. 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. -8. 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. 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). ## Angular Trainings, Consultings, Schulungen see http://www.softwarearchitekt.at + + From 227f2ce632da171937280a0956e450260db1dfbd Mon Sep 17 00:00:00 2001 From: Shafiq Jetha <62298251+jethas-bennettjones@users.noreply.github.com> Date: Thu, 10 Sep 2020 10:07:56 -0600 Subject: [PATCH 15/15] Correct command --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 24bfe77..151fe71 100644 --- a/readme.md +++ b/readme.md @@ -262,7 +262,7 @@ The result of this description can be found in the [repository's](https://github 7. Build your application. You can use the npm script created by the above mentioned schematic: ``` - npm run build:externals:myProject + npm run build:myProject:externals ``` 8. 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.