无法加载模块脚本：需要一个 JavaScript 模块脚本，但服务器以“text/html”的 MIME 类型响应

问题描述 投票：0回答：6

我在 kubernetes 上部署了我的角度应用程序（静态网页）并尝试从谷歌浏览器启动它。我看到应用程序正在加载，但浏览器上没有显示任何内容。检查浏览器控制台后，我可以看到这个错误

“无法加载模块脚本：需要一个 JavaScript 模块脚本，但服务器以“text/html”的 MIME 类型响应。根据 HTML 规范对模块脚本执行严格的 MIME 类型检查。” 对于 (main.js,poylfill.js,runtime.js) 文件。我研究了几个论坛，一个可能的根本原因可能是因为 

type
标签中的 
<script>
属性应该是 type=text/javascript 而不是我的 index.html 文件中的 
type=module
执行 ng 构建后在 dist 文件夹下生成。我不知道如何对构建过程中生成的这些标签进行更改，我的 ng-build 命令由 docker 命令处理。

我尝试访问的 URL 类似于：“http://xxxx:portnum/issuertcoetools

注意：主机

xxxx:portnum
也将被许多其他应用程序使用。

是否有解决此问题的方法或解决方案？

index.html - 在本地运行 ng-build 后生成，（这与我在 kubernetes POD 中看到的相同）

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <title>Data Generator</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <style type="text/css">@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
    <style type="text/css">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}</style>
<style>.mat-typography{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}</style><link rel="stylesheet" href="styles.9c0548760c8b22be.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.9c0548760c8b22be.css"></noscript></head>

<body class="mat-typography">
    <app-root></app-root>
 
<script src="runtime.397c3874548e84cd.js" type="module">
</script><script src="polyfills.2145acc81d0726ab.js" type="module">
</script><script src="main.a655dca28148b7e2.js" type="module"></script>

</body></html>

nginx.conf 文件

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 8080;
        include /etc/nginx/mime.types;

  location /issuertcoetools {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}
}
javascript angular google-chrome kubernetes mime-types
6个回答
12
投票

这个错误通常发生是因为你的部署是在一个子文件夹中，所以看起来 Angular 是直接从你的基本 URL 获取你的应用程序，所以当你去你的 

domain.com/mysubfolder/index.html
时找到你的 html，但是当 Angular 从
domain.com/index.html
而不是 domain.com/mysubfolder/index.html；我很确定这是您问题的原因。您可以通过以下方式解决构建您的应用程序的问题：

ng build --prod --base-href mysubfolder
4
投票

我试图在子目录中添加一个 Angular 应用程序。

@Leo的 答案是正确的。 我通过更改 

index.html
.

中的基本参考来手动制作它

从

<base href="">
到
<base href="http://subdomain.domain.com/subdirectory/">
，它奏效了！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Website</title>
    <!-- <base href=""> -->
    <base href="http://subdomain.domain.com/subdirectory/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

<body>...</body>

</html>

1
投票

检查

include /etc/nginx/mime.types;
在NGINX conf中，该路径可能有错误，依靠日志（nginx）。

1
投票

解决方案：

转到 angular.json 并将 outputPath 参数更新为 dist 而不是 dist/YourAppName。现在您可以使用 

ng build --configuration production
来构建您的应用程序。

解释：

问题是，当您运行命令

ng build --configuration production
然后解决方案被输出到 dist/YourAppName 然后路径被破坏，因为 Angular 认为您的应用程序在您的根文件夹中，但它在 root/YourAppName 中。执行上述操作会将您的应用程序放在根文件夹中。

0
投票

当你在虚拟目录上托管角度项目时，你需要添加：

 APP_BASE_HREF, useValue: '/YOUR VIRTUAL DIRECTORY NAME'

到“NgModule”部分中的“app.module.ts”。像这样：

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/YOUR_VIRTUALDIRECTORY_NAME'}],
  bootstrap: [AppComponent]
})

并重建您的项目。

别忘了使用：

import { APP_BASE_HREF } from '@angular/common';

你可以在https://angular.io/api/common/APP_BASE_HREF上看到这个

最后运行：

ng build --base-href  YOUR_VIRTUAL_DIRECTORY_NAME

玩得开心！

0
投票

我从

<base href="/">
评论了
index.html
，我的应用程序显示在服务器上。

我更改了 

outputPath
中的 
angular.json
以不包括子域：
"outputPath": "dist",
.

我还将

public
中的
firebase.json
设置更改为include子域：
"public": "dist/en-US",
.

为什么

angular.json
和
firebase.json
的设置不同？在这些更改之前，我将 
angular.json
设置为 
"outputPath": "dist/language-two13",
。结果是 
ng build
将我的 Angular 项目转换为 
dist/language-two13/en-US
。通过更改此设置，我摆脱了一个子域。

在浏览器中，URL 中都没有出现子域。

en-US
子域来自哪里我不知道。我正在为 i18n 使用 Transloco 但通过 
transloco-root.module.ts
搜索我看到 
en
和 
es
作为我的项目的语言，而不是 
en-US
。我搜索了我的整个应用程序，只发现了几个
en-US
的实例，仅在将其更正为
en
的代码中，并且从未在会影响转译器的设置中。

我尝试将 Transloco 的默认语言从 

en
切换为 
es
。 Nada cambios ......没有变化。

我试着在 

app.module.ts
中注释掉 Transloco，但 Angular 无法编译。

我尝试将我的文件从 

dist/en-US/
移动到 
dist
，删除 
en-US
文件夹，将 
firebase.json
更改为 
"public": "dist",
并将 
<base href="/">
评论回 
index.html
，并部署到 Firebase 托管。这很好用。

总之，

angular.json
设置为没有子域的转译，但是 
en-US
子域神奇地被插入，所以我设置 
firebase.json
来纠正这种奇怪的行为。

我向整天处理这些东西的开发运营专家致敬！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.