Angular2-错误:选择器“应用程序根"与任何元素都不匹配 [英] Angular2 - Error: The selector "app-root" did not match any elements
本文介绍了Angular2-错误:选择器“应用程序根"与任何元素都不匹配的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在学习Angular 2，但没有Angular的经验. 我正在关注本教程:
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-angular-2-step-by-step-1-your-first-component/.
在添加了新的组件"app-people-list"并在index.html中对其进行更新之后，我得到了下面的异常.出了什么问题?
And after adding new component "app-people-list" and updating the same in index.html, i get below exception. What went wrong?
Unhandled Promise rejection: The selector "app-root" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2808)
at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.selectRootElement (core.es5.js:13710)
at createElement (core.es5.js:9259)
at createViewNodes (core.es5.js:12225)
at createRootView (core.es5.js:12154)
at callWithDebugContext (core.es5.js:13535)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12852)
at ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (core.es5.js:9945)
at ComponentFactoryBoundToModule.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create (core.es5.js:3333)
at ApplicationRef_.webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap (core.es5.js:4822) Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.selectRootElement (http://localhost:4200/vendor.bundle.js:70399:19)
at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.selectRootElement (http://localhost:4200/vendor.bundle.js:57800:49)
at createElement (http://localhost:4200/vendor.bundle.js:53349:23)
at createViewNodes (http://localhost:4200/vendor.bundle.js:56315:44)
at createRootView (http://localhost:4200/vendor.bundle.js:56244:5)
at callWithDebugContext (http://localhost:4200/vendor.bundle.js:57625:42)
at Object.debugCreateRootView [as createRootView] (http://localhost:4200/vendor.bundle.js:56942:12)
at ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (http://localhost:4200/vendor.bundle.js:54035:46)
at ComponentFactoryBoundToModule.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create (http://localhost:4200/vendor.bundle.js:47423:29)
at ApplicationRef_.webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap (http://localhost:4200/vendor.bundle.js:48912:57)
api.onUnhandledError @ zone.js:643
handleUnhandledRejection @ zone.js:667
_loop_1 @ zone.js:658
api.microtaskDrainDone @ zone.js:662
drainMicroTaskQueue @ zone.js:592
zone.js:645 Error: Uncaught (in promise): Error: The selector "app-root" did not match any elements
Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2808)
at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.selectRootElement (core.es5.js:13710)
at createElement (core.es5.js:9259)
at createViewNodes (core.es5.js:12225)
at createRootView (core.es5.js:12154)
at callWithDebugContext (core.es5.js:13535)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12852)
at
ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (core.es5.js:9945)
at ComponentFactoryBoundToModule.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create (core.es5.js:3333)
at ApplicationRef_.webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap (core.es5.js:4822)
at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.selectRootElement (platform-browser.es5.js:2808)
at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.selectRootElement (core.es5.js:13710)
at createElement (core.es5.js:9259)
at createViewNodes (core.es5.js:12225)
at createRootView (core.es5.js:12154)
at callWithDebugContext (core.es5.js:13535)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12852)
at ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (core.es5.js:9945)
at ComponentFactoryBoundToModule.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create (core.es5.js:3333)
at ApplicationRef_.webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap (core.es5.js:4822)
at resolvePromise (zone.js:770)
at zone.js:696
at zone.js:712
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:141)
at zone.js:818
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
at <anonymous>
所有代码均与上面的教程链接完全相同.但是我仍然在下面添加一些细节.
All the code is exactly as per the tutorial link above. But i am still adding some details below.
index.html:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Calui</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-people-list></app-people-list>
</body>
</html>
app.component.spec.ts:
app.component.spec.ts:
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
}));
});
app.component.ts:
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.module.ts:
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { PeopleListComponent } from './people-list/people-list.component';
@NgModule({
declarations: [ AppComponent, PeopleListComponent ],
imports: [ BrowserModule, FormsModule, HttpModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
people-list.component.spec.ts:
people-list.component.spec.ts:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PeopleListComponent } from './people-list.component';
describe('PeopleListComponent', () => {
let component: PeopleListComponent;
let fixture: ComponentFixture<PeopleListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PeopleListComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PeopleListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
people-list.component.ts:
people-list.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-people-list',
template: `
<p>
people-list Works!
</p>
`,
styleUrls: ['./people-list.component.css']
})
export class PeopleListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
推荐答案
Angular从根组件开始.当你给
Angular starts with a root component. When you give
bootstrap: AppComponent
在app.modules.ts中的
中，角度搜索HTML中app-root的第一个实例，并用角度应用程序替换该标签.
因此，您的AppComponent selector应该与HTML中的根组件匹配.
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 .
您需要在内部添加其他组件代码 app.component.html，以便angular可以显示它们.它遵循tree结构，其中app-root在顶部.
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 .
这篇关于Angular2-错误:选择器“应用程序根"与任何元素都不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
