Angular2 cannot find element

Lucas Lacroix

unread,

Jul 8, 2016, 5:10:20 PM7/8/16

to AngularJS

I'm not sure what's going on here.

This is my index.html:

<html>
<head>
    ...
</head>
<body>
    <login>Initializing...</login>
</body>
</html>

The component passed into bootstrap is as follows:

@Component({
    selector: 'login',
    template: template,
    styles: [style.toString()],
    directives: []
})
export class Login {
    constructor() {

    }
}

Yet, when I load my application, I get this exception in the console:

browser_adapter.js:77EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: The selector "login" did not match any elements
ORIGINAL STACKTRACE:
Error: The selector "login" did not match any elements
    at new BaseException (https://apis.localhost/apps/login/app/vendor.js:37578:24)
    at DomRenderer.selectRootElement (https://apis.localhost/apps/login/app/vendor.js:37915:24)
    at DebugDomRenderer.selectRootElement (https://apis.localhost/apps/login/app/vendor.js:13318:40)
    at DebugAppView.AppView.selectOrCreateHostElement (https://apis.localhost/apps/login/app/vendor.js:12866:42)
    at DebugAppView._View_Login_Host0.createInternal (Login_Host.template.js:12:21)
    at DebugAppView.AppView.create (https://apis.localhost/apps/login/app/vendor.js:12844:22)
    at DebugAppView.create (https://apis.localhost/apps/login/app/vendor.js:13037:45)
    at ComponentFactory.create (https://apis.localhost/apps/login/app/vendor.js:9594:37)
    at https://apis.localhost/apps/login/app/vendor.js:7365:45
    at https://apis.localhost/apps/login/app/vendor.js:7343:27

This is my third Angular2 app and this is the only time this has happened. I tried changing the element and selector to "login-form", but the same issue persisted.

Steven Luke

unread,

Jul 8, 2016, 5:54:28 PM7/8/16

to AngularJS

Unfortunately, that is not a whole lot to go on. Check your systemjs.config to make sure the paths are assigned correctly. Make sure there is nothing in the login module that is preventing it from transpiling, make sure syntax is all 100% and objects that you reference exist.

Lucas Lacroix

unread,

Jul 8, 2016, 6:25:13 PM7/8/16

to AngularJS

There are no syntax or network errors in the console, so it is neither a syntax issue nor a typo in a file name. Even if that were the issue, the error indicates it can't find the 'login' element in index.html. The question is: how is bootstrap not finding the element when it clearly and definitely exists.

Additionally, document.getElementsByTagName('login') correctly returns the login element.

To be perfectly clear: the error does not indicate a missing component but instead indicates that the main component (the one passed to bootstrap) has a selector that does not match any elements.

On Fri, Jul 8, 2016, 17:54 Steven Luke <steve...@gmail.com> wrote:

Unfortunately, that is not a whole lot to go on. Check your systemjs.config to make sure the paths are assigned correctly. Make sure there is nothing in the login module that is preventing it from transpiling, make sure syntax is all 100% and objects that you reference exist.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Steven Luke

unread,

Jul 9, 2016, 10:30:23 AM7/9/16

to AngularJS

" The question is: how is bootstrap not finding the element when it clearly and definitely exists."

As far as the bootstrapper knows, it doesn't exist. So you have to figure out why not. There are various reasons (not transpiled because of error, not in the location the code says it is, development not synced with the running application)...

"Additionally, document.getElementsByTagName('login') correctly returns the login element."

Which tells you the <login></login> tags are in the DOM, as you would guess from the fact that you put them in the index.html file. It does not tell you anything else. Those tags should trigger a lookup for the component with the login selector, but it doesn't find one. Which means whatever you are expecting to be loaded is not being loaded, either because you are passing in the wrong thing, or the right thing does not exist.

I did a quick check to make sure <login> isn't some special keyword and it isn't. See this plunker: https://embed.plnkr.co/8cYSrPackDFxPTas951o/. That shows that there isn't anything special with <login></login> which means any issues you are seeing are a problem with something you aren't showing.

I assume when you have template: template that you are just shortening your posted code to remove the actual template code right?

Lucas Lacroix

unread,

Jul 9, 2016, 11:15:06 AM7/9/16

to AngularJS

It is the entire example except the CSS and HTML of the component have been excluded for brevity. They are inconsequential as the code isn't even getting as far as processing it - we are still bootstrapping which means we haven't even instantiated any components yet and the manipulation of the HTML and CSS hasn't occurred yet. Regardless, the HTML snippet is just a DIV tag and the CSS is empty.

Bootstrap is being called with a single argument: the login component class. It inspects the annotations on the class and sees the selector "login". It then searches the DOM for an element matching that selector and can't find it, therefore, bootstrapping fails. The error occurs before the component is instantiated.

If it were a problem with the transpiled code, then it would be a different error - I know because I have seen that issue before. I have never seen bootstrap unable to find the element described by the selector on the main component. The only way I see this as happening is if bootstrap isn't waiting for the document onload event, which seems silly.

So, if anyone else has seen this issue before, I'd appreciate their input. I have a second app which was used as the scaffold for this app and it works just fine.

--

Gerard Lanphear

unread,

Jul 10, 2016, 12:56:54 PM7/10/16

to AngularJS

I Think that Steven may be on point with his latest comment. template: template is not a thing. Also, I am not sure what passing an empty directives declaration is going to do. It's probably OK, but not sure about that. Key to many issues is showing us the imports. My main.ts has just one command bootstrap(AppComponent) and AppComponent has a bunch more in it than you show here. I hate to say this because it burns me everytime I read it, but maybe try a plunkr.

Lucas Lacroix

unread,

Jul 10, 2016, 1:50:32 PM7/10/16

to AngularJS

The example really is this simple and it us not a problem with imports.

In order for bootstrap to get to the point where it is looking for the element in the DOM and throwing this error, all imports would have to be completed and all Javascript interpreted successfully. Otherwise, there would be no annotated class for it to inspect and no way for it to know to look for this element.

I'm going to move the call to bootstrap into the onload event of the document to see if that helps.

--

Lucas Lacroix

unread,

Jul 11, 2016, 11:14:39 AM7/11/16

to AngularJS

I updated to rc4 from rc1. The error is now: "Error during instantiation of AnimationDriver!" which, conveniently, had results in Google. The issue is as I thought: bootstrap does not wait for the onload event.

I have changed my code to do this:

window.addEventListener('load',(evt)=> {boostrap(Login);});

This now works.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

Reply all

Reply to author

Forward