angular-cli webpack how to serve generate dist folder on express server

Question

I am using angular 4 with angular-cli so I stuck at a point where I have generated dist folder using ng build --prod which I have to serve on express server. I have existing setup where I am running angular 1 code.

domain is same exploring github.com/angular/angular-cli/wiki/stories-proxy this url for solving issue — Rahul Kumar Jain
Just tell me how to use express server in Angular cli I have full setup in Angular 1.x where I am using gulp — Rahul Kumar Jain
You can't use express server in Angular cli as far as I know. But you can build and put your angular project bundles inside express project. — Srinivas Valekar
Did you try routerLink to redirect ? are you using angular router, it is not clear from your question that what you are trying to achieve here — Srinivas Valekar

Srinivas Valekar Srinivas Valekar · Accepted Answer · 2017-10-31T23:16:49

Below is the gist of it

In your express application, define the routes.For example if you need two routes,

For serving client side(in this case Angular)
Other for REST APIs

Then in your server.js you will have following routes.

    //assuming you have configured your express configuration in server.js
    var express = require('express');
    var bodyParser = require('body-parser');
    var path = require('path');
    var app = express();
    var http = require('http').Server(app);
    var index = require('./routes/index');
    var apis = require('./routes/apis')(http);
    ......
    // I am skipping codes which are common
    //add the routes 
    //Pointing to Index file of routes
    app.use('/', index);
    //apis - Pointing to apis file of routes
    app.use('/api', apis);

Then in routes folder let's define index.js file and in that let us define route for serving client.

// /routes/index.js
    var express = require('express');
    var router = express.Router();
    router.get('', function (req, res, next) { 
        res.render('index.html');
    });
    module.exports = router;

Now in views folder let's assume that we have index.html file. In this file I am importing compiled main.js file of Angular 4

<!DOCTYPE html>
<html>
  <head>
    <title>Sample App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  	<base href="/">
    <!-- <link rel="stylesheet" href="styles.css"> -->
    <link rel="stylsheet" href ="/bower_components/bootstrap/dist/css/bootstrap.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="src/systemjs.config.js"></script>
    <script>
      System.import('src/main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <!-- This is the main angular component selector tag-->
    <my-app>Loading.....</my-app>
  	<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  
</ul>
  </body>
</html>

Please observe that I am using systemjs.

Important! Change the path to main.js according. For example, try building angular project into src folder.Below is the snippet of tsconfig.json file of Angular 4

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src", // the compiled code will go to src folder
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

If you use ng serve, this command will wipe out built files in src directory in this case. So use ng build --watch to build and watch your changes

For expressjs to observe changes, install nodemon and type command nodemon to run application.

Hope this helps you!

angular-cli webpack how to serve generate dist folder on express server

1 Answers