{"_id":"@css_christianscharr/ngx-build-plus","_rev":"2-ec8585c77171fba2276ca953d35953f9","name":"@css_christianscharr/ngx-build-plus","dist-tags":{"latest":"7.7.4"},"versions":{"7.7.3":{"name":"@css_christianscharr/ngx-build-plus","version":"7.7.3","description":"Extensible Builder for the Angular CLI suitable not only for Angular Elements.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/christianscharr/ngx-build-plus.git"},"publishConfig":{"access":"public"},"main":"src/index.js","typings":"src/index.d.ts","builders":"builders.json","schematics":"./schematics/collection.json","scripts":{"tsc":"tsc","copy:sample":"cpr . ../sample/node_modules/ngx-build-plus -d -f node_modules","copy:readme":"cpr ../readme.md ./readme.md -o && cpr ../result.png ./result.png -o","build":"npm run tsc && npm run copy:sample && npm run copy:readme"},"dependencies":{"@schematics/angular":"^7.2.1","cross-spawn":"^6.0.5","rxjs":"^6.3.3","webpack-dev-server":"^3.1.14","webpack-merge":"^4.2.1"},"peerDependencies":{"@angular-devkit/architect":">= 0.10.0","@angular-devkit/build-angular":">= 0.10.0","@angular-devkit/core":">= 0.10.0","rxjs":">= 6.0.0"},"devDependencies":{"@angular-devkit/architect":"^0.12.1","@angular-devkit/build-angular":"^0.12.1","@angular-devkit/core":"^7.2.1","@angular-devkit/schematics":"^7.2.1","@types/node":"^10.12.18","@types/webpack":"^4.4.22","@types/webpack-dev-server":"^3.1.1","cpr":"^3.0.1","typescript":"^3.2.2","webpack":"^4.28.4","webpack-merge":"^4.2.1"},"bugs":{"url":"https://github.com/christianscharr/ngx-build-plus/issues"},"homepage":"https://github.com/christianscharr/ngx-build-plus#readme","_id":"@css_christianscharr/ngx-build-plus@7.7.3","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-Y/VUPFMNVJS9v4k4U9M/1DzKNZLgmP1LZG6Sdtm/Ob+vHdXAN0EcCIcobNVH1N1N/l7IwYBRQcuGTH9ymLmvkQ==","shasum":"fb3da99d4483f19c9a089195941efed7a5f85296","tarball":"https://registry.npmjs.org/@css_christianscharr/ngx-build-plus/-/ngx-build-plus-7.7.3.tgz","fileCount":22,"unpackedSize":182508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcVEv+CRA9TVsSAnZWagAAsY8P/ihsPxTGZV3XsRvlk8bN\nxxaQ1UVSBv9cfRL59+5PgoIRs95yt+aB2IdXcMhV8s4THhAcD79FDogfYgx5\nXpyQOBKnufx8QdrYUBSj5ohC864OwM+fbmIi2KphmtamwyUSQeVCTRWnR0Ft\nZ81r2fUzyooNkxNLMJpwE0Xtn0nWs2AWf4lFmRZXhTaFlySl2ZDBjygrZR4J\ntVluZs+ErXiZeI6s1/+dkFss7TRWDelEmA21mKHCsdO2bGN8OL7XnqiVZ2FX\n3O7Tl57bGW6cyfaaujtv2lWrSjUgVGNYbZwGvj0rKKpiqOTaldCyCVwp1AkS\n6QydM7UnPEcE+/VSRUPlY0Aup9u/tDqOzPyehXf/ze5F1MrB4PCH9GKkJE1a\nw9IWCqTIFqkMvrfvcbrW3HRnN0Y5nToH4mUmYzjHPr7beQNeQEUeghM8XrS6\nepHbP81kiilwpkFzOLAP4L6P0NYKyHg76QoXL9YQL5FfuwtogV+5YQXSnxTl\nLNY9TVX2wl/W/Uyu2bYFBuQLVKW3ZeYtsFuIOoDrOr18QF8iy5oT2mzTmQnt\ne+y03EoYNBPpIMSLVUjU9yqhvL7b/+hA55tESuN6RpkFMrz6C8CMGPtfLeeB\nDiIRkSzWxkHze+RTBsqYq/biNdbgdPGI1H1xKR8is/+tP0VmiCzzfz4I91Oa\nRRU4\r\n=M5Kb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPwCcSSeCbNg/L/YSjvzTEZPcXjjIVBR06wW/l9Z4wowIgHYEZwn5txZDMSZZShLw5DHkEbXswtdRxNurDvyOD2nY="}]},"maintainers":[{"name":"css_christianscharr","email":"christian.scharr@css.ch"}],"_npmUser":{"name":"css_christianscharr","email":"christian.scharr@css.ch"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-build-plus_7.7.3_1549028349534_0.8582368601080319"},"_hasShrinkwrap":false},"7.7.4":{"name":"@css_christianscharr/ngx-build-plus","version":"7.7.4","description":"Extensible Builder for the Angular CLI suitable not only for Angular Elements.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/christianscharr/ngx-build-plus.git"},"publishConfig":{"access":"public"},"main":"src/index.js","typings":"src/index.d.ts","builders":"builders.json","schematics":"./schematics/collection.json","scripts":{"tsc":"tsc","copy:sample":"cpr . ../sample/node_modules/ngx-build-plus -d -f node_modules","copy:readme":"cpr ../readme.md ./readme.md -o && cpr ../result.png ./result.png -o","build":"npm run tsc && npm run copy:sample && npm run copy:readme"},"dependencies":{"@schematics/angular":"^7.2.1","cross-spawn":"^6.0.5","rxjs":"^6.3.3","webpack-dev-server":"^3.1.14","webpack-merge":"^4.2.1"},"peerDependencies":{"@angular-devkit/architect":">= 0.10.0","@angular-devkit/build-angular":">= 0.10.0","@angular-devkit/core":">= 0.10.0","rxjs":">= 6.0.0"},"devDependencies":{"@angular-devkit/architect":"^0.12.1","@angular-devkit/build-angular":"^0.12.1","@angular-devkit/core":"^7.2.1","@angular-devkit/schematics":"^7.2.1","@types/node":"^10.12.18","@types/webpack":"^4.4.22","@types/webpack-dev-server":"^3.1.1","cpr":"^3.0.1","typescript":"^3.2.2","webpack":"^4.28.4","webpack-merge":"^4.2.1"},"bugs":{"url":"https://github.com/christianscharr/ngx-build-plus/issues"},"homepage":"https://github.com/christianscharr/ngx-build-plus#readme","_id":"@css_christianscharr/ngx-build-plus@7.7.4","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-ImAZuvdC4z6uBxWpSdgnEGhZQ7FCJpVayNGo9Gd0yJt2JX6Re3tiwSNoE5+uZBVx5AtXw5aV7gb5PpKpxjHsew==","shasum":"6a64118e374718c5c54bc70292e1fa490e2a5379","tarball":"https://registry.npmjs.org/@css_christianscharr/ngx-build-plus/-/ngx-build-plus-7.7.4.tgz","fileCount":22,"unpackedSize":182603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcVE41CRA9TVsSAnZWagAAv4cQAJLHKyIAH29URgBKomaq\nw6s7+Qnzrcpf17dWjxdBQFaOH5NhkIOfYiH1pNRAGSKq7Yk5VsLCfj18VbO7\ni+DgTRhZkULFC5TprK0q42inszNduuSn4s9/k4yDCjkNfS3sSh5C/9mfjv9M\nvcMoIo+cUmkcTP+9WmknboW4TEI9NjMAm0slbS6M5dIKclLCK8pufLEmGJUp\nf/LHamxPtudtJt5LWHX6hnmr/klaBPI3XjfLm4edlIXURVCg2ycVpHsehmrj\nXaUbaPF7hj5V0e/NnyYnmn955ktTD/Ud5VgMqy6UkKERVr5sz6nwaiCGaSjg\n0x+/S06zVhFLla3G9YTt6Zat7MeDQ1HPqrkyfYM9dq+WBRjCqYGQWYd8vSx9\ntzvsGqCX1ajsS9FS6zofRqX/xsG4yYqionfRKQkS5tDAViEjhLR5SVpHV5J0\nobVPJ8CzIRtXjvU4FJL6Ht29xsfVSHLRJvBYwHoWl4Jjr6SyyHS9O7sgJvwe\nYW86m2MjFNeA6uckcO9W4XCj85fUymbyM2KsGTuUjGo5yk6RvZXgcUvSNZKZ\n8NVr79kXjs7VSS0jTBcYlb2HQw5f+O771vVDmGF4YjDsTJ0lUtCdftJ88lAz\nytnzUPT/VBm12c+lU5DINjiBBKeQBj90hGyWXoYhky0iIUzK0W1dBUgxfUEW\nVJBN\r\n=cv/9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC85kBb2VaLFNQam9Xy4HZ5kPb/P20dWug0mctnQwcklgIhAIy5SmZr5T79DEze0aP2DxufNUWAa9E3O0jhW0ZO+Biz"}]},"maintainers":[{"name":"css_christianscharr","email":"christian.scharr@css.ch"}],"_npmUser":{"name":"css_christianscharr","email":"christian.scharr@css.ch"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-build-plus_7.7.4_1549028916405_0.08132658199910292"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-01T13:39:09.316Z","7.7.3":"2019-02-01T13:39:09.687Z","modified":"2022-04-05T02:03:23.512Z","7.7.4":"2019-02-01T13:48:36.530Z"},"maintainers":[{"name":"css_christianscharr","email":"christian.scharr@css.ch"}],"description":"Extensible Builder for the Angular CLI suitable not only for Angular Elements.","homepage":"https://github.com/christianscharr/ngx-build-plus#readme","repository":{"type":"git","url":"git+https://github.com/christianscharr/ngx-build-plus.git"},"bugs":{"url":"https://github.com/christianscharr/ngx-build-plus/issues"},"license":"MIT","readme":"# ngx-build-plus\r\n\r\nExtend the Angular CLI's default build behavior without ejecting:\r\n\r\n- 📄 Extend the default behavior by providing a **partial** config that just contains your additional settings\r\n- 📄 Alternative: Extend the default behavior by providing a custom function\r\n- 📦 Optional: Build a single bundle (e. g. for Angular Elements)\r\n- ☑️ Inherits from the default builder, hence you have the same options\r\n- 🍰 Simple to use \r\n- ⏏️ No eject needed\r\n\r\n## Credits\r\n\r\nBig thanks to [Rob Wormald](https://twitter.com/robwormald) and [David Herges](https://twitter.com/davidh_23)!\r\n\r\n## Tested with CLI 6.x and CLI 7.0.x\r\n\r\nThis package has been created and tested with Angular CLI 6.x. and CLI 7.0.x. If the CLI's underlying API changes in future, I'll provide an respective update for this version too until the CLI has build-in features for the covered use cases.\r\n\r\n## Breaking Change in Version 7\r\n\r\n- The switch ``single-bundle`` now defaults to ``false`` to align with the CLI's default behavior.\r\n\r\n## Example\r\n\r\nhttps://github.com/manfredsteyer/ngx-build-plus\r\n\r\n## Getting started\r\n\r\nThis 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.\r\n\r\nPlease find the example shown here in the sample application in the folder ``projects/getting-started``.\r\n\r\n1. Create a new Angular project with the CLI\r\n2. Add ngx-build-plus: ``ng add ngx-build-plus``\r\n   \r\n   **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``\r\n  \r\n   **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``.\r\n   \r\n3. Add a file ``webpack.partial.js`` to the root of your (sub-)project:\r\n\r\n    ```javascript\r\n    const webpack = require('webpack');\r\n\r\n    module.exports = {\r\n        plugins: [\r\n            new webpack.DefinePlugin({\r\n                \"VERSION\": JSON.stringify(\"4711\")\r\n            })\r\n        ]\r\n    }\r\n    ```\r\n4. Use the global variable VERSION in your ``app.component.ts``:\r\n\r\n    ```typescript\r\n    import { Component } from '@angular/core';\r\n\r\n    declare const VERSION: string;\r\n\r\n    @Component({\r\n    selector: 'app-root',\r\n    templateUrl: './app.component.html',\r\n    styleUrls: ['./app.component.css']\r\n    })\r\n    export class AppComponent {\r\n    title = 'Version: ' + VERSION;\r\n    }\r\n    ```\r\n\r\n5. Start your application with the ``--extra-webpack-config`` switch pointing to your partial webpack config:\r\n\r\n    ```\r\n    ng serve --extra-webpack-config webpack.partial.js -o\r\n    ```\r\n\r\n    If your project is a CLI based sub project, use the ``--project`` switch too:\r\n\r\n    ```\r\n    ng serve --project getting-started -o --extra-webpack-config webpack.partial.js\r\n    ```\r\n\r\n    **Hint**: Consider creating a npm script for this command.\r\n\r\n6. Make sure that the VERSION provided by your webpack config is displayed.\r\n\r\n## Using Plugins\r\n\r\nPlugins allow you to provide some custom code that modifies your webpack configuration. In addition to that, they also provide a pre- and a post-hook for tasks that need to take happen before and after bundling. This is an example for an plugin:\r\n\r\n```typescript\r\nexport default {\r\n    pre() {\r\n        console.debug('pre');\r\n    },\r\n    config(cfg) {\r\n        console.debug('config');\r\n        return cfg;\r\n    },\r\n    post() {\r\n        console.debug('post');\r\n    }\r\n}\r\n```\r\n\r\nAs this plugin is written with TypeScript you need to compile it.\r\n\r\nThe ``config`` method works like a ``configHook`` (see above).\r\n\r\nTo use a plugin, point to it's JavaScript representation (not the TypeScript file) using the ``--plugin`` switch:\r\n\r\n```\r\nng build --plugin ~dist\\out-tsc\\hook\\plugin\r\n```\r\n\r\nThe prefix ``~`` points to the current directory. Without this prefix, ngx-build-plus assumes that the plugin is an installed ``node_module``.\r\n\r\n## Using different merging strategies\r\n\r\nYou can also use plugins to implement different merging strategies. The following plugin demonstrates this:\r\n\r\n```javascript\r\nvar merge = require('webpack-merge');\r\nvar webpack = require('webpack');\r\n\r\nexports.default = {\r\n    config: function(cfg) {\r\n        const strategy = merge.strategy({\r\n            'plugins': 'prepend'\r\n        });\r\n\r\n        return strategy (cfg, {\r\n            plugins: [\r\n                new webpack.DefinePlugin({\r\n                    \"VERSION\": JSON.stringify(\"4711\")\r\n                })\r\n            ]\r\n        });\r\n    }\r\n}\r\n```\r\nTo execute this, use the following command:\r\n\r\n```\r\nng build --plugin ~my-plugin.js\r\n```\r\n\r\nOne more time, the ``~`` tells ngx-build-plus that the plugin is not an installed node_module but a local file.\r\n\r\n## Advanced example: Externals and Angular Elements\r\n\r\nThis 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.\r\n\r\n*If you are not interested into this very use case, skip this section.*\r\n\r\nThe result of this description can be found in the [repository's](https://github.com/manfredsteyer/ngx-build-plus) ``sample`` directory.\r\n\r\n1. Create a new Angular CLI based project and install ``@angular/elements`` as well as ``@webcomponents/custom-elements`` which provides needed polyfills:\r\n\r\n    ```\r\n    ng add @angular/elements \r\n    npm install @webcomponents/custom-elements --save\r\n    ```\r\n\r\n2. Expose a component as an Custom Element:\r\n\r\n    ```TypeScript\r\n    import { BrowserModule } from '@angular/platform-browser';\r\n    import { NgModule, Injector } from '@angular/core';\r\n    import { createCustomElement } from '@angular/elements';\r\n\r\n    import { AppComponent } from './app.component';\r\n\r\n    @NgModule({\r\n        imports: [\r\n            BrowserModule\r\n        ],\r\n        declarations: [\r\n            AppComponent\r\n        ],\r\n        providers: [],\r\n        bootstrap: [],\r\n        entryComponents:[AppComponent]\r\n    })\r\n    export class AppModule { \r\n\r\n        constructor(private injector: Injector) {\r\n        }\r\n\r\n        ngDoBootstrap() {\r\n            const elm = createCustomElement(AppComponent, { injector: this.injector });\r\n            customElements.define('custom-element', elm);\r\n        }\r\n\r\n    }\r\n    ```\r\n3. Install ``ngx-build-plus``:\r\n\r\n    When using Angular >= 7 and CLI >= 7, you can simply use ``ng add`` for installing ``ngx-build-plus``:\r\n\r\n    ```\r\n    ng add ngx-build-plus \r\n    ```\r\n\r\n    If you are using a monorepo, mention the project you want to install ngx-build-plus for:\r\n\r\n    ```\r\n    ng add ngx-build-plus --project myProject\r\n    ```\r\n\r\n4. **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:\r\n\r\n    ```\r\n    npm install ngx-build-plus --save-dev\r\n    ```\r\n\r\n    After this, update your angular.json:\r\n\r\n    ```json\r\n    [...]\r\n    \"architect\": {\r\n        \"build\": {\r\n            \"builder\": \"ngx-build-plus:build\",\r\n            [...]\r\n        }\r\n    }\r\n    [...]\r\n    ```\r\n\r\n5. Create a file ``webpack.extra.js`` with a partial webpack config that tells webpack to exclude packages like ``@angular/core``:\r\n\r\n    ```JavaScript\r\n    module.exports = {\r\n        \"externals\": {\r\n            \"rxjs\": \"rxjs\",\r\n            \"@angular/core\": \"ng.core\",\r\n            \"@angular/common\": \"ng.common\",\r\n            \"@angular/platform-browser\": \"ng.platformBrowser\",\r\n            \"@angular/elements\": \"ng.elements\"\r\n        }\r\n    }\r\n    ```\r\n\r\n6. Build your application:\r\n\r\n    ```\r\n    ng build --prod --extraWebpackConfig webpack.extra.js --output-hashing none --single-bundle true\r\n    ```\r\n\r\n7. 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.\r\n\r\n    ![Result](result.png)\r\n\r\n8. 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.\r\n\r\n    ```html\r\n    <!doctype html>\r\n    <html lang=\"en\">\r\n    <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>ElementsLoading</title>\r\n    <base href=\"/\">\r\n\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">\r\n    </head>\r\n    <body>\r\n\r\n    <!-- Consider putting the following UMD (!) bundles -->\r\n    <!-- into a big one -->\r\n\r\n    <!-- core-js for legacy browsers -->\r\n    <script src=\"./assets/core-js/core.js\"></script>\r\n\r\n    <!-- Zone.js -->\r\n    <!-- \r\n        Consider excluding zone.js when creating\r\n        custom Elements by using the noop zone.\r\n    -->\r\n    <script src=\"./assets/zone.js/zone.js\"></script>\r\n\r\n\r\n    <!-- Polyfills for Browsers supporting \r\n            Custom Elements. Needed b/c we downlevel\r\n            to ES5. See: @webcomponents/custom-elements\r\n    -->\r\n    <script src=\"./assets/custom-elements/src/native-shim.js\"></script>\r\n\r\n    <!-- Polyfills for Browsers not supporting\r\n            Custom Elements. See: @webcomponents/custom-elements\r\n    -->\r\n    <script src=\"./assets/custom-elements/custom-elements.min.js\"></script>\r\n\r\n\r\n    <!-- Rx -->\r\n    <script src=\"./assets/rxjs/rxjs.umd.js\"></script>\r\n\r\n    <!-- Angular Packages -->\r\n    <script src=\"./assets/core/bundles/core.umd.js\"></script>\r\n    <script src=\"./assets/common/bundles/common.umd.js\"></script>\r\n    <script src=\"./assets/platform-browser/bundles/platform-browser.umd.js\"></script>\r\n    <script src=\"./assets/elements/bundles/elements.umd.js\"></script>\r\n\r\n    <!-- Calling Custom Element -->\r\n    <custom-element></custom-element>\r\n\r\n    </body>\r\n    </html>\r\n    ```\r\n\r\n9. Test your solution.\r\n\r\n**Hint:** For production, consider using the minified versions of those bundles. They can be found in the ``node_modules`` folder after npm installing them.\r\n\r\n**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.\r\n\r\n","readmeFilename":"README.md"}