如何将 angular2 文件加载到 Django 模板？答案

【问题标题】：How to load angular2 files to Django template?如何将 angular2 文件加载到 Django 模板？
【发布时间】：2017-02-24 09:35:19
【问题描述】：

我有这样的应用结构：

├── 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找到其他静态文件怎么找不到？

【问题讨论】：

您是否尝试运行tsc 命令（或tsc main.ts）来编译您的ts 文件？
是的。我在同一目录中拥有所有 .js 、 .js.map 和 .ts 文件
看看下面的答案。

标签： python django angular frontend

【解决方案1】：

你有嵌套的单引号并且你的文件名是main.js而不是main，你还需要删除第一个/。如果以下代码行解决了您的问题，请告诉我：

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

【讨论】：

现在它给了我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
你安装了这个包吗？ npm install @angular/platform-browser-dynamic
我最终添加了与 webpack 捆绑的 .js 文件。