문제는 내 앱을 실행할 때 제대로 작동한다는 것입니다. 그러나 새로 고치면 대부분의 경우 메시지 아래에 표시됩니다.
선택기 "my-app"이 일치하는 요소가 없습니다.
하지만 이상한 점은 앱을 새로 고치면 여러 번 작동한다는 것입니다.
그래서 궁극적으로 나는 내 앱의 이상한 동작을 가지고 있으며 이것을 알아낼 수 없습니다.
때로는 작동하지 않는 경우도 있습니다.
어떤 제안, 코드를 얻을 수 없습니까 ???
참고 : 아직 복잡한 구조 나 구성 요소가 없지만 간단한 구현이 있습니다.
Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elements및 FF- '예외 : "my-app"선택기가 BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… 요소와 일치하지 않았습니다 . ... ... ... ... ... '계속
답변:
이것은 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>
main.jstypescript 문서의 plunker 데모 에는 스크립트가 포함되어 있지 않습니다 . 나는 오류가 있지만.
window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
Angular 4 : index.html 파일에서 변경 <app-root></app-root>해야 <my-app></my-app>했습니다.
angular-cli만드는 데 문제가있는 것으로 보이지만 Tour of Heroes 자습서 진입 점 ts 파일은 대신 . IMO는 Angular 팀이 프로젝트를 만드는 가장 좋은 방법 으로 권장했기 때문에 두 사람은 동일한 명명 규칙을 사용해야합니다 . app-rootindex.htmlmy-appangular-cli
해야 할 일:
" boostrap :" 부분이 있는지 확인하십시오 -추가하지 않은 경우 :
bootstrap: [AppComponent] // 여기서 AppComponent는 주요 구성 요소입니다.
지금 작동하는지 확인하십시오. 그렇지 않으면 AppComponent로 이동하여 선택기를 확인하십시오 . index.html 본문의 태그와 동일 해야합니다.
따라서 index.html에는 다음과 같은 내용이 포함되어야합니다.
<body>
<app-root>Loading...</app-root>
</body>
대신 <app-root>기본 AppComponent에서 선택기를 사용해야합니다.
<body>태그 수정
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 { }
부트 스트랩 구성 요소 AppComponent를에서 새 구성 요소로 변경했을 때 이런 일이 발생했습니다 . 변경할 때 메인 index.html에서도 변경해야합니다 . index.html부트 스트랩 구성 요소를 포함해야합니다.
당신이를 변경하는 경우 예를 들어, app-component에 app-login에 app.module.ts부트 스트랩 섹션에서 당신은 당신 업데이트해야 index.html이 같은를
<body>
<app-login></app-login>
</body>
my-app구성 요소의 일부를 게시하십시오 .