I have been working on implementing Universal and I believe I've made significant progress. My project is built on this seed. However, when I run "npm start", only the /about and /contact pages render successfully. The /home page does not render at all, and the request is canceled with a status of "canceled" in the Network tab of the developer tools. You can find the full repository here (please note that it is the "@ng-bootstrap" branch). It would be greatly appreciated if someone could take a look at it. It's challenging to identify the bug without any error messages.
server.ts:
// src/server.ts
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
const PORT = process.env.PORT || 4000;
enableProdMode();
const app = express();
let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();
app.engine('html', (_, options, callback) => {
const opts = { document: template, url: options.req.url };
renderModuleFactory(AppServerModuleNgFactory, opts)
.then(html => callback(null, html));
});
app.set('view engine', 'html');
app.set('views', 'src')
app.get('*.*', express.static(join(__dirname, '..', 'dist')));
app.get('/about*', (req, res) => {
res.render('index', { req });
});
app.get('/contact*', (req, res) => {
res.render('index', { req });
});
app.get('/home*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`listening on http://localhost:${PORT}!`);
});
home.module.ts:
// src/app/home/home.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { HomePageComponent } from './home-page/home-page.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: HomePageComponent, pathMatch: 'full' }
])
],
declarations: [HomePageComponent]
})
export class HomeModule { }
home-page.component.ts:
// src/app/home/home-page/home-page.component.ts
import { Component, OnInit } from '@angular/core';
import { Exchange } from '../../exchange';
import { ExchangeService } from '../../exchange.service';
import { ClockService } from "../../clock.service";
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit {
exchanges: Exchange[] = [];
myDate: Date;
constructor(private exchangeService: ExchangeService,
private clockService: ClockService
) {}
ngOnInit(): void {
this.exchangeService.getExchanges()
.then(exchanges => this.exchanges = exchanges);
this.clockService.utcTime(this.exchanges);
setInterval(() => {
this.myDate = this.clockService.utcTime(this.exchanges)[0];
this.exchanges = this.clockService.utcTime(this.exchanges)[1];
}, 1000);
this.clockService.fetchExchanges();
}
buttonTest(): any {
this.clockService.testingfunction();
}
}
app.module.st:
// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { TitleComponent } from './title.component';
import { MetaDescriptionComponent } from './meta-description.component';
import { NavbarComponent } from "./navbar/navbar.component";
// import { SortPipe } from "./sort.pipe";
import { ClockService } from "./clock.service";
import { ExchangeService } from "./exchange.service";
export { AppComponent, TitleComponent, MetaDescriptionComponent };
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
TitleComponent,
// SortPipe,
MetaDescriptionComponent
],
imports: [
NgbModule.forRoot(),
BrowserModule.withServerTransition({ appId: 'cli-universal-demo' }),
RouterModule.forRoot([
{ path: 'home', loadChildren: './home/home.module#HomeModule' },
{ path: 'about', loadChildren: './about/about.module#AboutModule' },
{ path: 'contact', loadChildren: './contact/contact.module#ContactModule'},
{ path: '**', redirectTo: '', pathMatch: 'full' },
])
],
providers: [ExchangeService, ClockService],
bootstrap: [AppComponent, TitleComponent, MetaDescriptionComponent]
})
export class AppModule { }