0
私はユニバーサルを働かせようとしています。私のプロジェクトはthis seedに基づいています。しかし、私が "npm run start"を実行すると、my/aboutと/ contactだけがレンダリングされます。/homeはレンダリングされません。要求が "キャンセルされました"というステータスを返します（開発ツールの - > Networkタブ）。これは完全なrepo (note that it is the "@ng-bootstrap" branch)です。もし誰かがそれを見ることができたら、私はとても感謝しています。エラーメッセージがない場合、バグを見つけることは困難です。角4ユニバーサル、私のルートの1つがロードされていません
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 { }
家庭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 { }