Question

我正在努力让环球公司工作，我想我已经走得很远了。我的项目基于this seed。但是，当我“npm run start”时，只有my / about和/ contact呈现。 / home不呈现。请求最终返回“已取消”状态（在开发工具 - >网络标签中）。这是完整的回购(note that it is the "@ng-bootstrap" branch)。如果有人可以看一下，我将非常感激。没有错误消息时很难找到错误。

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 { }

Answer 1

我相信您的路径与组件路径不匹配。

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' },
])

应该是

RouterModule.forRoot([
 { path: '', loadChildren: './home/home.module#HomeModule' },
 { path: 'about', loadChildren: './about/about.module#AboutModule' },
 { path: 'contact', loadChildren: './contact/contact.module#ContactModule'},
 { path: '**', redirectTo: '', pathMatch: 'full' },
 ])

这是因为你的组件NgModule的路径匹配到＆＃39;＆＃39;而不是＆＃39; home＆＃39;

RouterModule.forChild([
  { path: '', component: HomePageComponent, pathMatch: 'full' }
])

请参阅cli-universal demo home.module.ts app.module.ts

中的这两个文件

Angular 4 Universal，我的其中一条路线没有加载

1 个答案: