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
– Rahul Kumar Jain, Commented Oct 31, 2017 at 16:05
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
– Rahul Kumar Jain, Commented Oct 31, 2017 at 17:12
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
– Srinivas Valekar, Commented Oct 31, 2017 at 17:18
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, Commented Oct 31, 2017 at 17:20

Srinivas Valekar · Accepted Answer · 2017-10-31 23:21:51Z

1

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!

edited Oct 31, 2017 at 23:21

answered Oct 31, 2017 at 23:16

Srinivas Valekar

1,12311 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rahul Kumar Jain Over a year ago

with your script when I run command node server.js nothing happens while i used mine main.js which is having code to run express it starts express but there problem is I hit localhost:5002 it loads index.html showing as Loading... When I go to browser debugger to see the source files in each file it has code which is in index.html hence angular app does not work. e.g. main.js having so where is the actual code gone

Rahul Kumar Jain Over a year ago

When I am running dist folder using nginx server it runs index.html properly only thing is I have to set proxies but with express it is not loading supporting js file properly

Srinivas Valekar Over a year ago

The above mentioned way is one way to do it. Follow scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli post to get it working properly. Of course there is another way to run the projects separately one express project and other angular project. And as you mentioned you need to use proxies.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related