문제는 내 앱을 실행할 때 제대로 작동한다는 것입니다. 그러나 새로 고치면 대부분의 경우 메시지 아래에 표시됩니다.
선택기 “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="https://stackoverflow.com/">
<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
.)
답변
위의 답변 중 어느 것도 내 문제를 해결하지 못했습니다. 이것은 동일한 종류의 오류를 해결하는 방법입니다. Bootstarp component로 하나 이상의 구성 요소를 가져서는 안됩니다. 그래서 Bootstrap 배열에는 하나의 구성 요소 만 있어야합니다. 실수로 4 개의 구성 요소를 부트 스트랩 배열에 넣었습니다. 아래 코드). 이것은 나를 도왔습니다.
@NgModule({
declarations: [
AppComponent,
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
entryComponents:[
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent
]
})
export class AppModule { }