我试图从这个链接使用Angular Universal用SSR呈现Angular 7应用程序https://angular.io/guide/universal.我认为我已经从那里开始工作了,因为我能够查看页面源代码,并查看应用程序中的所有内容。呈现到页面的组件。但是,我无法呈现路由器出口
标记内的任何路由
我只是简单地剥离了我的应用程序,完全按照留档所说的去做。我在那里读到一些关于确保ModuleMapLoaderModule
在app.server.module内以便延迟加载工作的内容。这确实是通用的角cli命令的默认值,所以我不确定发生了什么。
应用程序。服务器单元
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule,
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
tsconfig.server.json
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "../out-tsc/app-server",
},
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}
server.ts
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import { join } from 'path';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'browser');
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, 'index.html'), { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
渲染输出
<html lang="en">
<head>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ...Rendered CSS styles... -->
<body>
<app-root _nghost-sc0="" ng-version="7.2.15">
<!-- ...Header code that has been rendered... -->
<router-outlet _ngcontent-sc0=""></router-outlet> <!-- This is where I am expecting the content of the route to be -->
<!-- ...Footer code that has been rendered... -->
</app-root>
</body>
</html>
app.routing.module.ts
// Angular Imports
// Pages
// ...Page Imports..
const routes: Routes = [
{ path: '', component: HomePageComponent, pathMatch: 'full' },
{ path: 'events/:id', component: EventDetailPageComponent }, // This is the detail page I am testing with
{ path: 'unknown-error', component: UnknownErrorPageComponent },
{ path: '404', component: NotFoundPageComponent },
{ path: '**', redirectTo: '404' }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes),
],
exports: [
RouterModule,
]
})
export class AppRoutingModule { }
我已经基本上没有运气试图找到关于Angular 7的准确文档,任何帮助都将不胜感激!谢谢
我对服务器端渲染没有任何经验,但是Angular应用部署到服务器时的一个常见问题是子目录的解析。基本上,root会加载,但是在角路由中处理的所有其他项目在通过url访问时都不会工作。Web服务器正在寻找那些物理目录,而不是允许Angular路由将页面引导到虚拟目录。如果这听起来像你的问题有一些选项概述在这里
我似乎找不到问题所在,因为我没有收到Angular的错误。 我试图在主路由器出口内设置一个路由器出口来显示一个组件。我正确选择了路由器,但它没有显示我在第二个插座中选择的组件。 app-routing.module.ts dashboard-routing.module.ts dashboard.component.html 路由器链路被正确选择并显示活动类以及链路: http://localho
我有一个名为Dashboard的父组件,它被呈现为路由,如下所示: 我试着嘲笑每个人在嵌套路由上的解决方案,但我似乎无法解决我的问题。
react&React-Router的新功能。我正在使用react-router-4 我有以下组件-login-home-header-sidebar-content 登录组件没有标题或侧栏。 这就是我的路由 应用程序JS 然后在我的Home组件中,我有侧边栏和内容。 home.js呈现方法 侧边栏组件有一个链接,该链接具有“to”值“/home/dashboard”。 不幸的是,这并不奏效。单击
我正在使用react、Redux和react Router开发一个react web应用程序,带有服务器端呈现(使用express) 我面临的问题有点难以解释。我将试着在下面的步骤中进行解释。 > 您首先从http://www.example.com/articles/1234这样的URL进入应用程序。express服务器将发送正确的内容,其中包括正确的页面源和DOM(来自chrome Eleme
我试图在我的reactjs应用程序中使用react路由器。而我遇到了这个问题: 然而: > 当我单击“LinkTest”组件内的链接(前面已经呈现)时,浏览器上的url显示为“http://localhost:3000/home/test”,但没有任何变化。 当我单击“home”组件内的链接时(它与使用相同链接的“linktest”同时呈现),它在浏览器上显示了相同的url:“http://loc
我是React Router的新手,我正试图通过一条路径将一些道具从我的父组件传递给子组件。 这是我的代码: 理想情况下,我希望能够从子组件触发。在做了一些研究后,我认为传递一个选项而不是会传递它,但是它不会。知道如何将函数传递到路由组件中吗?