个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我正在尝试使用此链接中的 Angular Universal 通过 SSR 呈现我的 Angular 7 应用程序 https://angular.io/guide/universal .我以为我可以从那里开始一切工作，因为我能够查看页面源代码并看到呈现给页面的 app.component 内部的所有内容。但是，我无法呈现 router-outlet 标签内的任何路由
我只是简单地剥离了我的应用程序，使其完全按照文档中的说明进行操作。我在那里读到一些关于确保 ModuleMapLoaderModule 位于 app.server.module 内部以便延迟加载工作的内容。这确实是通用的 angular-cli 命令的默认设置，所以我不确定发生了什么。
app.server.module
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 找到准确的文档时，我的运气基本上为零，非常感谢任何帮助!谢谢
最佳答案
尝试添加 relativeLinkResolution: 'legacy'
@NgModule({
imports: [RouterModule.forRoot(routes, {
relativeLinkResolution: 'legacy'
})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
它对我有帮助。
关于Angular Universal 不在路由器导出内呈现内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56368564/
25
4
0
是否可以调整此代码以导出foreach循环外的所有行: 这工作正常(内部循环): $vms = Get-VM | Where { $_.State –eq ‘Running’ } | Select-
我试图将我的 bundle.js 引入我的 Node 服务器，但显然 webpack 包在顶部的所有包代码之前缺少一个 module.exports =。 我可以手动将 module.exports
我有一个 android 项目，其中包含一个库项目。在这个库项目中，我包含了许多可绘制对象和动画。 问题是，当我将主项目导出为 .apk 时，它包括所有可绘制对象和动画，甚至是主项目中未使用的对象。
我的一个 mysql 用户以这种方式耗尽了他的生产数据库: 他将所有数据导出到转储文件，然后删除所有内容，然后将数据导入回数据库。他从 Innodb 大表空间中保存了一些 Gig(我不知道他为什么这样
我正在 pimcore 中创建一个新站点。有没有办法导出/导入 pimcore 站点的完整数据，以便我可以导出 xml/csv 格式的 pimcore 数据进行必要的更改，然后将其导入回来？ 最佳答案
我有以下静态函数: static inline HandVal StdDeck_StdRules_EVAL_N( StdDeck_CardMask cards, int n
因为我更新了 angular cli 和 nestjs 版本，所以我收到了数百条警告，提示我无法找到我的自定义类型定义和接口(interface)。但是我的nestjs api仍然可以正常工作。 我正
Eclipse 的搜索结果 View 以其树状结构非常方便。有没有办法将这些结果导出为可读的文本格式或将它们保存到文件中以备后用？ 我试过使用复制和粘贴，但生成的文本格式远不可读。 最佳答案 不，我认
我想在用户在 Chrome 中打开页面时使用 WebP否则它应该是 png。 我找到了这段代码: var isChrome = !!window.chrome && !!window.chrome.w
您好，我正在尝试根据“上次登录”导出 AD 用户列表 我已经使用基本 powershell 编写了脚本，但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案，我会很感兴趣
有没有办法启用 Stockchart 的导出？我知道这对于普通图表是可行的，但对于股票图表，当尝试启用导出模式时，我得到了未定义， 我尝试过:chart.export.enabled=true;和ch
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现，看起来我应该使用 sqlldr.exe 文件来导入和导出，但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
您好，我正在尝试根据“上次登录”导出 AD 用户列表 我已经使用基本 powershell 编写了脚本，但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案，我会很感兴趣
我想生成一个 PDF，它将以表格格式显示查询集的输出，例如: query = ModelA.objects.filter(p_id=100) class ModelA(models.Model):
我有一个数据库代理，可以从 IBM Notes 数据生成 Word 文档。我正在使用 Java2Word API 来实现此目的，但不幸的是，该 API 几乎没有文档，而且我找不到任何有关表格格式(大小
我尝试将 Java 程序从 Eclipse 导出到 .jar 文件，但遇到了问题。它运行良好，但由于某种原因它没有找到它应该从中获取数据的文本文件。如果有人能帮忙解决这个问题，我将非常感激。 最佳答案
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现，看起来我应该使用 sqlldr.exe 文件来导入和导出，但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
使用LLVM / Clang编译到WebAssembly的默认代码生成将导出内存，并完全忽略表。 使用clang（--target=wasm32-unknown-unknown-wasm）定位Web组
我正在尝试在 HSQL 数据库中重新创建一个 oracle 数据库。 这是为了在本地开发人员系统上进行更好的单元测试。 我需要知道的是，是否有任何我可以在 oracle 服务器/客户端中使用的工具/命
我是一名优秀的程序员,十分优秀！