Question

所以我有一个应用程序，它有两个页面，现在当我查看主页源代码时，我看到了页眉代码，页脚代码，但没有正文代码。现在，正文代码保存在{{1 }}，但是当我查看第二页<router-outlet></router-outlet>时，会在视图源中看到正确的代码。我不确定为什么它不能在我的主页上工作？

我的应用容器的结构如下

terms-and-conditions

我的路线是这样设置的。

<div class="loading"></div>
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

我的server.ts是

import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';

// Components
import { HomeComponent } from './home/home.component';
import { TcComponent } from './tc/tc.component';

const routes: Routes = [
    {
        path: '',
        component: HomeComponent,
        pathMatch: 'full'
    },
    {
        path: 'terms-and-conditions',
        component: TcComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

我不确定导致此问题的原因，因此，如果您需要更多信息，请告诉我

编辑

我试图将路由配置更改为这样

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
const path = require('path');

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// SSL Redirect
const sslRedirect = require('heroku-ssl-redirect');
// Compression
const compression = require('compression');
// Express server
const app = express();

const PORT = process.env.PORT || 8080;
const DIST_FOLDER = join(process.cwd(), 'dist');
const APP_NAME = 'browser';

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = 
require('./dist/server/main');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.use(sslRedirect());
app.use(compression());

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, APP_NAME));

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, APP_NAME), {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

app.route('/sitemap.xml')
  .get((req, res) => {
    res.sendFile(path.resolve(path.join(__dirname, '/sitemap.xml')));
  });

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

但这仍然没有改变

编辑

home.component.ts

{
   path: '',
   redirectTo: '/home',
   pathMatch: 'full'
},
{
   path: 'home',
   component: HomeComponent
}
...

}

谢谢！

Answer 1

尝试此配置：

 {
    path: 'home',
    component: HomeComponent
  },
  { path: '', //empty route
    redirectTo: '/home',
    pathMatch: 'full'
  },

Angular 6 Universal Application代码未在视图源中显示

1 个答案: