Блог

Главная - Вопросы по программированию - Как загрузить файлы angular2 в шаблон Django?

Как загрузить файлы angular2 в шаблон Django?

#python #django #angular #frontend

#python #джанго #угловатый #интерфейс

Вопрос:

У меня есть структура приложения, подобная этой:

 ├── project
|   |── templates
│   │   └── index.html
│   ├── __init__.py
│   ├── models.py
│   ├── urls.py
│   ├── serializers.py
│   ├── views.py
├── static
|   ├── app
|   │   ├── app.component.spec.ts
|   │   ├── app.component.ts
|   │   ├── app.route.ts
│   │   ├── component1.component.ts
|   │   ├── component2.component.ts 
│   │   └── main.ts
|   ├── system.config.json
│   ├── tsconfig.json
│   └── typings.json
├── db.sqlite3
├── LICENSE
├── manage.py

и я пытаюсь загрузить файлы angular2 в свой шаблон django index.html , поэтому файл выглядит следующим образом:

 {% load static from staticfiles %}

<!DOCTYPE html> 
<html> 
<head> 
<base href=/ > 
<title>Hello! </title> 
<meta charset=UTF-8> 
<meta name=viewport content="width=device-width,initial-scale=1"> 


   <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <script>
      System.import('{%static '/app/main' %}').catch(function(err){ console.error(err); });
    </script>

      <link href="{%static '/css/stylesheet.css' %}">
      <link href="{%static '/css/bootstrap.min.css' %}">
 </head> 
 <body> 


    <img src="{%static '/assets/logo.png' %}"></img>
      <as-my-app>Loading...</as-my-app>

  </body> 
  </html>

Моя проблема в том, что все статические файлы загружаются нормально, но мой браузер постоянно показывает ошибку при загрузке /static/app/main , сообщая, что она не найдена. Почему Django не может найти его, если он находит другие статические файлы?

Комментарии:

1. Вы пытались запустить tsc command (или tsc main.ts ) для компиляции ваших ts-файлов?

2. ДА. У меня есть в том же каталоге все .js , .js.map и .ts файлы

3. Взгляните на приведенный ниже ответ.

Ответ №1:

У вас есть вложенные одинарные кавычки, а имя вашего файла main.js — нет main , вам также нужно удалить первые / . Дайте мне знать, если следующая строка кода решит вашу проблему:

 System.import("{% static 'app/main.js' %}")

Комментарии:

1. теперь это дает мне Error loading http://127.0.0.1:8000/@angular/platform-browser-dynamic as "@angular/platform-browser-dynamic" from http://127.0.0.1:8000/static/app/main.js

2. Вы установили пакет? npm install @angular/platform-browser-dynamic

3. В итоге я добавил .js файлы в комплекте с webpack.

Метки: