Мое приложение Angular 7 говорит мне: «Селектор ... не соответствует ни одному элементу» - PullRequest
1 голос
/ 18 июня 2019

Я использую Angular 7. Я создал пользовательский компонент, определение которого определено в src / app / organization / organization.component.ts

import { Component, OnInit } from '@angular/core';
import {FormGroup, FormBuilder, Validators} from "@angular/forms";

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

  private organizationForm:FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.organizationForm = this.formBuilder.group({
      name: [''],
    });
  }

}

Мой src / app / app.module.ts выглядит так

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { OrganizationComponent } from './organization/organization.component';


@NgModule({
  declarations: [
    OrganizationComponent
  ],
  imports: [
    BrowserModule, 
    ReactiveFormsModule 
  ],
  providers: [],
  bootstrap: [OrganizationComponent]
})
export class AppModule { }

Мой файл src / index.html выглядит следующим образом

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Orgfrontend</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-organization></app-organization>
</body>
</html>

К сожалению, когда я запускаю свое приложение, я получаю эту ошибку JS

Error: The selector "app-organization" did not match any elements
    at DefaultDomRenderer2.selectRootElement (webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:2857)
    at DebugRenderer2.selectRootElement (webpack-internal:///./node_modules/@angular/core/esm5/core.js:15530)
    at createElement (webpack-internal:///./node_modules/@angular/core/esm5/core.js:10807)
    at createViewNodes (webpack-internal:///./node_modules/@angular/core/esm5/core.js:13961)
    at createRootView (webpack-internal:///./node_modules/@angular/core/esm5/core.js:13889)
    at callWithDebugContext (webpack-internal:///./node_modules/@angular/core/esm5/core.js:15314)
    at Object.debugCreateRootView [as createRootView] (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14597)
    at ComponentFactory_.create (webpack-internal:///./node_modules/@angular/core/esm5/core.js:11494)
    at 

Мне не хватает чего-то очень простого, но я не могу сказать, что это такое.Любая помощь приветствуется.

Редактировать: Ниже приведен мой файл src / index.html после предложенных ответов ...

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Orgfrontend</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-root></app-root>
</body>
</html>

Ответы [ 4 ]

0 голосов
/ 18 июня 2019

Попробуйте это: -

1) создайте organization.component.ts и organization.module.ts

2) Теперь ваш organization.module.ts является вашим родительским модулем.

 bootstrap: [OrganizationComponent]
   export class organizationalModule{}

3) main.ts

platformBrowserDynamic().bootstrapModule(organizationalModule)
    .catch(err => console.log(err));

4) Теперь в index.html

<body>()
 <app-organization></app-organization>  <=== Here, root selector(now app- 
                                       <===== organization) resides
  </body>

или

index.html

<body><app-root></app-root></body>

app.component.html

<app-organization></app-organization> <=== Внутри (app-root, который является родительским) </p>

0 голосов
/ 18 июня 2019

Вы не должны редактировать index.html. компонент начальной загрузки должен быть включен как минимум.Имя селектора по умолчанию <app-root>.Вы можете узнать, что в app.module.ts

Попробуйте выполнить следующее:

index.html

<app-root></app-root>

app.component.html

<app-organization></app-organization>
0 голосов
/ 18 июня 2019

Я не знаю, почему люди говорят, что не рекомендуется использовать какой-либо компонент в index.html, но вы определенно можете добавить его туда, только если объявите его в массиве entryComponents в app.module.ts

0 голосов
/ 18 июня 2019

Поместите <app-organization></app-organization> в ваш app.component html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...