Hooks for the Angular CLI
npm install ng-cli-hooks
npm install --save-dev ng-cli-hooks
`
Update your angular.json file:
`json
{
...
"projects": {
"app": {
...
"architect": {
"build": {
"builder": "ng-cli-hooks:browser",
"options": {
"optionsHook": "hooks/options.js",
"webpackHook": "hooks/webpack.js",
"indexHtmlHook": "hooks/index-html.js",
...
`
This Plugin contains hookable builders for
- browser
- dev-server
- server
Hooks
Currently this plugin contains three different hooks: optionsHook, webpackHook and indexHtmlHook.
$3
This hook modifies the options for the builder at build-time.
Example: hooks/options.js
`javascript
module.exports = function (options) {
if (process.env.APP_BRANDING) {
var branding = process.env.APP_BRANDING.trim();
if (options.assets) {
options.assets = options.assets.map(asset => {
if (asset.input === 'src/assets') {
asset.input = src/branding/${branding}/assets;
}
return asset;
});
}
}
return options;
}
`
$3
This hook modifies the generated index.html at build-time.
It is only available for the builders browser and dev-server.
Example: hooks/index-html.js
`javascript
module.exports = function(content, options) {
content = content.replace('Ionic App', 'Example App');
return content;
}
`
$3
This hook can be used to modify the generated webpack-config of angular-cli or to replace it.
#### Modify the generated webpack-config
During the development of this hook it may be necessary to clear the Angular cache.
Example: hooks/webpack.js
`javascript
function replaceAngularCompilerPlugin(plugins) {
const plugin = plugins.find(p => p.pluginOptions && p.pluginOptions.directTemplateLoading);
const options = plugin.pluginOptions;
options.directTemplateLoading = false;
}
module.exports = function (generatedWebpackConfig, options) {
generatedWebpackConfig.module.rules.unshift({
test: /\.html$/,
loader: 'string-replace-loader',
options: {
search: /Welcome/ig,
replace: () => 'Welcome to ng-cli-hooks',
flags: 'g'
}
});
replaceAngularCompilerPlugin(generatedWebpackConfig.plugins);
return generatedWebpackConfig;
}
`
#### Replace the generated webpack-config
If hooks/webpack.js exports a webpack-config-object, than the generated webpack-config will be replaced by your own.
Changelog
$3
- Support for Angular 16
$3
- Support for Angular 15
$3
- Support for Angular 13
$3
- Support for Angular 12
$3
- Support for Angular 11
$3
- Support for Angular 8
- Removed builders for extract-i18n and cordova-build
- Added indexHtmlHook to hook into the index.html build.
$3
- Major version of ng-cli-hooks now equals the Angular version (use ng-cli-hooks@7.x.x to work with Angular 7.x.x)
$3
- added ng-cli-hooks:cordova-build` for Ionic 4 projects.