Support multiple templateUrl in a component, like styles Urls

[lixaotec]

Which @angular/* package(s) are relevant/related to the feature request?

No response

Description

Sometimes we wish to break template into pieces or reuse some html with some specialization (inheritance)

Proposed solution

Templateurl: ['tempa.component.html', 'tempb.component.html']

Alternatives considered

Webpack and othsr bundlers cant accomplish this anymore

[maximLyakhov]

Dev community wrote numerous posts about "Composition over Inheritance", which helps write readable and maintainable code. Also inherited components result in 2 compilations, which is a mess to use and debug.
2 cents here: try to write as little templates as possible and break down components as small as possible, it will be easier to build apps.

[lixaotec]

Dear @maximLyakhov ,

Thanks for your thoughts... i just dont agreee.
I know composition is simple to reasoning, however this should not be the only way to achieve inheritance.
Ppl who knows to use inheritance, could get more productivity, as I do.

Composition requires a lot of interfacing, as it 'hides' the whole component (base) behavior.
With inheritance we have access to 100% of the code, and its there. Typescript is OOP. Angular is OOP.

So whats the matter for not allowing a simple task that is a template concatenation for achieving that?

Recently @crisbeto achieved a changing for v17, where it allows to use one single style for the component.
I belive its a similar task, to join 2 template before compiler does its jobs, and thats all.
It would unlock many possibilities for us.

This feature would not hurts Angular principle in any way, as it already does allow component class inheritance.

hope you get the point.

(ps: I could accomplish that in v15 earliers with webpack and raw-loader. However something changed in v16 also with webpack 5 that it simply wont allow me to do that. raw-loader is deprecated now, and the 'assets/source' as it recommends, give me an error saying i didint choose any loader for the html. I would be easy if angular just supports it.)

[maximLyakhov]

@lixaotec well, Angular developers tend to make simple things overwhelmingly complex.
Basic ng webpack config benefits from interfacing and makes authoring classes with extend from decorated class horrific.
Why would you need two templates anyways? Could we achieve the same goal using stable Angular features?

[lixaotec]

@maximLyakhov wish there is another way. Rewrite my project now is not feasible.
Also I want to leave webpack behind.
However I dont know what tech could I use to append html on the fly before compiling. (that would be enough)
Would you have any suggetion please? (i´m really strggling here).
Im trying Vite, however not sucess till now. And theres little or nothing about it. They also states that build prod should use webpack

Appreciate your help

[maximLyakhov]

@lixaotec could you link stackblitz with comments on what you're trying to achieve?

[lixaotec]

@maximLyakhov

https://stackblitz.com/edit/stackblitz-starters-csrks6?file=src%2Fcomponents%2Ftest.component.ts

thats the whole picture in stackblitz. What i need to get working. (somehow in stackblitz its not recognizing html as module, what works on vscode)

I´ll try to get one working with v15 for sharing here

[maximLyakhov]

@lixaotec I didn't get what you want to achieve and stackblitz isn't loading the code.
You might need

• static template for SEO?
• arbitrary content projection?
• another component rendering the same properties?

[JoostK]

Please find the discussion in #28161.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}