Ionic和Angular 2 -拒绝应用“http://localhost:8100/build/main.css”中的样式,因为不支持其MIME类型('text/html')

yhuiod9q  于 2022-12-08  发布在  Ionic
关注(0)|答案(9)|浏览(203)

我的Ionic构建一直工作得很好,直到我想在iPhone上测试,所以我停止了服务器,执行了ionic serve --address localhost,然后我注意到我的样式表不再加载了...所以我再次关闭服务器,返回到ionic serve,错误仍然存在...
(index):1拒绝应用“http://localhost:8100/build/main.css”中的样式,因为其MIME类型('text/html')不是支持的样式表MIME类型,并且启用了严格MIME检查。
我已经尝试清除localhost:8100上该高速缓存并重建项目,但错误仍然存在...
如何解决此问题?
我最终修复它的方式可能不是最好的...但至少它又能工作了。我只是进入我的应用程序的GitHub存储库下载了main.css并将其粘贴到build文件夹中,从那以后我就没有遇到过问题。

mpbci0fu

mpbci0fu1#

我遵循了离子框架论坛上发布的这些说明。
ionic serve服务您的项目,然后只需更改任何.ts文件并保存它(ctrl+s),它将自动重新构建并服务应用程序&错误将得到解决,希望:)。

:每次初始离子发球时都必须这样做。

查看完整答案here

lztngnrs

lztngnrs2#

仅供参考,在我升级webpack后遇到了完全相同的问题。我的webpack版本是^3.11.0,然后转到4.x.x,这导致了很多问题。建议您降级webpack,直到ionic支持更新版本的webpack。

zfciruhq

zfciruhq3#

我认为Webpack(或其他软件包)可能存在一些兼容性问题。这似乎是在@ionic/app-scripts版本3.2.* 中引入的。使用3.1.11之前的任何版本都不会出现此问题。我建议执行以下操作:

  • 在您的package.json中,将@ionic/app-scripts的版本更改为“@ionic/app-scripts”:“^3.1.11”
  • 删除package-lock.json文件
  • 删除node_module文件夹
  • 运行npm安装
  • 确保@ionic/app-scripts的版本低于3.2
rxztt3cl

rxztt3cl4#

我也有同样的问题,与离子3。
为了解决这个问题,我在相应的标记中添加了如下类型:

<script type="application/javascript" src="assets/js/lalalala.js"></script>
<script type="application/javascript" src="assets/js/lalala.js"></script>

(In我的情况下,问题是与JS)然后,是需要重新启动应用程序与“离子服务”,否则问题仍然存在。

9ceoxa92

9ceoxa925#

在我的例子中,只要保存index.html就可以解决这个问题。
此外,我不得不撤消(删除)我的符号链接,并使用来自类似姐妹项目的文件夹的实际副本。

q7solyqu

q7solyqu6#

我将index.html中的基本href从

<base href="./" />

<base href="/" />
hrirmatl

hrirmatl7#

您需要查看index.html文件并查找。就像错误消息中所说的,您的必须设置为而不是。
您的css被导入为错误的类型。

flvtvl50

flvtvl508#

也许这不是解决这个问题的最佳策略,但对我来说,有效的方法是创建一个新的空白项目,手动安装所有额外的插件,然后将整个src文件夹替换到这个新项目中。文件 config.xmlpackage.json 可能需要进行一些调整。
换句话说就是:

~user/DevFolder/ $ ionic start DummyProject blank
~user/DevFolder/ $ cd DummyProject
~user/DevFolder/DummyProject/ $ ionic cordova plugin add cordova-plugin-advanced-http
~user/DevFolder/DummyProject/ $ rm -fr src
~user/DevFolder/DummyProject/ $ cp -r ../FailingProject/src .
~user/DevFolder/DummyProject/ $ ionic serve -lcs

对于命令,我使用了***~user/DevFolder***作为所有项目所在的文件夹,***cordova-plugin-advanced-http***作为插件。记住,当命令行要求时,回答Y。
至少对我来说问题解决了,但不知道为什么会这样,希望对我有帮助。

bybem2ql

bybem2ql9#

我找到了解决方案,但不知道最终的原因。解决方案-〉只需转到任何.ts文件,如user.ts或app.ts,然后按下“CTRL+ S”。现在,它将自动再次构建并服务于您的应用程序,一旦构建完成,您的应用程序将运行良好。
每次在终端中写入新'离子服务'时,您都必须执行此操作但如果在开发周期中按'CTRL+ S'自动生成,则不需要执行此操作

相关问题