Angular $templatecache name conflicts

Question

We have a single page application structure with multiple html templates. Multiple developers are pushing their own submodules to app and during bundling process (webpack) we are pushing all these templates to $templatecache.

Inevitably some of the apps partials happen to have same names (dashboard, nav, section etc) and angular is overwriting the templates.

Is there a way to avoid name conflicts during angular template caching process? Or is there any gulp-grunt etc plugin to create unique template names and match-replace them in the htmls?

Answer 1

well, try out longer names which won't conflict...

dashboard, nav, section are generic and will easily conflict

try:

dashboard-for-admin-page, nav-for-submodule-alpha-0, section-right-of-main-page, etc

The way my team does it is we have a folder structure for each module with complex names

Example:

/partials
----/global-partials
--------/header-global.html
--------/footer-global.html
----/main-page
--------/index-for-main-page.html
--------/partial-header-on-main-page.html
--------/left-pane-on-main-page.html
----/about-us-page
----/cart-page
----/search-page