How to host Angular 6 application in Python Django?












-1















I am wanting to host an Angular 6 application in Django, how do I do this?










share|improve this question























  • This was added as I could not find the answer easily. Hopefully my answer will help others.

    – Demodave
    Nov 27 '18 at 15:43
















-1















I am wanting to host an Angular 6 application in Django, how do I do this?










share|improve this question























  • This was added as I could not find the answer easily. Hopefully my answer will help others.

    – Demodave
    Nov 27 '18 at 15:43














-1












-1








-1








I am wanting to host an Angular 6 application in Django, how do I do this?










share|improve this question














I am wanting to host an Angular 6 application in Django, how do I do this?







django angular6






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 27 '18 at 15:34









DemodaveDemodave

3,45642941




3,45642941













  • This was added as I could not find the answer easily. Hopefully my answer will help others.

    – Demodave
    Nov 27 '18 at 15:43



















  • This was added as I could not find the answer easily. Hopefully my answer will help others.

    – Demodave
    Nov 27 '18 at 15:43

















This was added as I could not find the answer easily. Hopefully my answer will help others.

– Demodave
Nov 27 '18 at 15:43





This was added as I could not find the answer easily. Hopefully my answer will help others.

– Demodave
Nov 27 '18 at 15:43












1 Answer
1






active

oldest

votes


















1














Assumption: That django site is already running



Things needed to set up Angular 6 locally




  1. Install Node Js.


    https://nodejs.org/en/download/




  2. Install Angular cli Globally


    npm install -g @angular/cli




  3. Navigate to angular on the repo


    dirangular




  4. Install the npm's [libraries]


    npm install




  5. Serve the site


    npm serve [-o]




  6. Navigate to the hosted site


    http://localhost:4200/





Angular Libraries needed to support Django




npm install @angular-devkit/custom-webpack --save



npm install @angular-builders/custom-webpack --save



npm install webpack-bundle-tracker --save




Django Libraries needed to support Angular




pip install django-webpack-loader




File Architecture - I put my angular project within the djangodir off root



root > djangodir > angular



root > djangodir > static



root > djangodir > templates



root > djangodir > webpack-stats-angular.json



Set Up Angular for Django



1) Alter angular.json to include custom webpack config and change build type to builder



 "architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
},
"outputPath": "../static/angular",


2) extra-webpack.config.js code



const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
plugins:[
new BundleTracker({filename: '../webpack-stats-angular.json'})
],
output: {
path: require('path').resolve('../static/angular'),
filename: "[name]-[hash].js"
}
};


Set Up Django for Angular



1) settings.py - added webpack_loader to installed_apps



INSTALLED_APPS = [
'webpack_loader'
]


2) settings.py - added webpack_loader



WEBPACK_LOADER = {    
'DEFAULT': {
'BUNDLE_DIR_NAME': 'angular/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-angular.json'),
}
}


3) requirements.txt - We have a script that pulls from a text file to include dependencies - to this we add



django-webpack-loader==0.6.0


4) urls.py - set up the init routing to the hello world angular app



from . import views as djangodir_views

urlpatterns = [
# path('', include(router.urls)),
path('', djangodir_views.serve_angular, name='serve_angular')
]


5) views.py - include url path



def serve_angular(request):
return render(request, 'angular.html')


Angular.html Page:



{% load render_bundle from webpack_loader %}

<!doctype html>
<html lang="en">
<head>
<base href="/">
<title>Angular/TypeScript Hello World Project</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Angular Hello World Starter">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- <link href="assets/styles/styles.css" rel="stylesheet" /> -->
</head>
<body>
<header class="navbar navbar-inner navbar-fixed-top">
<nav class="container">
<div class="navbar-header">
<span class="app-title"></span>
</div>
</nav>
</header>

<main class="container">
<app-root>
Loading...
</app-root>
<br /><br />
</main>

<footer>
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner footer">
<div class="container">
<footer>

</footer>
</div>
</div>
</div>
</footer>
{% render_bundle 'runtime' %}
{% render_bundle 'polyfills' %}
{% render_bundle 'styles' %}
{% render_bundle 'vendor' %}
{% render_bundle 'main' %}
</html>


