0

I have a "simple" Angular2 app that I want to serve using express. I've set up a very basic implementation, but now I can't get routing to work properly. What happens is that when I navigate to the default route - localhost:8081, the app will load, and all the routing components work.

Then when I go to an angular defined route and refresh the page, I just get the following error: Cannot GET /landing.

I've added the <base href="/" > tag onto my index.html file, and I've been able to serve the app properly using npm-lite.

I have setup a github repo in case anyone would like to look at the file structure.

my server.js:

var express = require('express');

var app = express();

app.use(express.static(__dirname));

app.get('/', function (req, res) {
   res.render('index.html');
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

index.html:

<html>

<head>
    <!-- angular2 router -->
    <base href="/" >

    <meta charset="utf-8">

    <title>Miha Šušteršič - Portfolio</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- fonts -->
    <link href='https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans' rel='stylesheet' type='text/css'>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <!-- 2. Configure SystemJS -->

    <script>
        System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
</head>
<!-- 3. Display the application -->

<body>
    <portfolio-app>Loading...</portfolio-app>
</body>

</html>

Looking at this question I modified my main.ts app file a bit to look like this, but the problem still persists:

import { bootstrap }    from 'angular2/platform/browser';
import { AppComponent } from './app.component';
import { provide } from 'angular2/core';
import {
  HashLocationStrategy,
  LocationStrategy,
  ROUTER_PROVIDERS
} from 'angular2/router';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

If you need additional info please let me know.

Community
  • 1
  • 1
Miha Šušteršič
  • 9,742
  • 25
  • 92
  • 163
  • Hey Gunther, I tried modifying the main.ts file and still can't get it to work. I'll add the code to the question – Miha Šušteršič May 04 '16 at 11:45
  • Can you make a runnable example https://plnkr.co/edit/wnLWAW?p that allows to investigate? – Günter Zöchbauer May 04 '16 at 11:47
  • hey, it's a bit big for plnkr. I've removed gitignore and updated the repo, you can just clone the repository, do npm install, npm start to compile ts in JS, then do node server.js? – Miha Šušteršič May 04 '16 at 12:14
  • There is no need to put your whole project into the plunker (no one would spend the time to read through lots of code anyway) only the `AppComponent` and some demo components with a minimal set of routes that allow to reproduce the problem. – Günter Zöchbauer May 04 '16 at 12:16
  • sry I'm really having problems setting this up in plunker since I'm not used to using it. I also don't see how you can debug an express server with plnkr. – Miha Šušteršič May 04 '16 at 13:40
  • If you use `HashLocationStrategy` then it is not depending on the server. I need a running code base that contains the issue. If I need to understand your whole code base in order to locate the cause I won't bother. If you can create a simplified example that only contains what is necessary to reproduce then I can copy that to a local project as well and try it here if it can't be reproduced in Plunker. – Günter Zöchbauer May 04 '16 at 13:43
  • I'll set it up later on, and open it as a separate question. Thanks for the input – Miha Šušteršič May 04 '16 at 14:43
  • figured it out, it was an issue with the server configuration, not the angular code itself – Miha Šušteršič May 07 '16 at 09:22
  • Dup of http://stackoverflow.com/questions/35137573/angular-2-router-es5-doesnt-work-on-page-reload/35137712#35137712 – Günter Zöchbauer May 07 '16 at 16:56

0 Answers0