Angular中的MIME类型问题

时间:2019-06-19 07:24:39

标签: angular mime-types content-type

当我尝试加载主页并且页面为空白时,出现以下错误。

main-es2015.5ff489631e1a2300adb7.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

runtime-es2015.2c9dcf60c8e0a8889c30.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

vendor-es2015.02ac05cd7eee1cf62f5a.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

此操作之前有效,并且在使用ng serve进行服务时在开发人员中正常工作。从服务器运行代码时,会发生此问题。当我从devtools中检查时,它显示的是content-typetext/html而不是application/javascript。如何解决?是否需要从服务器设置某些内容?

5 个答案:

答案 0 :(得分:3)

“服务器以非JavaScript MIME类型“ text / html”进行了响应 这个问题不过是找不到文件而已。

当我们尝试使用带有以下代码的Express NodeJS为angular build应用服务时,会发生这种情况

const app = express();
app.use(express.static(__dirname + 'dist/application'));

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/application/index.html'));
});

app.listen(process.env.PORT || 8880);

当Angular尝试访问一些未找到的文件时,会发生此问题

问题已通过以下Express代码解决

const _port = 4100;
const _app_folder = 'dist/application';
const app = express();

// ---- SERVE STATIC FILES ---- //
app.get('*.*', express.static(_app_folder, {maxAge: '1y'}));

// ---- SERVE APLICATION PATHS ---- //
app.all('*', function (req, res) {
    res.status(200).sendFile(`/`, {root: _app_folder});
});

// ---- START UP THE NODE SERVER  ----
app.listen(_port, function () {
    console.log("Node Express server for " + app.name + " listening on http://localhost:" + _port);
});

这应该可以解决您的问题。

答案 1 :(得分:2)

经过长时间的搜索,这对我有所帮助。 Ang9在index.html的标记中不包含MIME类型:

如果在tsconfig.json中:“目标”:“ es2015”,则添加 type =“ module”

<script src="runtime-es2015.703a23e48ad83c851e49.js" type="module">`

或如果“目标”:“ es5”添加 nomodule

<script src="runtime-es5.465c2333d355155ec5f3.js" nomodule>

答案 2 :(得分:1)

到您的域根的角路由。 部署到子文件夹可能正确引用:

ng build --prod --base-href yoursubfolder

答案 3 :(得分:0)

您是否正在使用Angular SSR?如果是,您是否重新启动了为Angular应用提供服务的Express应用(server.js)?

答案 4 :(得分:0)

简单的解决方案或此方法是在创建express实例后添加此行代码

app.use(express.static(__dirname + '/dist/<app-name>'));

您的角度应用程序依赖一些JavaScript文件,这些文件位于构建时所生成的index.html文件的同一目录中,因此express需要能够静态为其提供服务