References:




  1. Angular 6|5 Tutorial: Integrating Angular with Django

  2. Customizing Angular CLI 6 build — an alternative to ng eject

  3. Evolving your Django frontend


  4. Angular Hello World Example used


Routing:



In order for angular routing to work, you must



1) app-routing.module.ts - Add the routing to angular



const routes: Routes = [
{ path: '', component: TestComponent, data: { title: 'Home' }},
{ path: 'test', component: Test2Component, data: { title: 'Test' }}
];


2) urls.py - Add the routing to Django - just point it to the same view



urlpatterns = [
path('', djangodir_views.serve_angular, name='serve_angular'),
path('test', djangodir_views.serve_angular, name='serve_angular')
]





share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53503054%2fhow-to-host-angular-6-application-in-python-django%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Assumption: That django site is already running



    Things needed to set up Angular 6 locally




    1. Install Node Js.


      https://nodejs.org/en/download/




    2. Install Angular cli Globally


      npm install -g @angular/cli




    3. Navigate to angular on the repo


      dirangular




    4. Install the npm's [libraries]


      npm install




    5. Serve the site


      npm serve [-o]




    6. Navigate to the hosted site


      http://localhost:4200/





    Angular Libraries needed to support Django




    npm install @angular-devkit/custom-webpack --save



    npm install @angular-builders/custom-webpack --save



    npm install webpack-bundle-tracker --save




    Django Libraries needed to support Angular




    pip install django-webpack-loader




    File Architecture - I put my angular project within the djangodir off root



    root > djangodir > angular



    root > djangodir > static



    root > djangodir > templates



    root > djangodir > webpack-stats-angular.json



    Set Up Angular for Django



    1) Alter angular.json to include custom webpack config and change build type to builder



     "architect": {
    "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
    "customWebpackConfig": {
    "path": "./extra-webpack.config.js"
    },
    "outputPath": "../static/angular",


    2) extra-webpack.config.js code



    const BundleTracker = require('webpack-bundle-tracker');

    module.exports = {
    plugins:[
    new BundleTracker({filename: '../webpack-stats-angular.json'})
    ],
    output: {
    path: require('path').resolve('../static/angular'),
    filename: "[name]-[hash].js"
    }
    };


    Set Up Django for Angular



    1) settings.py - added webpack_loader to installed_apps



    INSTALLED_APPS = [
    'webpack_loader'
    ]


    2) settings.py - added webpack_loader



    WEBPACK_LOADER = {    
    'DEFAULT': {
    'BUNDLE_DIR_NAME': 'angular/',
    'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-angular.json'),
    }
    }


    3) requirements.txt - We have a script that pulls from a text file to include dependencies - to this we add



    django-webpack-loader==0.6.0


    4) urls.py - set up the init routing to the hello world angular app



    from . import views as djangodir_views

    urlpatterns = [
    # path('', include(router.urls)),
    path('', djangodir_views.serve_angular, name='serve_angular')
    ]


    5) views.py - include url path



    def serve_angular(request):
    return render(request, 'angular.html')


    Angular.html Page:



    {% load render_bundle from webpack_loader %}

    <!doctype html>
    <html lang="en">
    <head>
    <base href="/">
    <title>Angular/TypeScript Hello World Project</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Angular Hello World Starter">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <!-- <link href="assets/styles/styles.css" rel="stylesheet" /> -->
    </head>
    <body>
    <header class="navbar navbar-inner navbar-fixed-top">
    <nav class="container">
    <div class="navbar-header">
    <span class="app-title"></span>
    </div>
    </nav>
    </header>

    <main class="container">
    <app-root>
    Loading...
    </app-root>
    <br /><br />
    </main>

    <footer>
    <div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner footer">
    <div class="container">
    <footer>

    </footer>
    </div>
    </div>
    </div>
    </footer>
    {% render_bundle 'runtime' %}
    {% render_bundle 'polyfills' %}
    {% render_bundle 'styles' %}
    {% render_bundle 'vendor' %}
    {% render_bundle 'main' %}
    </html>


    References:




    1. Angular 6|5 Tutorial: Integrating Angular with Django

    2. Customizing Angular CLI 6 build — an alternative to ng eject

    3. Evolving your Django frontend


    4. Angular Hello World Example used


    Routing:



    In order for angular routing to work, you must



    1) app-routing.module.ts - Add the routing to angular



    const routes: Routes = [
    { path: '', component: TestComponent, data: { title: 'Home' }},
    { path: 'test', component: Test2Component, data: { title: 'Test' }}
    ];


    2) urls.py - Add the routing to Django - just point it to the same view



    urlpatterns = [
    path('', djangodir_views.serve_angular, name='serve_angular'),
    path('test', djangodir_views.serve_angular, name='serve_angular')
    ]





    share|improve this answer






























      1














      Assumption: That django site is already running



      Things needed to set up Angular 6 locally




      1. Install Node Js.


        https://nodejs.org/en/download/




      2. Install Angular cli Globally


        npm install -g @angular/cli




      3. Navigate to angular on the repo


        dirangular




      4. Install the npm's [libraries]


        npm install




      5. Serve the site


        npm serve [-o]




      6. Navigate to the hosted site


        http://localhost:4200/





      Angular Libraries needed to support Django




      npm install @angular-devkit/custom-webpack --save



      npm install @angular-builders/custom-webpack --save



      npm install webpack-bundle-tracker --save




      Django Libraries needed to support Angular




      pip install django-webpack-loader




      File Architecture - I put my angular project within the djangodir off root



      root > djangodir > angular



      root > djangodir > static



      root > djangodir > templates



      root > djangodir > webpack-stats-angular.json



      Set Up Angular for Django



      1) Alter angular.json to include custom webpack config and change build type to builder



       "architect": {
      "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
      "customWebpackConfig": {
      "path": "./extra-webpack.config.js"
      },
      "outputPath": "../static/angular",


      2) extra-webpack.config.js code



      const BundleTracker = require('webpack-bundle-tracker');

      module.exports = {
      plugins:[
      new BundleTracker({filename: '../webpack-stats-angular.json'})
      ],
      output: {
      path: require('path').resolve('../static/angular'),
      filename: "[name]-[hash].js"
      }
      };


      Set Up Django for Angular



      1) settings.py - added webpack_loader to installed_apps



      INSTALLED_APPS = [
      'webpack_loader'
      ]


      2) settings.py - added webpack_loader



      WEBPACK_LOADER = {    
      'DEFAULT': {
      'BUNDLE_DIR_NAME': 'angular/',
      'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-angular.json'),
      }
      }


      3) requirements.txt - We have a script that pulls from a text file to include dependencies - to this we add



      django-webpack-loader==0.6.0


      4) urls.py - set up the init routing to the hello world angular app



      from . import views as djangodir_views

      urlpatterns = [
      # path('', include(router.urls)),
      path('', djangodir_views.serve_angular, name='serve_angular')
      ]


      5) views.py - include url path



      def serve_angular(request):
      return render(request, 'angular.html')


      Angular.html Page:



      {% load render_bundle from webpack_loader %}

      <!doctype html>
      <html lang="en">
      <head>
      <base href="/">
      <title>Angular/TypeScript Hello World Project</title>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content="Angular Hello World Starter">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
      <!-- <link href="assets/styles/styles.css" rel="stylesheet" /> -->
      </head>
      <body>
      <header class="navbar navbar-inner navbar-fixed-top">
      <nav class="container">
      <div class="navbar-header">
      <span class="app-title"></span>
      </div>
      </nav>
      </header>

      <main class="container">
      <app-root>
      Loading...
      </app-root>
      <br /><br />
      </main>

      <footer>
      <div class="navbar navbar-fixed-bottom">
      <div class="navbar-inner footer">
      <div class="container">
      <footer>

      </footer>
      </div>
      </div>
      </div>
      </footer>
      {% render_bundle 'runtime' %}
      {% render_bundle 'polyfills' %}
      {% render_bundle 'styles' %}
      {% render_bundle 'vendor' %}
      {% render_bundle 'main' %}
      </html>


      References:




      1. Angular 6|5 Tutorial: Integrating Angular with Django

      2. Customizing Angular CLI 6 build — an alternative to ng eject

      3. Evolving your Django frontend


      4. Angular Hello World Example used


      Routing:



      In order for angular routing to work, you must



      1) app-routing.module.ts - Add the routing to angular



      const routes: Routes = [
      { path: '', component: TestComponent, data: { title: 'Home' }},
      { path: 'test', component: Test2Component, data: { title: 'Test' }}
      ];


      2) urls.py - Add the routing to Django - just point it to the same view



      urlpatterns = [
      path('', djangodir_views.serve_angular, name='serve_angular'),
      path('test', djangodir_views.serve_angular, name='serve_angular')
      ]





      share|improve this answer




























        1












        1








        1







        Assumption: That django site is already running



        Things needed to set up Angular 6 locally




        1. Install Node Js.


          https://nodejs.org/en/download/




        2. Install Angular cli Globally


          npm install -g @angular/cli




        3. Navigate to angular on the repo


          dirangular




        4. Install the npm's [libraries]


          npm install




        5. Serve the site


          npm serve [-o]




        6. Navigate to the hosted site


          http://localhost:4200/





        Angular Libraries needed to support Django




        npm install @angular-devkit/custom-webpack --save



        npm install @angular-builders/custom-webpack --save



        npm install webpack-bundle-tracker --save




        Django Libraries needed to support Angular




        pip install django-webpack-loader




        File Architecture - I put my angular project within the djangodir off root



        root > djangodir > angular



        root > djangodir > static



        root > djangodir > templates



        root > djangodir > webpack-stats-angular.json



        Set Up Angular for Django



        1) Alter angular.json to include custom webpack config and change build type to builder



         "architect": {
        "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
        "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
        },
        "outputPath": "../static/angular",


        2) extra-webpack.config.js code



        const BundleTracker = require('webpack-bundle-tracker');

        module.exports = {
        plugins:[
        new BundleTracker({filename: '../webpack-stats-angular.json'})
        ],
        output: {
        path: require('path').resolve('../static/angular'),
        filename: "[name]-[hash].js"
        }
        };


        Set Up Django for Angular



        1) settings.py - added webpack_loader to installed_apps



        INSTALLED_APPS = [
        'webpack_loader'
        ]


        2) settings.py - added webpack_loader



        WEBPACK_LOADER = {    
        'DEFAULT': {
        'BUNDLE_DIR_NAME': 'angular/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-angular.json'),
        }
        }


        3) requirements.txt - We have a script that pulls from a text file to include dependencies - to this we add



        django-webpack-loader==0.6.0


        4) urls.py - set up the init routing to the hello world angular app



        from . import views as djangodir_views

        urlpatterns = [
        # path('', include(router.urls)),
        path('', djangodir_views.serve_angular, name='serve_angular')
        ]


        5) views.py - include url path



        def serve_angular(request):
        return render(request, 'angular.html')


        Angular.html Page:



        {% load render_bundle from webpack_loader %}

        <!doctype html>
        <html lang="en">
        <head>
        <base href="/">
        <title>Angular/TypeScript Hello World Project</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Angular Hello World Starter">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <!-- <link href="assets/styles/styles.css" rel="stylesheet" /> -->
        </head>
        <body>
        <header class="navbar navbar-inner navbar-fixed-top">
        <nav class="container">
        <div class="navbar-header">
        <span class="app-title"></span>
        </div>
        </nav>
        </header>

        <main class="container">
        <app-root>
        Loading...
        </app-root>
        <br /><br />
        </main>

        <footer>
        <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner footer">
        <div class="container">
        <footer>

        </footer>
        </div>
        </div>
        </div>
        </footer>
        {% render_bundle 'runtime' %}
        {% render_bundle 'polyfills' %}
        {% render_bundle 'styles' %}
        {% render_bundle 'vendor' %}
        {% render_bundle 'main' %}
        </html>


        References:




        1. Angular 6|5 Tutorial: Integrating Angular with Django

        2. Customizing Angular CLI 6 build — an alternative to ng eject

        3. Evolving your Django frontend


        4. Angular Hello World Example used


        Routing:



        In order for angular routing to work, you must



        1) app-routing.module.ts - Add the routing to angular



        const routes: Routes = [
        { path: '', component: TestComponent, data: { title: 'Home' }},
        { path: 'test', component: Test2Component, data: { title: 'Test' }}
        ];


        2) urls.py - Add the routing to Django - just point it to the same view



        urlpatterns = [
        path('', djangodir_views.serve_angular, name='serve_angular'),
        path('test', djangodir_views.serve_angular, name='serve_angular')
        ]





        share|improve this answer















        Assumption: That django site is already running



        Things needed to set up Angular 6 locally




        1. Install Node Js.


          https://nodejs.org/en/download/




        2. Install Angular cli Globally


          npm install -g @angular/cli




        3. Navigate to angular on the repo


          dirangular




        4. Install the npm's [libraries]


          npm install




        5. Serve the site


          npm serve [-o]




        6. Navigate to the hosted site


          http://localhost:4200/





        Angular Libraries needed to support Django




        npm install @angular-devkit/custom-webpack --save



        npm install @angular-builders/custom-webpack --save



        npm install webpack-bundle-tracker --save




        Django Libraries needed to support Angular




        pip install django-webpack-loader




        File Architecture - I put my angular project within the djangodir off root



        root > djangodir > angular



        root > djangodir > static



        root > djangodir > templates



        root > djangodir > webpack-stats-angular.json



        Set Up Angular for Django



        1) Alter angular.json to include custom webpack config and change build type to builder



         "architect": {
        "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
        "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
        },
        "outputPath": "../static/angular",


        2) extra-webpack.config.js code



        const BundleTracker = require('webpack-bundle-tracker');

        module.exports = {
        plugins:[
        new BundleTracker({filename: '../webpack-stats-angular.json'})
        ],
        output: {
        path: require('path').resolve('../static/angular'),
        filename: "[name]-[hash].js"
        }
        };


        Set Up Django for Angular



        1) settings.py - added webpack_loader to installed_apps



        INSTALLED_APPS = [
        'webpack_loader'
        ]


        2) settings.py - added webpack_loader



        WEBPACK_LOADER = {    
        'DEFAULT': {
        'BUNDLE_DIR_NAME': 'angular/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-angular.json'),
        }
        }


        3) requirements.txt - We have a script that pulls from a text file to include dependencies - to this we add



        django-webpack-loader==0.6.0


        4) urls.py - set up the init routing to the hello world angular app



        from . import views as djangodir_views

        urlpatterns = [
        # path('', include(router.urls)),
        path('', djangodir_views.serve_angular, name='serve_angular')
        ]


        5) views.py - include url path



        def serve_angular(request):
        return render(request, 'angular.html')


        Angular.html Page:



        {% load render_bundle from webpack_loader %}

        <!doctype html>
        <html lang="en">
        <head>
        <base href="/">
        <title>Angular/TypeScript Hello World Project</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Angular Hello World Starter">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <!-- <link href="assets/styles/styles.css" rel="stylesheet" /> -->
        </head>
        <body>
        <header class="navbar navbar-inner navbar-fixed-top">
        <nav class="container">
        <div class="navbar-header">
        <span class="app-title"></span>
        </div>
        </nav>
        </header>

        <main class="container">
        <app-root>
        Loading...
        </app-root>
        <br /><br />
        </main>

        <footer>
        <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner footer">
        <div class="container">
        <footer>

        </footer>
        </div>
        </div>
        </div>
        </footer>
        {% render_bundle 'runtime' %}
        {% render_bundle 'polyfills' %}
        {% render_bundle 'styles' %}
        {% render_bundle 'vendor' %}
        {% render_bundle 'main' %}
        </html>


        References:




        1. Angular 6|5 Tutorial: Integrating Angular with Django

        2. Customizing Angular CLI 6 build — an alternative to ng eject

        3. Evolving your Django frontend


        4. Angular Hello World Example used


        Routing:



        In order for angular routing to work, you must



        1) app-routing.module.ts - Add the routing to angular



        const routes: Routes = [
        { path: '', component: TestComponent, data: { title: 'Home' }},
        { path: 'test', component: Test2Component, data: { title: 'Test' }}
        ];


        2) urls.py - Add the routing to Django - just point it to the same view



        urlpatterns = [
        path('', djangodir_views.serve_angular, name='serve_angular'),
        path('test', djangodir_views.serve_angular, name='serve_angular')
        ]






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 27 '18 at 16:40

























        answered Nov 27 '18 at 15:34









        DemodaveDemodave

        3,45642941




        3,45642941
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53503054%2fhow-to-host-angular-6-application-in-python-django%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Calculate evaluation metrics using cross_val_predict sklearn

            Insert data from modal to MySQL (multiple modal on website)