Добавление документации в приложение django - конфликт с angular

Я создал документацию для моего приложения Django, используя библиотеку apidoc. Он создает документы с использованием угловых. Приложение работает на Heroku.

Документы работают хорошо, когда я открываю index.html файл, но я не могу открыть их через http://localhost:5000/docs.

Сначала я получил эту ошибку:

"Переменные и атрибуты могут не начинаться с подчеркивания:" __ "", который я смог обойти, поместив {% verbatim %} и {% endverbatim %} в файл index.html. (Что я не очень доволен в первую очередь и хотел бы сделать это по-другому).

Затем страница застревает на экране загрузки, но когда я открываю ее в Chrome, появляется следующая ошибка:

"Uncaught SyntaxError: неожиданный токен <" в polyfill.js: 1 и require.min.js: 1

А также 3 предупреждения:

"Ресурс интерпретируется как таблица стилей, но передается с помощью MIME-типа text/html"

в vendor/bootstrap.min.cs, vendor/prettify.css и css/style.css

Мы используем apidocs и в другом проекте с Node, где он отлично работает, поэтому я думаю, что это проблема с Django. Поскольку документация генерируется автоматически, я бы предпочел вносить изменения в приложение, а не в документы. Я пробовал это на Chrome и Safari.

Мои вопросы 1. Что я могу сделать, чтобы это работало? 2. Как я могу сделать Django совместимым с Angular, не помещая теги {% verbatim %} в index.html?

Вот мой контроллер:

from django.shortcuts import render

def show_docs(request):
    return render(request, 'index.html')

и url_pattern:

from django.conf.urls import include, url
from django.contrib import admin
admin.autodiscover()
import my_app.controller
from django.views.decorators.csrf import csrf_exempt

urlpatterns = [
    url(r'^docs/', my_app.controller.show_docs),
]

index.html голова:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Loading...</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="vendor/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="vendor/prettify.css" rel="stylesheet" media="screen">
  <link href="css/style.css" rel="stylesheet" media="screen, print">
  <link href="img/favicon.ico" rel="icon" type="image/x-icon">
  <link href="css/apidoccustom.css" rel="stylesheet" media="screen, print">
  <script src="vendor/polyfill.js"></script>
</head>

редактировать: благодаря ответу от Хьюберта, я смог найти источник проблемы. Оказывается, что Django не так хорошо работает с RequireJS, который используется API-документами.

Мне пришлось добавить следующие изменения в сгенерированный код, чтобы он работал: пункты 1-4 для index.html, пункты 5, 6 для main.js:

  1. Добавьте эту строку над тегом:

{% load static %}

  1. Добавьте теги "{% static" + " %}" ко всем тегам, чтобы они выглядели так:

<link href="{% static "vendor/bootstrap.min.css" %}" rel="stylesheet" media="screen">

  1. Добавьте те же статические теги к тегам с помощью polyfill.js и require.min.js:

<script src="{% static "vendor/polyfill.js" %}"></script><script data-main="{% static "main.js" %}" src="{% static "vendor/require.min.js" %}"></script>

  1. Добавьте {% verbatim %} в начале и {% endverbatim %} в конце, НО ДО с помощью require.min.js!

  2. В main.js добавьте следующие строки к путям в начале файла:

apiProject: './api_project.js', apiData: './api_data.js',

  1. Изменить строки:

'./api_project.js', './api_data.js',

чтобы:

'api_project', 'api_data',

Источник

1 ответ

Решение

Из этого две ошибки:

"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and require.min.js:1
"Resource interpreted as Stylesheet but transferred with MIME type text/html"

Я бы предположил, что что-то не так с загрузкой ваших статических файлов. Вероятно, у вас есть 404 или 500 на них и Django загружает тогда маршрут по умолчанию. Проверьте правильность маршрутизации для статических файлов.

Источник
Другие вопросы по тегам