i'm newbie angular2 , i'm having difficulties integrate angular2 app django app.
i have rest api set-up , consumed angular app. want use django urls load angular app through index.html file systemjs.
the problem i'm getting 404 errors when angular tries load files , think it's because tries load via absolute path , not relative one.
is approach ok? if so, doing wrong?
thanks!
edit: info,
- static_root & static_path set '/static/'
- index.html in 'templates' directory
- all angular 2 files in 'static/angular2' directory
index.html
{% load staticfiles %} <!doctype html> <html lang="en"> <head> <base href="/"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content="system"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title></title> <!-- polyfill(s) older browsers --> <script src="{% static 'angular2/node_modules/core-js/client/shim.min.js' %}"></script> <script src="{% static 'angular2/node_modules/zone.js/dist/zone.js' %}"></script> <script src="{% static 'angular2/node_modules/reflect-metadata/reflect.js' %}"></script> <script src="{% static 'angular2/node_modules/systemjs/dist/system.src.js' %}"></script> <!-- configure systemjs --> <script src="{% static 'angular2/systemjs.config.js' %}"></script> <script> system.import("{% static 'angular2/app/main.js' %}").catch(function(err){ console.error(err); }); </script> <!-- js --> <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.2.1/chart.bundle.min.js"></script> <!-- page styles --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.purple-blue.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons"> <link rel="stylesheet" href="{% static 'angular2/css/styles.css' %}"> </head> <body> <app> loading... </app> </body> </html> systemjs.config.js
(function(global) { var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs', 'ng2-tag-input': 'node_modules/ng2-tag-input', 'ng2-charts': 'node_modules/ng2-charts', 'ng2-datetime-picker': 'node_modules/ng2-datetime-picker', 'ng2-draggable': 'node_modules/ng2-draggable', 'angular2-infinite-scroll': 'node_modules/angular2-infinite-scroll' }; var packages = { 'app': { main: 'main.js', defaultextension: 'js' }, 'rxjs': { defaultextension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultextension: 'js' }, 'ng2-tag-input': { main: 'index.js', defaultextension: 'js' }, 'ng2-charts': { main: 'ng2-charts.js', defaultextension: 'js' }, 'ng2-datetime-picker': { main: 'dist/index.js', defaultextension: 'js' }, 'ng2-draggable': { main: 'index.js', defaultextension: 'js' }, 'angular2-infinite-scroll': { main: 'angular2-infinite-scroll.js', defaultextension: 'js' } }; var ngpackagenames = [ 'common', 'compiler', 'core', 'forms', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; function packindex(pkgname) { packages['@angular/'+pkgname] = { main: 'index.js', defaultextension: 'js' }; } function packumd(pkgname) { packages['@angular/'+pkgname] = { main: '/bundles/' + pkgname + '.umd.js', defaultextension: 'js' }; } var setpackageconfig = system.packagewithindex ? packindex : packumd; ngpackagenames.foreach(setpackageconfig); var config = { map: map, packages: packages }; system.config(config); })(this); 
Comments
Post a Comment