Django - обслуживание приложения Angular

Я пытаюсь интегрировать Angular и Django, и у меня возникает проблема, когда я указываю на index.html в папке angular.

Мой шаблон URL в djangoapp.urls.py:

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^.*/$', TemplateView.as_view(template_name = "index.html")),
]

Что успешно открывает шаблон index.html в моем приложении angular. Однако приложение angular не может получить доступ к app.component.html и доставить контент. Когда я захожу на 127.0.0.1:8000/anything, я получаю пустую страницу (index.html, на которой ничего не отображается).

Если я перейду в каталог приложений angular и ng serve --open и перейду на 127.0.0.1:4200, я получу обычную первую страницу, которую вы получите с app.component.html в смеси (страница приветствия angular). Это стандартные новые шаблоны index.html:

<!doctype html>
<html lang = "en">
<head>
  <meta charset = "utf-8">
  <title>AngularWebapp</title>
  <base href = "/">

  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width = "300" alt = "Angular Logo" src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg= = ">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target = "_blank" rel = "noopener" href = "https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target = "_blank" rel = "noopener" href = "https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target = "_blank" rel = "noopener" href = "https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Как мне заставить django разрешить моему угловому приложению получать доступ к дочерним страницам?

Вам нужно собрать проект angular (ng build) и указать на index.html в созданном каталоге dist.

user184994 20.05.2018 12:54

Я запустил ng-build, получил папку dist с подпапкой с именем приложения, внутри нее был index.html, на который я указал каталоги шаблонов djangos, и они загрузились. Однако он по-прежнему такой же, как и раньше, пустая страница, которая неправильно связывается с app.components.html, какие-нибудь советы?

Marcus Grass 20.05.2018 13:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
345
0

Другие вопросы по теме