My Angular 7 app is telling me 'The selector ... did not match any elements'
Question
I'm using Angular 7. I have created a custom component, with the definition defined at 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: [''],
});
}
}
My src/app/app.module.ts looks like this
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 { }
My src/index.html file looks like this
<!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>
Unfortunately, when I start up my app I get this JS error
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
I'm missing somethign real simple but I can't tell what it is. Any help is appreciated.
Below is my src/index.html file after suggested answers ...下面是我的 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>
5 answers
solution1
0 2019-06-18 02:19:55
将<app-organization></app-organization>放入你的 app.component html
solution2
0 2019-06-18 02:29:58
You should not edit the index.html . bootstrap component must be included at least. Name of selector is <app-root> by default. You can find out that in app.module.ts
Try the follow:
index.html
<app-root></app-root>
app.component.html
<app-organization></app-organization>
solution3
0 2019-06-18 02:54:39
我不知道为什么人们说不建议在 index.html 中使用任何组件，但只有在 app.module.ts 中的 entryComponents 数组中声明它时，您才绝对可以将它添加到那里
solution4
0 2019-06-18 04:36:36
Try this:-
1) create organization.component.ts and a organization.module.ts
2)Now your organization.module.ts is your parent module.
bootstrap: [OrganizationComponent]
export class organizationalModule{}
3) main.ts
platformBrowserDynamic().bootstrapModule(organizationalModule)
.catch(err => console.log(err));
4) Now in index.html
<body>()
<app-organization></app-organization> <=== Here, root selector(now app-
<===== organization) resides
</body>
or,
index.html
<body><app-root></app-root></body>
app.component.html
<app-organization></app-organization> <=== Inside (app-root, which is parent)
solution5
0 2020-04-24 05:16:59
If you're creating a custom Angular Elements component in Angular 9+, I have removed this error by doing the following:
- In your app.module.ts file remove the default "bootstrap" array
- create an ngDoBootstrap method in your app.module.ts file. My app.module.ts file looks like this:
@NgModule({
declarations: [
AppComponent,
CustomFormComponent
],
imports: [
BrowserModule
],
})
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
const el = createCustomElement(CustomFormComponent, { injector: this.injector });
customElements.define('custom-form', el);
}
}
It took me a bit of trial and error so hopefully this helps someone.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.