The selector “app-root” did not match any elements || angular 6
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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.
angular angular5 angular6 asked Nov 23 '18 at 6:11
zaid khanzaid khan
688
add a comment |
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.
angular angular5 angular6 asked Nov 23 '18 at 6:11
zaid khanzaid khan
688
1
have you added this component in app.module.ts?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:47
either you didn't add component into declaration inside of app-module.ts or you didn't add bootstraping component.
– Vinko Vorih
Nov 23 '18 at 7:42
yeah i have check the suggestion and everything is fine.
– zaid khan
Nov 23 '18 at 8:34
can you post also the app module?
– Alex Suleap
Nov 29 '18 at 15:54
add a comment |
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.
angular angular5 angular6 asked Nov 23 '18 at 6:11
zaid khanzaid khan
688
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.
angular angular5 angular6 angular angular5 angular6 asked Nov 23 '18 at 6:11
zaid khanzaid khan
688
asked Nov 23 '18 at 6:11
zaid khanzaid khan
688
asked Nov 23 '18 at 6:11
zaid khanzaid khan
688
asked Nov 23 '18 at 6:11
zaid khanzaid khan
688
asked Nov 23 '18 at 6:11
zaid khanzaid khan
688
688
1
have you added this component in app.module.ts?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:47
either you didn't add component into declaration inside of app-module.ts or you didn't add bootstraping component.
– Vinko Vorih
Nov 23 '18 at 7:42
yeah i have check the suggestion and everything is fine.
– zaid khan
Nov 23 '18 at 8:34
can you post also the app module?
– Alex Suleap
Nov 29 '18 at 15:54
add a comment |
1
have you added this component in app.module.ts?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:47
either you didn't add component into declaration inside of app-module.ts or you didn't add bootstraping component.
– Vinko Vorih
Nov 23 '18 at 7:42
yeah i have check the suggestion and everything is fine.
– zaid khan
Nov 23 '18 at 8:34
can you post also the app module?
– Alex Suleap
Nov 29 '18 at 15:54
1
1
have you added this component in app.module.ts?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:47
have you added this component in app.module.ts?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:47
either you didn't add component into declaration inside of app-module.ts or you didn't add bootstraping component.
– Vinko Vorih
Nov 23 '18 at 7:42
either you didn't add component into declaration inside of app-module.ts or you didn't add bootstraping component.
– Vinko Vorih
Nov 23 '18 at 7:42
yeah i have check the suggestion and everything is fine.
– zaid khan
Nov 23 '18 at 8:34
yeah i have check the suggestion and everything is fine.
– zaid khan
Nov 23 '18 at 8:34
can you post also the app module?
– Alex Suleap
Nov 29 '18 at 15:54
can you post also the app module?
– Alex Suleap
Nov 29 '18 at 15:54
add a comment |
1 Answer
1
active
oldest
votes
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>
answered Feb 26 at 4:45
Daricus DuncanDaricus Duncan
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441437%2fthe-selector-app-root-did-not-match-any-elements-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
answered Feb 26 at 4:45
Daricus DuncanDaricus Duncan
1
add a comment |
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>
answered Feb 26 at 4:45
Daricus DuncanDaricus Duncan
1
add a comment |
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>
answered Feb 26 at 4:45
Daricus DuncanDaricus Duncan
1
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>
answered Feb 26 at 4:45
Daricus DuncanDaricus Duncan
1
answered Feb 26 at 4:45
Daricus DuncanDaricus Duncan
1
answered Feb 26 at 4:45
Daricus DuncanDaricus Duncan
1
answered Feb 26 at 4:45
Daricus DuncanDaricus Duncan
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441437%2fthe-selector-app-root-did-not-match-any-elements-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
have you added this component in app.module.ts?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:47
either you didn't add component into declaration inside of app-module.ts or you didn't add bootstraping component.
– Vinko Vorih
Nov 23 '18 at 7:42
yeah i have check the suggestion and everything is fine.
– zaid khan
Nov 23 '18 at 8:34
can you post also the app module?
– Alex Suleap
Nov 29 '18 at 15:54