Surrounding index.html tags within app component my be nice to have.

[mikeandersun]

I Think the angular 2 approach is get data from APIs and render all things from client. But with MVC server frame work we have many features to have. With the angular2 approach I think we must release that features and just send data to the client.

In some case we just need some ajax call to server to do some functionalities (e.g like a thing , add it to favorites,...)
We can do this cases with angular 1 but with angular2 can't and we must to create corresponding components for MVC server side views and it is re architecture any things again.
In my opinion surrounding index.html tags with app component my be nice to have.

<app>
existing html tags
</app>

thanks for attentions.

[zoechi]

Does your app's template contain an <ng-content></ng-content> tag?
I don't know how well this works on the root component (I think to remember an open issue about this) but basically this is how this can be done in Angular2.

[mikeandersun]

No,can you give me a reference about <ng-content></ng-content> please?
You think with <ng-content></ng-content> I can do it?

[sasxa]

Selector app is random, you can use body instead... Then just include <ng-content></ng-content> in your component template. Here's an example: http://plnkr.co/edit/ymShbywytnPofpkp5vSg?p=preview

I notice weird issue <ng-content></ng-content> doesn't work, but <ng-content> </ng-content> (with space) works...

[mikeandersun]

@sasxa using body all body of index.html go away and replace with `

`

a the page display a plank page.
I think what i searching for it not possible in Angular 2.!!!

[ericmartinezr]

@sasxa actualy it doesn't work. When leaving a space between ng-content it throws an error which means ng2 never completely compiles so in that case it's not ng2 doing anything, it's the browser rendering the html (see the DOM, there's pure html).

[robwormald]

I don't think this is going to be supported, as angular is primarily designed as a single-page application framework, and the intent is angular should control the content inside the root app element.

That said - you should have a look at the https://github.com/angular/universal project, which enables pre-rendering of angular apps on the server side.

[mikeandersun]

So angular 2 not Angular, it is SPA-Angular :)

[robwormald]

Perhaps you could explain further what your use case is exactly? A root <app> component has it's own template, and thus it would be replaced when the application boots. In theory, ng-content might enable this, but it would be unlikely you'd have any functionality available this way.

Again, if its a question of pre-rendering content, universal is designed to handle this case.

[mikeandersun]

Yes, I want to have a sever-side rendered page with Asp.net MVC 6. They have some try with universal here https://github.com/aspnet/NodeServices. But i think if we can add multi root components on the index.html thay solve many issues( that at least i have).
In my opinion Angular 1.x is suitable for web and angular 2 is suitable for mobile and SPA. I think a single page aplication is different from a web application.

[robwormald]

You should watch https://channel9.msdn.com/Events/ASPNET-Events/ASPNET-Fall-Sessions/ASPNET--Spa - which demos an (experimental) ASP + Angular2 universal setup.

[davidkudera]

I would also appreciate this. I'm working on one website which uses Angular 1, but is otherwise written in PHP (25% javascript, 75% PHP). This website is quite large and is still under active development (few years already). So we can't rewrite everything to SPA just because one library, no matter how cool this library is.

Simultaneously I'm also creating soon to be open source application in Angular 2 and now after few weeks I really wanted to upgrade our website to Angular 2 too. Unfortunatelly I'm getting a bit frustrated, because Angular 2 is so easy to use that I can't even use any other js framework anymore...

Is there any chance that this will be implemented even with this in bootstrap doc.

Thanks

[enzoaeneas]

This affects third party web components as well.

[coryrylan]

Running into similar issues as well. Looking into this as angular 2 adoption grows this will become more of a problem. Most large websites and angular apps have some sort of angular mixed in with their server rendering. Any form of migration to Angular 2 would be very difficult without support for this. Using Angular Universal is not a great option if you already have a large application in place. Just looking at https://www.madewithangular.com/ only a few of these examples are pure Angular SPA's.

Another use case I ran into, I create a SPA behind a login wall but have a few public facing views on another server stack. I can't reuse any components from Angular 2 and now I am having to recreate components in a different js lib that does support running on pre rendered views.

Ideally it would be beneficial to be able to bootstrap the body tag without replacing pre rendered content similar to Angular 1.

[joshwiens]

@splintercode - I'm in pretty much the same boat. SPA behind authentication / authorization with a few public walboard(ish) views.

This really would be beneficial during the conversion process for those of us with large applications.

[klinki]

👍 I also need similar functionality. I'm creating data analytics application with dashboard and several widgets. I want to develop widgets in angular2, but I don't control the whole application, so I cannot use the SPA approach. In angular1 this would be fine, but in angular2 so far it seems impossible :(

[robwormald]

You can also bootstrap many applications into a page, and have them share a single root injector, if that style would work for you: http://plnkr.co/edit/jiZsZLiybmATsC4CGtUL?p=preview

[klinki]

Thanks, this seems fine :) I was thinking about that, but I wasn't sure if it is possible.

Now I'm dealing with one more problem - is it possible to pass input parameters into root component?
This stackoverflow post says it is not: http://stackoverflow.com/questions/33152914/angular-2-external-inputs but it is quite old and things may have changed since then.

[zoechi]

@klinki No, @Input() on root components is not supported. A workaround is shown in http://stackoverflow.com/a/34988990/217408

[realityfilter]

Is this a duplicate of #1858 (#4946, #6968)?

As commented on #1858 component projection for root components is a must have for migrating a lot of angular1 solutions.

[michaill]

only to save the time for other developers: bootstraped component evals only once. it is nice to bootstrap more applications into a page, but if you need multiple evaluations of a component (selector is contained in HTML more than once), you still have to wrap some part of code with an "outer" component and than use another component as a directive. If you wrap your code with outer component, you will meet such a problems mentioned in #1858 .
There is no way to refactor your front-end to Angular2 when you work on large site with many views, other than make totally new version of the site. I spend many days trying to achieve this before I decided to leave angular2

[abram27]

Agree with the need to incrementally add angular 2 to older projects. It would be helpful to have a tag that prevents certain passed through content to be skipped by the angular parser assuming that ng-content actually gets implemented for root components.

[zoechi]

<ng-content> for the root component is not planned AFAIK for security reasons.

[abram27]

Is there a reference on how this would be a issue with security? Seems no different than manually injecting a different templateUrl into a component. Nevermind, decided to drop angular 2 from our projects, it seemingly is missing a lot of features for integration with other frameworks. The division of packages seems odd since you can't use the features in isolation. Guess it probably works well in a silo if you are willing to take on the whole framework and specifically for a spa.

[DzmitryShylovich]

@zoechi it's not actually true. See #4946 (comment)

[mikeandersun]

I thinks Custom Elements will come to embellish and beautify View(V) of Server side MVC platforms like .NetCore .
https://next.angular.io/guide/custom-elements
Am I correct?

[splincode]

@mikeandersun @IgorMinar Is the issue relevant?

[alxhub]

Closing as:

• there are some interpretations that this issue would be solved by content projection for root elements, so in that sense it's a duplicate of ng-content projection for root component #4946.
• Angular already supports dynamically creating as many components on a page as needed. @angular/elements is a great way to make this process more automatically.