README.md

Project Kiwi

	This is a Kiwi (Kiwi)

Angular 2 Tutorial Routing

This project shows ...

• how to use Angluar 2 services to manage data

Open Angular 2 Tutorial Routing and work through. Some additional infos are given in chapter Manual reloading problem

---

This tutorial uses Netbeans, Gulp.js, Node.js, Express Web-Server.
Follow these links to find some more information for Netbeans IDE, Gulp.js, Node.js, Express Web-Server, Angular 2 and TypeScript.

---

How to run the project

To do (on Linux OS) ...

1. open shell and clone git repository
   git clone <repository-url>
2. change working directory to project and install node modules
   cd <project-dir>/kiwi
npm install
3. build the project and start the server
   npm start
4. start a web-client and test the server
   http://localhost:8080

---

Manual reloading problem

See also: http://stackoverflow.com/questions/31415052

What's the problem?

Clicking on button dashboard activates the link http://localhost:8080/dashboard.
If you make a manual reload on this link the browser will return an error.

What's the cause?

The express server server.js does not return index.html in case of resource /dashboard.

Solution 1:

Switch to HashLocationStrategy. Add { useHash: true } in file app-routing.module.ts on line imports:.

@NgModule({  
  imports: [ RouterModule.forRoot(routes, { useHash: true}) ],  
  exports: [ RouterModule ]  
})  

Now the link is http://localhost:8080/#/dashboard, and the server will return index.html for / (before the hash).

Solution 2:

Add some middleware in the express server. If the resource is not known the file index.html is sent back.

function sendSpaFileIfUnmatched(req,res) {
    res.sendFile("index.html", { root: path.join(__dirname, '../public') });
}
...
app.use(sendSpaFileIfUnmatched);
...