선택기 'my-app'이 어떤 요소와도 일치하지 않습니다.
문제는 내 앱을 실행할 때 제대로 작동한다는 것입니다. 그러나 새로 고칠 때 대부분의 경우 메시지 아래에 표시됩니다.
선택기 "my-app"이 일치하는 요소가 없습니다.
하지만 이상한 점은 앱을 새로 고치면 여러 번 작동한다는 것입니다.
그래서 궁극적으로 나는 내 앱의 이상한 동작을 가지고 있으며 이것을 알아낼 수 없습니다.
때로는 작동하지 않는 경우도 있습니다.
어떤 제안, 코드를 얻을 수 없습니까 ???
참고 : 아직 복잡한 구조 나 구성 요소가 없지만 간단한 구현이 있습니다.
이것은 head태그에 내 코드를 가져 왔기 때문에 DOM이 준비되기 전에 잠재적으로 실행되고 부트 스트랩을 시도했기 때문에 발생했습니다.
스크립트를 body태그 맨 아래로 이동 하거나 이벤트 리스너 내에 부트 스트랩 코드를 넣을 수 있습니다.
document.addEventListener("DOMContentLoaded", function(event) {
bootstrap(AppComponent);
});
또는:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example app</title>
</head>
<body>
<my-app></my-app>
</body>
<script src="main.js" charset="utf-8"></script>
</html>
Angular 4 : index.html 파일에서 변경 <app-root></app-root>해야 <my-app></my-app>했습니다.
해야 할 일:
- app.module.ts로 이동합니다 (주 모듈로 이동, 대부분의 경우 이름 임).
" boostrap :" 부분이 있는지 확인하십시오 -추가하지 않은 경우 :
bootstrap: [AppComponent]// 여기서 AppComponent는 주요 구성 요소입니다.지금 작동하는지 확인하십시오. 그렇지 않으면 AppComponent로 이동하여 선택기를 확인하십시오 . index.html 본문의 태그와 동일 해야합니다.
따라서 index.html에는 다음과 같은 내용이 포함되어야합니다.
<body>
<app-root>Loading...</app-root>
</body>
대신 <app-root>기본 AppComponent에서 선택기를 사용해야합니다.
- 외부 웹 사이트에서 앵귤러 앱을 사용하는 경우 앵귤러 파일의 헤더에서 지연 사용을 고려해야합니다.
Angular Universal을 사용할 때도 같은 문제가 발생했습니다. 그러나 그것은 내가 main.node.ts 에서 사용 BrowserModule하고 있기 때문에 해결책은 다음과 같습니다.
imports: [
UniversalModule,
BrowserModule // <- delete this will solve the issue
],
자세한 정보는 여기에서 확인하세요 : https://github.com/angular/universal/issues/542
http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ 에서 angular2 / asp.net 코어 템플릿을 사용하는 경우 마지막 몇 줄을 대체 할 수 있습니다. 다음과 같은 도움이되는 boot-client.ts (그리고 HMR이 페이지를 다시로드 할 때 많은 무서운 콘솔 오류를 방지합니다) :
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
window.onload = () => bootApplication();
location.reload();
} else {
document.addEventListener('DOMContentLoaded', bootApplication);
}
Angular 5.2 앱을 Angular 6.1로 업데이트하고 비슷한 문제가 발생했습니다. 이 경우 문제는 index.html 파일에 전혀없는 것이 었 <body>습니다. 대신 my-app구성 요소에 포함되었습니다 .
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<my-app></my-app>
</html>
생성 된 index.html 에서 스크립트 태그가 끝에 배치 되었기 때문에 Angular 5.2 (및 이전 버전도) 에서 작동했습니다. 6.1로 업그레이드 한 후 스크립트 태그가 파일의 시작 부분에 대신 배치되었습니다 (따라서 <my-app></my-app>루트 요소가 실제로 존재 하기 전에 실행되었다고 가정 합니다.
솔루션은 이동하는 것이었다 <body>에 index.html을 . (누군가를 사용하여 본문 요소에 조건부 클래스를 적용하기를 원했기 때문에 원래 구성 요소에 배치되었습니다 ngClass.)
Non of the above answers resolved my issue .This is how solve the same kind of error. You shouldn't have more than one component as Bootstarp component .So, Bootstrap array should have only one component .By mistake I put 4 components in bootstrap array.I removed those 4 components from there and put in entryComponents array(as shown in the code below).This helped me.
@NgModule({
declarations: [
AppComponent,
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
entryComponents:[
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent
]
})
export class AppModule { }
Maybe you could use the
defer
Tag in your headers js-files.
http://www.w3schools.com/TAgs/att_script_defer.asp
Django+Angular
I had a custom index.html, not the one generated by angular CLI.
I had this error because I placed the generated script files in the <head> section instead of at the end of the closing </body> tag (after the <app-root></app-root> tags)
참고URL : https://stackoverflow.com/questions/35644123/the-selector-my-app-did-not-match-any-elements
'IT TIP' 카테고리의 다른 글
| 업데이트 된 APK를 수동으로 설치하면 '서명이 이전에 설치된 버전과 일치하지 않습니다.'와 함께 실패합니다. (0) | 2020.10.15 |
|---|---|
| HTTPClient 응답에서 GZip 스트림 압축 해제 (0) | 2020.10.15 |
| 파일을 업로드하기위한 fileReader.readAsBinaryString (0) | 2020.10.15 |
| ListView WPF의 헤더를 어떻게 숨길 수 있습니까? (0) | 2020.10.15 |
| Jenkins를 설정할 때 잘못된 명령 ProxyRequests (0) | 2020.10.15 |