资源解释为样式表但在 AngularJS 中使用 MIME 类型 text/html 传输

Question

有一个 angular 申请：

这是我的 index.html 页面的一部分：

<!DOCTYPE html>
<html lang="en" ng-app="ReApp">
<head>
    <meta charset="UTF-8">
    <title>REApp</title>
    <link rel="stylesheet" href="./lib/bootstrap/dist/css/bootstrap.min.css">
    <script src="./lib/angular/angular.min.js"></script>
</head>
<body></body>
</html>

这是我的一部分server.js（起点）：

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.use('/api', api);
app.get('*', function(req, res){
    res.sendFile(__dirname + '/public/app/views/index.html');
});

问题是：当我有一条路线（localhost:3000/第一条路线）时，一切正常。当我有这样的路线时：localhost:3000/first/second，我有一个错误 "Resource interpreted as Stylesheet but transferred with MIME type text/html"。在终端中，我收到了请求 - first/second/lib/angular/angular.min.js。我当然没有那个link。谁知道如何在 undex.html 中为这个 link 设置起始页？

Answer 1

要解决此问题，您只需将 <base href="/"> 元素放在 index.html 页面头部部分 <title> 元素的正下方。

Answer 2

在我的例子中，我使用的是 bower 安装的包（同样适用于 npm 或 yarn 或任何其他包管理器安装的包）。

在您的 express 代码中的某个位置添加此中间件，在任何其他路由声明之前。

app.use('/assets', express.static(path.join(__dirname + '/bower_components')));

第一个参数 /assets 只是一个虚拟路径，它不必存在于您的项目中，第二个参数告诉 express 从 bower_components 文件夹中提供静态资源。接下来，在您的标记中，包含如下样式表：

<link rel="stylesheet" href="/assets/bulma/css/bulma.min.css">

资源解释为样式表但在 AngularJS 中使用 MIME 类型 text/html 传输

Resource interpreted as Stylesheet but transferred with MIME type text/html in AngularJS

javascript

routes

angularjs