angular - ไม่สามารถโหลดสคริปต์โมดูลได้

หลังจากที่ปรับใช้งานแอป Angular บน Heroku หน้าเว็บว่างจะปรากฏเมื่อเข้าถึง URL และคอนโซลแสดงข้อผิดพลาดประเภท MIME

ข้อผิดพลาดคือ:

ไม่สามารถโหลดสคริปต์โมดูลได้: เซิร์ฟเวอร์ตอบกลับด้วยชนิด MIME ที่ไม่ใช่ JavaScript คือ "text/html". การตรวจสอบชนิด MIME อย่างเข้มงวดถูกบังคับใช้สำหรับสคริปต์โมดูลตามข้อกำหนดของ HTML.

คำตอบ #1

คำอธิบายที่เป็นไปได้สำหรับข้อผิดพลาด:
คุณจะพบพฤติกรรมนี้เมื่อคุณติดตั้งแอปของคุณลงในโฟลเดอร์ย่อย ไม่ใช่โดยตรงบน URL หลักของคุณ

สิ่งที่เกิดขึ้น:

• ไฟล์ HTML จะถูกพบเมื่อคุณไปที่ www.yourbase.com/yoursubfolder/index.html แต่แอป Angular ดึงทรัพยากรด้วยพาธสัมพัทธ์ (สมมติว่า resource.css) จาก www.yourbase.com/resource.css แทนที่จะเป็นจาก www.yourbase.com/yoursubfolder/resource.css
• เว็บเซิร์ฟเวอร์ของคุณน่าจะกำลังให้บริการบางหน้าดีฟอลต์ที่ www.yourbase.com/resource.css (อาจเป็น www.yourbase.com/index.html ของคุณ)
• ดังนั้นเนื้อหาของหน้าเริ่มต้นนั้นจะถูกโหลดแทน CSS ของคุณ

เพื่อแก้ไขมัน

สร้างแอป Angular ของคุณด้วย

ng build --prod --base-href yoursubfolder

หรือกำหนดเส้นทางฐานในไฟล์ index.html ของคุณ

<head>
    <base href="/yoursubfolder/">
</head>

คำตอบ #2

ฉันเจอข้อผิดพลาดเดียวกันเมื่อฉันพยายามปรับใช้ Angular UI ในโฟลเดอร์ย่อยของ nginx

ในที่สุดฉันก็แก้ไขได้แล้ว หวังว่าจะเป็นประโยชน์

สมมติว่าถ้าคุณต้องการโฮสต์เว็บไซต์ของคุณ https://www.yourdomain.com/sub1/

ขั้นตอนที่ 1: ใช้ --base-href เพื่อสร้าง

ng build --base-href=/sub1/

ขั้นตอนที่ 2: การตั้งค่าใน nginx

มี 2 วิธีในการโฮสต์โฟลเดอร์ย่อยของคุณ

สมมติว่าฟอลเดอร์ dist ของคุณอยู่ใน html/sub1dist

1) โฮสต์แพ็กเกจท้องถิ่นเป็นโฟลเดอร์ย่อย

server {
    listen       80;
    server_name  localhost;


    location /sub1 {
        alias   html/sub1dist;
        try_files $uri $uri/ /index.html =404;
    }
}

2) ส่งผ่านพร็อกซีไปยังอีก endpoint เป็นโฟลเดอร์ย่อย

server {
    listen       80;
    server_name  localhost;

    location /sub1/ {
        # rewrite to remove the subfolder
        rewrite ^/sub1/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8071;
    }
}

server {
    listen       8071;
    server_name  localhost;

    location / {
        root   html/sub1dist;
        try_files $uri $uri/ /index.html =404;
    }
}

แต่ละวิธีข้างต้นใช้ได้ดีสำหรับฉัน