Angular-cli with any other server

I've actually "sorta" solved the problem. I have a directory named "smoke" (short for smoke and mirrors ), and inside there I ran the angular-cli command:

ng new static

This created the angular-cli start out application in the static directory. Then I created this (simplified) Python Flask application:

import osfrom flask import Flask, send_from_directory, redirectfrom flask.ext.restful import Apifrom gevent import monkey, pywsgimonkey.patch_all()def create_app():    app = Flask("press_controller")    # map the root folder to index.html    @app.route("/")    def home():        return redirect("/index.html")    @app.route("/<path:path>")    def root(path):        """        This is the cheesy way I figured out to serve the Angular2 app created        by the angular-cli system. It essentially serves everything from        static/dist (the distribution directory created by angular-cli)        """        return send_from_directory(os.path.join(os.getcwd(), "static/dist"), path)    return appif __name__ == "__main__":    app = create_app()    server = pywsgi.WSGIServer(("0.0.0.0", 5000), app)    server.serve_forever()else:    app = create_app()

This way I can navigate to http://localhost:5000 and the application will serve up the Angular app just like "ng serve" does. Now I can add in my REST API endpoints as I wanted and have Angular services access them to populate the application.

Doug

There's no requirement that Flask serves the frontend application.

Really all Flask would be doing with an Angular app is serving static files, something that is better handled by a web server like Nginx in production, or the framework's tools like ng-serve in development.

Meanwhile, Flask would act as the backend api server that your frontend app communicates with. Use request.get_json() and return jsonify(...) to get and respond with JSON data.

Run the two separately, they work together over HTTP only. This also simplifies working with backend vs. frontend developers: all they need to know about is the api to communicate between the two. However, since the frontend is being served on a different port than the backend, you'll need to set up Flask appropriately to allow CORS requests, for example with Flask-CORS.

Old question but I came across it when setting up my new project. I'm using a a more recent version of angular cli (7.3.1) and Flask (1.0.2) but the setup is pretty similar to yours. I should note that this is by no means the cleanest setup, and I'm sure the same could be achieved with webpack only, but I felt this way was a bit easier to follow (I've found webpack config can be a nightmare). My directory structure is as follows (after building):

client              // this is my angular project  src  angular.jsonserver              // this is my flask server  templates    index.html      // generated from ng build  static    vendor.js       // generated from ng build    pollyfills.js    ...Makefile

In angular.json, you'll want to point the build path to your flask server:

  "build": {      "builder": "@angular-devkit/build-angular:browser",      "options": {        "outputPath": "../server/static",        "index": "src/index.html",        "main": "src/main.ts",        "polyfills": "src/polyfills.ts",        "tsConfig": "src/tsconfig.app.json",        "assets": [          "src/favicon.ico",          "src/assets"        ],        "styles": [          "src/styles.scss"        ],        "scripts": [],        "es5BrowserSupport": true      },      ...

In my server, configure the static url:

app = Flask(__name__, static_url_path='')

And finally in the makefile, execute the build command, and copy the template file into the templates folder:

all:    cd client && ng build --prod;    mv server/static/index.html server/templates/ ;.PHONY : all

Again, not the most elegant solution but pretty straight forward to get rolling with the angular cli (rather than getting the hands dirty with webpack).