Angular2 - 错误：选择器＆＃34; app-root＆＃34;与任何元素都不匹配

时间：2017-06-16 12:52:43

标签： angular

我正在学习Angular 2，没有Angular的经验。 我正在学习本教程：https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/。

添加新组件＆＃34; app-people-list＆＃34;并在index.html中更新相同的内容，我得到以下异常。出了什么问题？

    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>

所有代码完全按照上面的教程链接。但我仍然在下面添加一些细节。

的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：

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：

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：

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 { }

人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();
  });
});

人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() {
  }

}

6 个答案:

答案 0 :(得分：29)

Angular以root组件开头。当你提供

bootstrap: AppComponent

在您的app.modules.ts中，角度搜索HTML中app-root的第一个实例，并使用角度应用替换该标记。 因此，您的AppComponent selector应该与HTML中的根组件匹配。

您需要在 app.component.html中添加其他组件代码，以便angular可以显示它们。它遵循tree结构，其中app-root位于顶部。

答案 1 :(得分：1)

一种简单的方法有时只是创建一个新项目（绝对是可行的），在某些情况下您可能会错过一些东西，这样可以节省一些时间和精力。在学习上。这是我的经验，浪费了将近5个小时才找到无法解决问题的原因，而我能够通过使用基本的启动命令重新创建整个过程并在新的样板上再次更改代码来看到输出。

答案 2 :(得分：1)

当您的javascript代码未关闭时，也会发生这种情况

答案 3 :(得分：0)

就我而言，我已将angular project2的dist内容包含到angular project1的资产目录中，并且试图从http://localhost:4200/assets/project2/index.html访问它。 Bu在project1的组件中包含一个iframe。

project1是使用ng new project1 --prefix project1创建的
project2是使用ng new project2 --prefix project2创建的。

我得到Error: The selector "project1-root" did not match any elements。

处理2个有角项目的方法不是一种优雅的方法，但是我想快速测试一下，但是没有用。我最终将project2作为一个单独的模块包含在project1中。

猜猜，听长辈（对KISS说话）是件好事 =）

答案 4 :(得分：0)

在我的情况下，index.html为空，但是我还有其他文件，例如brand-1.index.html和brand-2.index.html等。在angular.json中，有一个file-replacement index.html。这意味着我需要在构建管道中的某个位置包含--configuration=brand-1或build:ssr:brand-1。

答案 5 :(得分：0)

最好的办法是保存在index.html，app.component.html和app-routing.modile.ts中，可以在应用程序加载时将组件作为默认页面放置。这是错误的因为我还没有创建组件，也没有导入它。

相关问题
最新问题