1

I am new to angular 6 and developing admin panel for teachers. i developed the whole admin panel without any problem. After developing admin client gave me a separate html file for login purpose. that's where the whole problem started. So i decided to do it by routing. I created layout for admin panel as well as the login page. But now i am getting ** "app-root" selector did not match** error.

Below is my appComponent typescript

import { Component, OnInit, Inject } from '@angular/core';
import {ToastrService} from './services/toastr.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [],
  providers:[ToastrService]
})
export class AppComponent  {
  }

This is my index.html

<app-root>loading....</app-root>

below is th errror i am getting

the selector "app-root" did not match any elements
at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.selectRootElement (platform-browser.js:1073)
at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.selectRootElement (animations.js:229)
at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.selectRootElement (core.js:20837)
at createElement (core.js:17499)
at createViewNodes (core.js:19737)
at createRootView (core.js:19690)
at callWithDebugContext (core.js:20722)
at Object.debugCreateRootView [as createRootView] (core.js:20208)
at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:18029)
at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:7812)

What i am missing. Any one please help.

zaid khan
  • 203
  • 3
  • 13

1 Answers1

5

I was able to solve a similar problem by adding a body tag to my index.html that encloses the app-root tag as follows:

<body>
<app-root></app-root>
</body>
Daricus Duncan
  • 51
  • 1
  • 2