devoncrazylegs devoncrazylegs - 5 months ago 60
Node.js Question

Angular2 Router not working correctly

I am trying to define a simple application with login functionality in Angular2 with Typescript. I have defined my Router but am getting an error when attempting to access the url in a browser. This is the error:

Cannot GET /login


And the url I am using:

http://localhost:3012/login


It seems as if router is not correctly routing the URL to correct component and I am not sure why. Here is my home.component.ts which instantiates the app and router:

import {Component} from 'angular2/core';

import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';
import {LoginComponent} from './login/login.component';
import {DashboardComponent} from './dashboard/dashboard.component';

@Component({
selector: 'home',
templateUrl: '<router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
{path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true},
{path: '/dashboard', name: 'Dashboard', component: DashboardComponent},
{path: '/*other', name: 'Other', redirectTo: ['Login']}
])
export class HomeComponent {

}


Both the Login and Dashboard components are defined correctly and PHPStorm has not picked up any errors.

Does anyone have any idea as to why this may be happening?

Here is my server side code. server.ts (NodeJS entry point)

import express = require('express');
import path = require('path');

let port: number = process.env.PORT || 3012;
let app = express();

app.set('views', path.join('./src/Client/views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

app.use("/node_modules", express.static(path.resolve(__dirname, '../../node_modules')));
app.use("/app", express.static(path.resolve(__dirname, '../Client/app')));

app.use("/*.html", function(req, res) {
res.render(req.params[0] + ".html");
});

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

let server = app.listen(port, function() {
let host = server.address().address;
let port = server.address().port;
});


And my index.html file which includes all required Angular2 scripts and starts SystemJS

<html>
<head>
<title>Test</title>

<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>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/bootstrap')
.then(null, console.error.bind(console));
</script>
</head>

<body>
<home>Loading...</home>
</body>
</html>


And my file structure:

enter image description here

Thanks

Answer

I think this:

app.use("/*.html", function(req, res) {
    res.render(req.params[0] + ".html");
});

should be

app.use("/*", function(req, res) {
    res.render(req.params[0] + ".html");
});

because I am not sure why you would +.html again to a html request.

Does that solve the issue ?

Comments