Hooks for the angular-cli
Unfortunately I don't have much time to take care of this project, so please contribute when new versions of Angular are released. As an alternative to this package, I recommend taking a look at the angular-builders repo. They are much faster when new Angular versions are released.
Documentation for other versions could be found here:
Install the package:
npm install --save-dev ng-cli-hooks
Update your angular.json
file:
{
...
"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
Currently this plugin contains three different hooks: optionsHook
, webpackHook
and indexHtmlHook
.
This hook modifies the options for the builder at build-time.
Example: hooks/options.js
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;
}
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
module.exports = function(content, options) {
content = content.replace('Ionic App', 'Example App');
return content;
}
This hook can be used to modify the generated webpack-config of angular-cli or to replace it.
During the development of this hook it may be necessary to clear the Angular cache.
Example: hooks/webpack.js
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;
}
If hooks/webpack.js
exports a webpack-config-object, than the generated webpack-config will be replaced by your own.
- Support for Angular 16
- Support for Angular 15
- Support for Angular 13
- Support for Angular 12
- Support for Angular 11
- Support for Angular 8
- Removed builders for
extract-i18n
andcordova-build
- Added
indexHtmlHook
to hook into the index.html build.
- 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)
- added
ng-cli-hooks:cordova-build
for Ionic 4 projects.