1

I am trying to implement routing with id parameter on the url such as localhost:1000/register/id Using that path will always trigger system is not defined while other urls without parameters are working fine. I even tried following the guide from angular.io's routing format doesn't seems to fix the problem. What am I missing in my code?

enter image description here

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegisterComponent } from './registration/register.component';
import { CodeComponent } from './registration/code.component';

const appRoutes: Routes = [
    {
        path: 'register/:id',
        component: RegisterComponent
    },
    {
        path: '',
        component: CodeComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { CodeComponent } from './registration/code.component';
import { RegisterComponent } from './registration/register.component';

@NgModule({
    imports: [BrowserModule, HttpModule, FormsModule, routing],
    declarations: [AppComponent, CodeComponent, RegisterComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

server.js

var express = require('express'),
    app = express(),
    mongoose = require('mongoose'),
    bodyParser = require('body-parser'),
    path = require('path'),
    passport = require('passport'),
    session = require('express-session'),
    port = process.env.PORT || 1000;

db = require('./config/db');
mongoose.Promise = global.Promise;
mongoose.connect(db.url);

app.use(session({
    secret: 'test',
    saveUninitialized: true,
    resave: true
}));

app.use(passport.initialize());
app.use(passport.session());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
require('./config/passport')(passport);
require('./routes/main')(app, passport);

app.use(express.static(path.join(__dirname)));
app.use('/node_modules', express.static(path.join(__dirname+ '/node_modules')));
console.log(path.join(__dirname+ '/node_modules'))

app.all('/*', function (req, res, next) {
    res.sendFile('/view/index.html', { root: __dirname });
});

app.listen(port);
console.log('Magic happens on port ' + port);

UPDATE:

By using this.router.navigate(['/register', '1']); works perfectly, but by typing on the url localhost:1000/register/1 is not working

enter image description here

From the picture above, there is mouse hover showing the url to be localhost:1000/register/node_modules/core-js.... - I think there is something I've missed in my server NodeJS side.

I've also added

app.use('/node_modules', express.static(__dirname + '/node_modules'));

But no changes

Note: Server side (NodeJS,Express)

17
  • how you're navigating got register/:id? Commented Jan 3, 2017 at 3:52
  • at the moment i'll just type in the url localhost:1000/register/1 to test Commented Jan 3, 2017 at 3:54
  • @PankajParkar , I took your question into testing, using this.router.navigate(['/register', '1']); works. But shouldn't by typing on the URL do the same? will update the question Commented Jan 3, 2017 at 3:58
  • were you using html5mode? Commented Jan 3, 2017 at 3:59
  • 1
    @GeneLim I guess this answer would help you Commented Jan 3, 2017 at 4:07

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.