I’m with a strange situation.
I’m making a simple app that for now needs to go from the landing-page (directory ”) to a form component (directory ‘/form’) using Angular 17 and node.js with express.js. I have nodemon installed to listen to my code changes and up that to the server, algo using ‘ng build –watch’ to update the angular files and make nodemon listen.
The thing is, when I use node server with nodemon, my routing doesn’t work, but when I use ‘ng serve’ from Angular CLI, it works. It seems when I run the server on nodemon, all button behavior/routing doesn’t work, because even if I force the directory to go to ‘/form’ by writing the URL, the component doesn’t render on the screen, only showing the landing-page.
I don’t know why it is behaving like this and I want to use node as a back-end, so eventually I’ll need the server to work on the node side.
Here are my files:
server.js
const path = require('path');
const express = require('express');
const app = express();
const port = 3000;
app.use(express.static(path.join(__dirname, '/dist/crono-ai')));
app.get('*',(req, res) =>{
res.sendFile(path.join(__dirname, '/dist/crono-ai/browser/index.html'));
});
app.get('/', (req, res) =>{
res.send('Hello World from Node.js server!');
});
app.listen(port, () =>{
console.log(`Server listening at http://localhost:${port}`);
});
app.routes.ts
import { Routes } from '@angular/router';
import { AppLandingComponent } from './app-landing/app-landing.component';
import { AppFormComponent } from './app-form/app-form.component';
export const routes: Routes = [
{ path: '', component: AppLandingComponent },
{ path: 'form', component: AppFormComponent },
];
(the button component is inside the AppLandingComponent)
app-button.component.html
<button [class.primary]="buttonType === 'primary'" [class.secondary]="buttonType === 'secondary'" (click)="onClick('/form')">
{{ buttonText }}
</button>
app-button.component.ts
import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-button',
standalone: true,
imports: [],
templateUrl: './app-button.component.html',
styleUrl: './app-button.component.scss'
})
export class AppButtonComponent {
constructor(private router: Router) { }
onClick(direc: string) {
this.router.navigate([direc]);
}
@Input() buttonText: string = '';
@Input() buttonType: string = 'primary';
}
I’m still learning how Angular + node works, so maybe I’m letting something slide on the server.js file and that’s probably what is crashing it.