2

Does anyone know why I get this error when the page loads the first time in my Angular2 app? It clears away and doesn't come back as I navigate through my app. If I hit CTRL+F5 it tends to come back (though not every single time!). This routing for this app looks like this:

AppComponent.ts
  LoginComponent.ts
  DashboardComponent(Parent route with its own child routes)
    MainDashboardComponent
    EmployeesComponent

The top level index.html file has the <my-app></my-app> tag in it that the error complains about periodically so I'm confused how it could be that it wouldn't see that tag on the page!

Error Details:

EXCEPTION: The selector "my-app" did not match any elementsBrowserDomAdapter.logError @ angular2.dev.js:22823BrowserDomAdapter.logGroup @ angular2.dev.js:22834ExceptionHandler.call @ angular2.dev.js:1163(anonymous function) @ angular2.dev.js:12481NgZone._notifyOnError @ angular2.dev.js:13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13309run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:13360run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22823 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:22823ExceptionHandler.call @ angular2.dev.js:1165(anonymous function) @ angular2.dev.js:12481NgZone._notifyOnError @ angular2.dev.js:13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13309run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:13360run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22823 Error: The selector "my-app" did not match any elements at new BaseException (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7104:21) at DomRenderer.selectRootElement (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13724:15) at HostViewFactory.viewFactory_HostAppComponent0 [as viewFactory] (viewFactory_HostAppComponent:72:18) at AppViewManager_.createRootHostView (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9226:34) at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12246:46 at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:138:17) at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13328:32) at zoneBoundFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:111:19) at lib$es6$promise$$internal$$tryCatch (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1511:16) at lib$es6$promise$$internal$$invokeCallback (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1523:17)

-----async gap----- Error at _getStacktraceWithUncaughtError (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26) at Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40) at Zone.bind (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:109:48) at bindArguments (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:980:29) at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1000:37) at DynamicComponentLoader_.loadAsRoot (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12245:49) at di_1.provide.useFactory (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12343:39) at Injector._instantiate (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11354:19) at Injector._instantiateProvider (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11287:21) at Injector._new (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11277:19)

-----async gap----- Error at _getStacktraceWithUncaughtError (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26) at Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40) at NgZone._createInnerZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13316:39) at new NgZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13182:32) at createNgZone (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12365:12) at PlatformRef_.application (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12440:31) at Object.bootstrap (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24543:64) at execute (http://localhost:3000/app/main.js:15:23) at ensureEvaluated (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3202:26) at Object.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3323:13)BrowserDomAdapter.logError @ angular2.dev.js:22823ExceptionHandler.call @ angular2.dev.js:1166(anonymous function) @ angular2.dev.js:12481NgZone._notifyOnError @ angular2.dev.js:13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13309run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:13360run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:13328zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305

2
  • I guess this needs more information. Can you create a Plunker? Commented Feb 6, 2016 at 9:45
  • @emirhosseini.. this requires more code.can you post your component code? Commented Feb 26, 2016 at 5:55

8 Answers 8

5

Probably you should add your <script> tag in your index.html file after </body> tag.

Your script should run after DOM is ready.

Update:

<body>
  <my-app>Loading...</my-app>
  <script>
    //Your scripts
  </script>
</body>
1
1

I guess there is no element in index.html that matches the selector in AppComponent.

0

In your index.html should match to your app.ts component selector for router

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `

///////////////////

<body>
    <script>
        System.config({
            packages: {
                appScripts: {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('appScripts/app')
              .then(null, console.error.bind(console));
    </script>
       <my-app></my-app> <!--  -->
</body>
0

I think everyone needs clarification about the error which occurred due to following things:

  • Initially when angular-cli creates application it will loades "app-root" component (you can check this in app.module.ts)

bootstrap: [MainComponent]

  • when you need to initiate application as per our provided component , you need to import that component in app.module.ts and add that component to "bootstrap" array.

bootstrap : [LoginComponent]

  • another thing to remember , when angular-cli creates app it will use "app-root" component to redirect on localhost:4200 , that means when you run app you initially see the app.component.html (view)

  • this will done in index.html file as follows

    <body>
    <app-root></app-root> 
    </body>
    
  • to run app on our provided initial you need to change this used component selector

    <body> 
    <app-login></app-login> 
    </body>`
    
0
  1. Make sure that the selector specified in the @Component section of your LoginComponent.ts file is linked to the correct templateUrl and styleUrls values.

  2. Add the LoginComponent into your bootstrap array (in the app.module.ts file) to make it bootstrap: [LoginComponent].

0

I have got the same issue and if you add your selector in your index.html of angular app it works.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pcms</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-login></app-login>
</body>
</html>

Hope it helps!.

0

sure you use app-routing and must change the selector: 'my-app' to 'app-root'

  @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })
-1

I had the same Problem. I check index.html and app tag was missing. If you have selector as my-app than my -app tag should be present

<html>
<head>
  <meta charset="utf-8">
  <title>InvoiceAngularUIFinal</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app>Loading...</app>
</body>
</html>
2
  • But the original post clearly states that "The top level index.html file has the <my-app></my-app> tag in it"
    – Graham
    Commented Jun 5, 2017 at 14:31
  • please check in app.component.ts and check selector import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app', templateUrl: 'app.component.html' }) export class AppComponent { }
    – Gaurav1234
    Commented Jun 7, 2017 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.