CODEWITHSUNDEEP
typescriptangular5asp.net-core-2.0
Web Dev
Web Dev

Reputation: 2937

ASP.NET MVC Core 2 & Angular 5 Beginner - component not showing up without app-root

I'm trying to get a super basic ASP.NET Core 2 & Angular 5 web application running and am having an issue with a component not showing up, unless I also include the app-root component.

So the symptoms that I'm getting are that if I include the app-root in either Home or Gallery Index.cshtml then it shows up just fine, if I include the thumbnail below that, then that also shows up just fine. However if I remove the app-root and keep the thumbnail, then nothing shows up.

I'm sure I'm missing something super basic and I assume it is because of dependencies or the app.module, but I do not understand Angular well enough at this point to figure it out. I've spent hours googling and trying to figure it out myself to no success :(

All I would like to do is to have a bunch of components that I am able to independently use through different views either together or separately.

Here's the github repo link to the project: https://github.com/rpasechnikov/AspNetCore2Angular5EfCoreSampleWebsite

Thanks!!

Upvotes: 0

Views: 501

Answers (1)

Oscar Paz
Oscar Paz

Reputation: 18292

After some experimentation, I found the problem.

When you place components in the main module's bootstrap array, Angular expects all of them to be rendered on the page. The components in the bootstrap array are not optional, but mandatory. In fact, except when you add both components to the HTML files, you're getting an exception (check your console). The difference is that, when you just miss GalleryThumbnail, the error happens after Angular has rendered AppComponent, which allows you to believe nothing was wrong, when in fact it was. Yes, the page seems to be functional, though I wouldn't trust that it will work correctly.

The problem when you do not include AppComponent is that, in your module, that component is the fist one added to the bootstrap array, so Angular tries to find <app-root> on the page. When it doesn't, it launchs an exception and the bootstrapping ends abruptly, so it never gets to render GalleryThumbnail.

In conclusion, you can't use the bootstrap array to choose between root components. If you want to initialise only one of them, you must:

  1. Change AppComponent's name to something else (HomeComponent?)
  2. Create a new AppComponent and, in its template, you just render either HomeComponent or GalleryThumbnail, based on whichever criteria you want (page URL, some global variable you add to the .cshtml page ...)

You can also use routing to determine which component to show, adding a RouteOutlet to this new AppComponent's template instead of using ngIf or ngSwitch to select which component to render. This way you only have one .cshtml file, and, based on the URL, Angular will render one component or another. This should be your approach when dealing with various pages in Angular, as it is a framework designed for creating SPAs. It is a bit more complicated than just using ngIf in this simple case, but it also is a much more scalable solution, so it's definitely the way to go if you plan on your app to grow and have more routes in the future.

If you decide to change your approach to this one, make sure that you add routes in your ASP.NET core app that match those defined in Angular, and that all of them return your Home/Index.cshtml page.

I hope this helps.

Upvotes: 1

Related Questions