Using Angular Platform-server (Universal) to route with query parameters

I've been struggling to describe a route with get parameters in my platform-server/universal application, but haven't had any luck so far.

Does anyone have suggestions on how to achieve this?

Based on my understanding of express routing, I attempted the following approach but encountered an error:

routes.ts:

 export const ROUTES: string[] = [
    '/',
    '/item/:id'
 ];

main.server.ts:

ROUTES.forEach((route: string) => {
  app.get(route, (req: Request, res: Response) => {
    res.render('../dist/index', {
      req: req,
      res: res
    });
  });
});

my component:

constructor(private route: ActivatedRoute) {

  }

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       console.log(params['id']);
    });
}

Although the server starts without errors when using npm start, accessing

http://localhost:8000/item/thisistheparam
results in the following error in the browser console:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'item/thisistheparam'

Answer №1

Ah, I finally figured out the issue - I had forgotten to include the path in my lazy module as well ;)

Specifically within my item.module.ts file:

@NgModule({
  declarations: [ItemView],
  imports: [
    RouterModule.forChild([
      { path: ':id', component: PublicItemView, pathMatch: 'full'}
    ])
  ]
})

I updated path: ''to path: ':id', and now everything is working perfectly fine!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Angular Services - registering to component OnDestruction

I have a service called MyService which is injected into the MyComponent. My goal is for MyComponent to be able to call a function on MyService and provide a way to reference this specific instance of MyComponent so that MyService can detect when the compo ...

Having trouble retrieving text from an HTML form in Node.js using express, as the req.body object is coming up

Having trouble extracting text from an HTML form to build a basic text to speech functionality. Despite using an express server, the req.body is consistently empty when attempting to fetch the text. I've experimented with body-parser and adjusted the ...

Populating a generic array of ObjectId in Mongoose without using a reference

I am currently utilizing mongoose 4.6.6, express 4.13, and passport 0.3. This is the mongoose Schema that I have: var userSchema = new Schema({ nombre: String, apellidos: String, email: String, pass: String, fecha_registro : { type: Date, defau ...

I am facing an issue where Express is not properly serving my static files on a particular page

Upon further investigation, I have noticed that Express successfully serves my static files on the "/" and "/home" pages. However, an issue arises when I navigate to "/home/download", as my files are no longer being served. It's worth mentioning that ...

An alternative to PHP's exec function in Node.js

I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...

Guide to sending a request to a third-party API using Node.js and Express.js with the 'Authorization: Basic' header

Attempting to utilize the UDEMY API, each request necessitates the inclusion of Authorization: Basic + keys header. The API documentation specifies: curl --user {YOUR_CLIENT_ID}:{YOUR_CLIENT_SECRET} https://www.udemy.com/api-2.0/courses/ curl -H "Au ...

How can you measure the performance of rendering in DustJS?

Recently, I have been experiencing slow rendering of dustjs templates after using res.render in an express controller. Despite removing fast async calls from dust helpers, some templates still take multiple seconds to render, even though they are pre-compi ...

The issue with Rxjs forkJoin not being triggered within an Angular Route Guard

I developed a user permission service that retrieves permissions from the server for a specific user. Additionally, I constructed a route guard that utilizes this service to validate whether the user possesses all the permissions specified in the route. To ...

Arranging Objects in Angular 2 using Pipes

While I've come across similar questions, none of the solutions provided have worked for me so far. Therefore, please refrain from marking this as a duplicate unless you can point me to an answer that actually resolves my issue. Currently, I am worki ...

What is the best practice for storing angular partials - should they be kept in the public/ directory, views/ directory, or another location altogether

Currently developing a Pinterest-inspired platform to enhance my understanding of node.js. I'm contemplating where to store my partial views, such as those for rendering pins - should they be placed in the public/partials folder or within the views/ d ...

Having trouble with importing a variable in an Express application? You may encounter this error message: "Route.get() must

When trying to import requireSignin from the controllers/auth.js file into the routes/user.js file and adding it to the router.get('/user/:id', requireSignin, read); route, an error occurs: Error: Route.get() requires a callback function but r ...

Encountering a 404 Error in Angular 17 When Refreshing the Page

After completing my Angular 17 project and deploying it to hosting, I encountered an issue where pressing F5 on the page would redirect me to a 404 error page. Despite searching for solutions, I was unable to resolve this situation within Angular 17. I am ...

Guidelines for integrating a SOAP asmx service into an Angular+8 application using XML implementation

Here is the code snippet I'm struggling with: var xmlItemAll = '<?xml version="1.0" encoding="utf-8"?>' + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:x ...

Error in Moongose: Using .populate on a key with whitespace is not functioning as expected

I am currently working with Express and Mongoose for database operations. I have encountered an issue where attempting to populate a path with a key that contains a whitespace causes it to be ignored. MongoDB Model: const OrgCrimeSchema = new Schema({ g ...

Troubleshooting NodeJS: Dealing with "ENOENT" warnings in session management

I am experiencing issues with my node application using the express-session and session-file-store packages. The session data is being stored as files in the root directory by the session-file-store package. However, I have noticed that my logs are getting ...

Discovering the bottom scroll position in an Angular application

I am working on implementing two buttons on an Angular web page that allow the user to quickly scroll to the top and bottom of the page. However, I want to address a scenario where if the user is already at the very top of the page, the "move up" button sh ...

Finding the index of a selected option in node.js can be achieved using express

I am trying to retrieve the index of the selected object using Express and log it in app.js example.html <form id="tableForm" action="getJson"> <select class="example" name="example"> <option name="table1" value="1"& ...

Organizing Your Express.js Project

After discovering Express's application generator, I noticed that the documentation lacks information on the purpose of each directory and file. Can someone provide a brief explanation of where specific files should be placed within this generated app ...

Issue encountered while implementing GraphQL in an Express application using Node.js

I have encountered an issue while attempting to set up a GraphQL server in Express. The error message that I am receiving is as follows: var graphqlHTTP = require('express-graphql'); // express graphql var { buildSchema } = require('graphql ...

Encountering an issue with unexpected token 'import' while working on Angular-cli and RC

Currently, I'm in the process of setting up Material 2 with Angular-cli RC5. However, when attempting to load the material button component in app.module.ts, I encounter the following error message. zone.js:461 Unhandled Promise rejection: SyntaxErro ...