Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ngx-build-plus
Advanced tools
Readme
Extend the Angular CLI's default build behavior without ejecting:
Big thanks to Rob Wormald and David Herges!
ng update ngx-build-plus --force
single-bundle
now defaults to false
to align with the CLI's default behavior.keepPolyfills
and keepStyles
default to true to avoid misunderstandings.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 add ngx-build-plus
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
.
Create a new Angular project with the CLI
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
.
Add a file webpack.partial.js
to the root of your (sub-)project:
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
"VERSION": JSON.stringify("4711")
})
]
}
Use the global variable VERSION in your app.component.ts
:
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;
}
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.
Make sure that the VERSION provided by your webpack config is displayed.
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.
Plugins 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:
export default {
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).
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
.
You can also use plugins to implement different merging strategies. The following plugin demonstrates this:
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")
})
]
});
}
}
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.
Please note, that we don't recomment webpack externals anymore for several reasons (better alternatives, Angular now ships without UMD bundles, etc.). Instead we recomment Webpack Module Federation.
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.
The result of this description can be found in the repository's sample
directory.
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
Expose a component as an Custom Element:
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);
}
}
Install 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
If you are using a monorepo, mention the project you want to install ngx-build-plus for:
ng add ngx-build-plus --project myProject
Add polyfills:
ng g ngx-build-plus:wc-polyfill --project myProject
Execute the externals schematic:
ng g ngx-build-plus:externals --project myProject
This creates a partial webpack config in your project's root:
module.exports = {
"externals": {
"rxjs": "rxjs",
"@angular/core": "ng.core",
"@angular/common": "ng.common",
"@angular/platform-browser": "ng.platformBrowser",
"@angular/elements": "ng.elements"
}
}
Build your application. You can use the npm script created by the above mentioned schematic:
npm run build:myProject:externals
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.
FAQs
Extends the Angular CLI's build process
The npm package ngx-build-plus receives a total of 123,919 weekly downloads. As such, ngx-build-plus popularity was classified as popular.
We found that ngx-build-plus demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.