Search code examples
djangoangulardeploymentpythonanywhere

error with interpretation of CSS resources in Django REST + Angular2


I'm try to deploy my app on pythonanywhere and stuck with problem. I'm have this error:

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

I don't know why it's happening. In localhost all working fine.

full stack trace:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/node_modules/bootstrap/dist/css/bootstrap.min.css". rodion.pythonanywhere.com/:12 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/bower_components/alertify.js/themes/alertify.core.css". rodion.pythonanywhere.com/:13 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/bower_components/alertify.js/themes/alertify.bootstrap.css". rodion.pythonanywhere.com/:14 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/styles.css". rodion.pythonanywhere.com/:24 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/libs/fancybox/source/jquery.fancybox.css". rodion.pythonanywhere.com/:28 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/libs/fancybox/source/helpers/jquery.fancybox-buttons.css". rodion.pythonanywhere.com/:32 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/libs/fancybox/source/helpers/jquery.fancybox-thumbs.css". rodion.pythonanywhere.com/:11 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/bower_components/font-awesome/css/font-awesome.min.css". jquery.min.js:1 Uncaught SyntaxError: Unexpected token < jquery.mousewheel-3.0.6.pack.js:1 Uncaught SyntaxError: Unexpected token < jquery.fancybox.pack.js:1 Uncaught SyntaxError: Unexpected token < jquery.fancybox-buttons.js:1 Uncaught SyntaxError: Unexpected token < jquery.fancybox-media.js:1 Uncaught SyntaxError: Unexpected token < jquery.fancybox-thumbs.js:1 Uncaught SyntaxError: Unexpected token < bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token < alertify.min.js:1 Uncaught SyntaxError: Unexpected token < shim.min.js:1 Uncaught SyntaxError: Unexpected token < zone.js:1 Uncaught SyntaxError: Unexpected token < Reflect.js:1 Uncaught SyntaxError: Unexpected token < system.src.js:1 Uncaught SyntaxError: Unexpected token < systemjs.config.js:1 Uncaught SyntaxError: Unexpected token < (index):51 Uncaught ReferenceError: System is not defined(…)(anonymous function) @ (index):51

index.html:

<html>
  <head>
    <base href="/"/>
    <title>PhotoHub</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load staticfiles %}


    <link rel="stylesheet" href="{% static "node_modules/bootstrap/dist/css/bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "bower_components/font-awesome/css/font-awesome.min.css" %}"/>
    <link rel="stylesheet" href="{% static "bower_components/alertify.js/themes/alertify.core.css" %}"/>
    <link rel="stylesheet" href="{% static "bower_components/alertify.js/themes/alertify.bootstrap.css" %}"/>
    <link rel="stylesheet" href="{% static "styles.css" %}">

    <!--Final attempt with fancybox-->
    <!-- Add jQuery library -->
    <!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>-->
    <script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="{% static "libs/fancybox/lib/jquery.mousewheel-3.0.6.pack.js" %}"></script>

    <!-- Add fancyBox -->
    <link rel="stylesheet" href="{% static "libs/fancybox/source/jquery.fancybox.css" %}" type="text/css" media="screen"/>
    <script type="text/javascript" src="{% static "libs/fancybox/source/jquery.fancybox.pack.js" %}"></script>

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="{% static "libs/fancybox/source/helpers/jquery.fancybox-buttons.css" %}" type="text/css" media="screen" />
    <script type="text/javascript" src="{% static "libs/fancybox/source/helpers/jquery.fancybox-buttons.js" %}"></script>
    <script type="text/javascript" src="{% static "libs/fancybox/source/helpers/jquery.fancybox-media.js" %}"></script>

    <link rel="stylesheet" href="{% static "libs/fancybox/source/helpers/jquery.fancybox-thumbs.css" %}" type="text/css" media="screen" />
    <script type="text/javascript" src="{% static "libs/fancybox/source/helpers/jquery.fancybox-thumbs.js" %}"></script>
    <!--Final attempt with fancybox-->


    <!--<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>-->
    <script src="{% static "node_modules/bootstrap/dist/js/bootstrap.min.js" %}"></script>
    <script src="{% static "bower_components/alertify.js/lib/alertify.min.js" %}"></script>


    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="{% static "node_modules/core-js/client/shim.min.js" %}"></script>
    <script src="{% static "node_modules/zone.js/dist/zone.js" %}"></script>
    <script src="{% static "node_modules/reflect-metadata/Reflect.js" %}"></script>
    <script src="{% static "node_modules/systemjs/dist/system.src.js" %}"></script>
    <!-- 2. Configure SystemJS -->
    <script src="{% static "systemjs.config.js" %}"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <photohub></photohub>
  </body>
</html>

Solution

  • PythonAnywhere dev here: when I go to any of those URLs, the content that is served looks like HTML rather than CSS. Looking at your web app setup, it appears you haven't set up the static files table fully -- you've defined a /static URL, but haven't put a directory on the same line to say where files under /static should be served from.