ปัญหาคือเมื่อฉันเรียกใช้แอปของฉันมันใช้งานได้ดี แต่พอรีเฟรชแล้วส่วนใหญ่จะอยู่ต่ำกว่า msg
ตัวเลือก "my-app" ไม่ตรงกับองค์ประกอบใด ๆ
แต่สิ่งที่แปลกคือหลายครั้งเมื่อฉันรีเฟรชแอปของฉันมันก็ใช้ได้เช่นกัน
ในที่สุดฉันก็มีพฤติกรรมแปลก ๆ ของแอพและไม่สามารถคิดออกได้
บางครั้งการทำงานบางครั้งก็ไม่ ...
ข้อเสนอแนะใด ๆ ไม่สามารถสร้างรหัสได้ ???
หมายเหตุ: ฉันยังไม่มีโครงสร้างหรือส่วนประกอบที่ซับซ้อน แต่ใช้งานง่าย
Potentially unhandled rejection [2] The selector "micropuppy-app" did not match any elementsและใน FF- 'EXCEPTION: ตัวเลือก "my-app" ไม่ตรงกับองค์ประกอบใด ๆ BaseException @ cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/… ... .. …… .. และต่อไป '
คำตอบ:
สิ่งนี้เกิดขึ้นกับฉันเนื่องจากฉันกำลังนำเข้าโค้ดของฉันในheadแท็กดังนั้นจึงอาจทำงานและพยายามบูตสแตรปก่อนที่ DOM จะพร้อม
คุณสามารถย้ายสคริปต์ไปที่ด้านล่างของbodyแท็กหรือใส่รหัส bootstrap ไว้ในตัวฟังเหตุการณ์:
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.jsการรวมสคริปต์ในการสาธิต plunker ในเอกสาร typescript แม้ว่าฉันจะมีข้อผิดพลาด
window.onload = function(){ platformBrowserDynamic().bootstrapModule(AppModule); }
เชิงมุม 4: ฉันมีการเปลี่ยนแปลง <app-root></app-root>ที่มี <my-app></my-app>อยู่ในแฟ้ม index.html
angular-cliการสร้างapp-rootการอ้างอิงในindex.htmlไฟล์ขณะที่ทัวร์วีรบุรุษกวดวิชา entrypoint TS my-appไฟล์หมายแทน IMO ทั้งสองควรใช้รูปแบบการตั้งชื่อเดียวกันเนื่องจากทีม Angular ได้แนะนำให้angular-cliเป็นวิธีที่ดีที่สุดในการสร้างโครงการ
สิ่งที่ต้องทำ:
ตรวจสอบว่าคุณมีส่วน " boostrap :" - หากไม่มีการเพิ่ม:
bootstrap: [AppComponent] // โดยที่ AppComponent เป็นองค์ประกอบหลักของคุณ
ตรวจสอบการทำงานตอนนี้ถ้าไม่ได้ - ไป AppComponent และตรวจสอบตัวเลือกของคุณ ควรเหมือนกับแท็กในเนื้อหาใน index.html
ดังนั้น index.html ควรมีดังนี้:
<body>
<app-root>Loading...</app-root>
</body>
โดยที่<app-root>คุณควรใช้ตัวเลือกจาก AppComponent หลักแทน
<body>แท็กแก้ไขแล้ว
ฉันพบปัญหาเดียวกันเมื่อใช้ Angular Universal แต่เป็นเพราะฉันใช้BrowserModuleในmain.node.tsวิธีแก้ปัญหาคือ
imports: [
UniversalModule,
BrowserModule // <- delete this will solve the issue
],
และตรวจสอบข้อมูลเพิ่มเติมได้ที่นี่: https://github.com/angular/universal/issues/542
หากคุณกำลังใช้แม่แบบแกน angular2 / asp.net จากที่นี่: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/คุณอาจพบการแทนที่สองสามบรรทัดสุดท้ายของ 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>
สิ่งนี้เคยทำงานกับ Angular 5.2 (และเวอร์ชันก่อนหน้าด้วย) เนื่องจากในindex.html ที่สร้างขึ้นแท็กสคริปต์ถูกวางไว้ที่ส่วนท้าย หลังจากอัปเกรดเป็น 6.1 แท็กสคริปต์ถูกวางไว้ที่จุดเริ่มต้นของไฟล์แทน (และฉันถือว่าดำเนินการก่อนที่จะมี<my-app></my-app>องค์ประกอบรูทจริง
วิธีการแก้ปัญหาคือการย้าย<body>เข้าindex.html (เดิมถูกวางไว้ในองค์ประกอบเนื่องจากมีคนต้องการใช้คลาสแบบมีเงื่อนไขกับองค์ประกอบของร่างกายด้วยngClass)
คำตอบข้างต้นไม่สามารถแก้ไขปัญหาของฉันได้นี่คือวิธีแก้ข้อผิดพลาดประเภทเดียวกัน คุณไม่ควรมีคอมโพเนนต์มากกว่าหนึ่งคอมโพเนนต์ Bootstarp ดังนั้นอาร์เรย์ Bootstrap ควรมีเพียงคอมโพเนนต์เดียวโดยผิดพลาดฉันใส่ 4 องค์ประกอบในอาร์เรย์ bootstrap ฉันลบ 4 องค์ประกอบเหล่านั้นออกจากที่นั่นและใส่อาร์เรย์ entryComponents (ดังแสดงใน รหัสด้านล่าง) สิ่งนี้ช่วยฉันได้
@NgModule({
declarations: [
AppComponent,
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
entryComponents:[
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent
]
})
export class AppModule { }
บางทีคุณอาจใช้ไฟล์
ผัดผ่อน
แท็กในไฟล์ js ส่วนหัวของคุณ
สิ่งนี้เกิดขึ้นกับฉันเมื่อฉันเปลี่ยนคอมโพเนนต์ bootstrap จากAppComponentเป็นคอมโพเนนต์ใหม่ เมื่อคุณเปลี่ยนคุณจำเป็นต้องเปลี่ยนในหลักindex.htmlด้วย index.htmlควรมีส่วนประกอบ bootstrap
ตัวอย่างเช่นหากคุณเปลี่ยนapp-componentto app-loginin app.module.tsในส่วน bootstrap คุณควรอัปเดตindex.htmlแบบนี้
<body>
<app-login></app-login>
</body>
Django + เชิงมุม
ฉันมี index.html ที่กำหนดเองไม่ใช่อันที่สร้างโดย angular CLI
ฉันมีข้อผิดพลาดนี้เนื่องจากฉันวางไฟล์สคริปต์ที่สร้างขึ้นใน<head>ส่วนแทนที่จะอยู่ที่ท้าย</body>แท็กปิด(หลัง<app-root></app-root>แท็ก)
เมื่อฉันสร้างส่วนประกอบใหม่ต้องทำตามขั้นตอนด้านล่างเพื่อแก้ไขปัญหาด้านล่าง
ขั้นตอนที่ 1- สร้างส่วนประกอบใหม่ด้วยng g c lakshya. ขั้นตอนที่ 2- ภายใต้แอพ lakshya folfer สร้างด้วยไฟล์ 4 ไฟล์ ขั้นตอนที่ 3- Index.html จำเป็นต้อง<app-root></app-root>ไป<app-lakshya></app-lakshya>
ขั้นตอนที่ 4- app.Module.ts บูตไฟล์การเปลี่ยนแปลง: [AppComponent] เพื่อบูต: [LakshyaComponent]
ข้างต้นแก้ไขข้อผิดพลาด
ใน app.module.ts ของคุณหากคุณมี my-app ใน bootstrap ให้แสดงความคิดเห็นหรือลบออก
bootstrap: [AppComponent, // my-app]
my-appส่วนประกอบ