如何将angular2文件加载到Django模板?

时间:2016-10-14 20:57:38

标签: python django angular frontend

我有这样的app结构:

├── 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 个答案:

答案 0 :(得分:1)

您已嵌套单引号,而您的文件名为main.js而不是main,您还需要删除第一个/。如果以下代码行解决了您的问题,请告诉我们:

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