DEV Community

Discussion on: Customizing Angular CLI 6 build  - an alternative to ng eject

Collapse
 
chauhanvishaal profile image
chauhanvishaal

This is amazing to see the hybrid solution actually working.
Thank you very much Evgeny.

At the moment I am have two problems I am trying to resolve.
1) make use of string-replace-webpack-plugin to replace index.html content
I think I have got the configuration right however the loader rule for it just doesnt seem to execute.

I also tried a different plugin webpack-html-string-replace-plugin but it needs usage of HtmlWebpackPlugin which messes up with the ng cli default webpack configuration causing rendering issues.

2) override default builder for protractor such that it is compatible with build and serve architect/targets

Any experience customizing these ?

Loader for string-replace-webpack-plugin
{
//Replace baseUrl with appropriate value as per dev or production mode
test: /index.html$/,
exclude: /node_modules/,
use: [ { loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /@baseUrl/,
replacement: function (match, p1, offset, string) {
// if (isProd)
// return "";
// else if (isDev)
return "/vmi/";
}
}
]
})
}]
}

Collapse
 
jeb profile image
JeB

Regarding 2: they use dev-server target for protractor tests, so using @angular-builders/dev-server should be enough.

Collapse
 
jeb profile image
JeB

Hi,
Thank you very much for the kind words.
Regarding 1 - have you added an instance of StringReplacePlugin to plugins array as the documentation suggests? Another possible issue is the order in which the loader is applied. Prepending your loader instead of appending it might work as well. Here is an example of issue that was fixed by simply changing the order.

Regarding 2 - there is no such a builder but it's definitely an option. Please create a feature request on github and I'll look into it.

If the proposed solution for 1 doesn't work, please open an issue on github so that we could continue the investigation.