How to config Angular locale with different subPath but same baseHref

Question

The 'baseHref' field under 'i18n.sourceLocale' is deprecated and will be removed in future versions. Please use 'subPath' instead.
Note: 'subPath' defines the URL segment for the locale, acting as both the HTML base HREF and the directory name for output.
By default, if not specified, 'subPath' uses the locale code.

This is what I have now.

 "i18n": {
 "sourceLocale": {
 "code": "en",
 "baseHref": ""
 },
 "locales": {
 "zh-hans": {
 "translation": "src/locale/messages.zh-hans.xlf",
 "baseHref": ""
 }
 }
 }

Angular suggest to set subPath. But then, what about baseHref? I don't want to change baseHref. Each of my locale app shares the same baseHref even though they are under different sub path.

I don't know how to configure this without using baseHref but only subPath.

I tried subPath.

The subPath works correctly with the directory name yet the base in index.html got changed as well with the locale segement which is not what I wanted.