선택기 "my-app"이(가) 어떤 요소와도 일치하지 않습니다.
문제는 앱을 실행했을 때 잘 작동한다는 것입니다.하지만 새로고침을 하면 대부분 msg를 밑돌게 됩니다.
선택기 "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: 옷을 갈아입어야 했습니다.<app-root></app-root>와 함께<my-app></my-app> 파일 index.dll 파일에 .
해야 할 일:
- app.module.ts(기본 모듈, 대부분의 경우 이름)로 이동합니다.
부품 "boostrap:"이 있는지 확인합니다. 부품이 없으면 추가합니다.
bootstrap: [AppComponent]의 주요 구성 요소입니다.지금 작동하는지 확인하고, 작동하지 않으면 AppComponent로 이동하여 선택기를 확인합니다.index.html의 본문 태그와 같아야 합니다.
따라서 index.dll에는 다음과 같은 것이 포함되어야 합니다.
<body>
<app-root>Loading...</app-root>
</body>
대신에<app-root>.
- 외부 웹 사이트에서 각도 앱을 사용하는 경우 각도 파일에 대해 지연 헤더를 사용하는 것을 고려해야 합니다.
위의 답변 중 어떤 것도 제 문제를 해결하지 못했습니다.이것이 같은 종류의 오류를 해결하는 방법입니다.Bootstarp 구성 요소로 두 개 이상의 구성 요소를 사용하면 안 됩니다.따라서 부트스트랩 배열에는 하나의 구성 요소만 있어야 합니다.실수로 부트스트랩 배열에 4개의 구성요소를 넣었습니다.저는 거기서 4개의 구성 요소를 제거하고 아래 코드에 표시된 대로 구성 요소 배열을 입력했습니다.이게 도움이 됐어요.
@NgModule({
declarations: [
AppComponent,
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
entryComponents:[
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent
]
})
export class AppModule { }
Angular Universal을 사용할 때도 같은 문제가 발생했습니다.하지만 그것은 내가 사용하고 있기 때문입니다.BrowserModulemain.node.ts에서 솔루션은
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>into index.html.(원래는 누군가가 바디 요소에 조건부 클래스를 적용하기를 원했기 때문에 구성 요소에 배치되었습니다.ngClass.)
부트스트랩 구성 요소를 에서 변경했을 때 이 문제가 발생했습니다.AppComponent새 구성 요소로.변경 시 기본적으로 변경해야 합니다.index.html뿐만 아니라.index.html부트스트랩 구성 요소를 포함해야 합니다.
예를 들어, 다음을 변경하는 경우app-component로.app-login에app.module.ts부트스트랩 섹션에서 업데이트해야 합니다.index.html이것처럼.
<body>
<app-login></app-login>
</body>
새 구성 요소를 생성할 때 아래 문제를 해결하려면 아래 단계를 따라야 합니다.
단계-1 - 다음을 사용하여 새 구성 요소 생성ng g c lakshya2단계-4개의 파일로 생성된 앱 아래의 lakshya folder.3단계 - Index.html 필요성<app-root></app-root>로.<app-lakshya></app-lakshya>4단계 - 앱.Module.ts 파일 부트스트랩 변경: [AppComponent]에서 부트스트랩으로: [LakshyaComponent]
위의 오류를 해결합니다.
아마도 당신은 그것을 사용할 수 있을 것입니다.
뒤로 미루다
헤더 js-files에 태그를 추가합니다.
http://www.w3schools.com/TAgs/att_script_defer.asp
장고+각형
각 CLI에 의해 생성된 인덱스가 아닌 사용자 지정 index.html이 있었습니다.
생성된 스크립트 파일을 다음에 배치했기 때문에 이 오류가 발생했습니다.<head>마감의 끝이 아닌 섹션</body>태그(뒤에)<app-root></app-root>태그)
저의 경우, index.html에 위치한 파일(대부분이 루트 폴더임)에 문제가 있습니다.
수정한 후에는 모든 것이 정상적으로 작동합니다.
app.module.ts에서 부트스트랩에 my-app이 있으면 댓글을 달거나 삭제합니다.
부트스트랩: [ AppComponent, // my-app ]
반드시 app-app 모듈을 사용하고 선택기 'my-app'을 'app-root'(파일:app.component.ts)로 변경해야 합니다.
언급URL : https://stackoverflow.com/questions/35644123/the-selector-my-app-did-not-match-any-elements
'source' 카테고리의 다른 글
| Android:문자열을 날짜로 변환하려면 어떻게 해야 합니까? (0) | 2023.08.05 |
|---|---|
| 반환 문자열 유형 열 값을 버퍼 배열(MariaDB)로 후속 처리 (0) | 2023.08.05 |
| 10보다 작음 숫자에 0을 더합니다. (0) | 2023.07.31 |
| MySQL 데이터베이스의 비어 있지 않은 테이블 목록 (0) | 2023.07.31 |
| jQuery document.ready vs 자체 호출 익명 함수 (0) | 2023.07.31 |