Angular2 - Error: The selector “app-root” did not match any elements

Question

I am learning Angular 2, without prior experience of Angular. I was following this tutorial: https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angula

Answer 1

Angular starts with a root component. When you give

bootstrap: AppComponent 

in your app.modules.ts, angular searches for first instance of app-root in your HTML and replaces that tag with angular application. So, your AppComponent selector should match to the root component in HTML .

You need to add other component code inside app.component.html , so that angular can display them . It follows tree structure where app-root is at the top .

Answer 2

one of the simple way sometimes is just to create a new project (definitely only feasible if you are working on a basic project) - there are cases where you might have missed something - this way you can save some good time and focus on learning. This was my experience wasted almost 5 hours finding the reason why this didnt work and I was able to see output by just recreating the entire thing using basic start commands and code changes again on a new boilerplate.

Answer 3

This also happens when your javascript tag is not closed

Answer 4

The best thing you can do is keep in index.html and in app.component.html and in app-routing.modile.ts, you can put your component i.e. as the default page when the application loads.It's coming error because i haven't created the component as well as have not imported it.

Answer 5

in my case, index.html was empty, but I had other files such as brand-1.index.html and brand-2.index.html etc. In angular.json there was a file-replacement on index.html. This meant I needed to include --configuration=brand-1 or build:ssr:brand-1 somewhere in the build pipeline.

Answer 6

In my case, I had included angular project2's dist content into angular project1's assets dir and I was trying to access it from http://localhost:4200/assets/project2/index.html. Bu Having an iframe inside project1's component.

project1 was created with ng new project1 --prefix project1
project2 was created with ng new project2 --prefix project2.

I was getting Error: The selector "project1-root" did not match any elements.

Not an elegant way to handle 2 angular projects, but I wanted something quick to test, and it didn't work. I ended up including project2 as a separate module in project1.

Guess, listening to elders (to KISS) is a good thing =)