Question

由于某些原因，我想使用https://github.com/angular/universal-starter而不是服务器端渲染来创建我的angular 5项目的prerender构建。

我的路线有4个级别：

example.com/category/:id/subcategory/:id/event/:id/ticket/:id

此外，还有一个休息api后端，我用它来获取每个部分的数据。例如，/ category / 1是sport，/ category / 1 / subcategory / 1是football等。

第一个问题：如何使用prerender.js创建每个级别的html文件？我的static.paths.ts应该如何？

第二个问题：如何为每个页面设置元标记？

第三个问题：我的app-routing.module应该怎么样？我应该使用children方法吗？

我正在使用Angular 5.0.0和ngx-restangular 2.0.2

谢谢。

Answer 1

预渲染和运行时服务器端渲染的设置大致相似，唯一的区别是一个是静态的，另一个是动态的。您仍将配置Universal要求您设置的所有内容。

在我提出问题之前，我强烈建议您按照this（逐步配置）和this（有关Angular Universal陷阱的有用部分）指南来配置Angular Universal，因为它是我读过的更全面，最新的写作之一。

第一个问题：如何使用prerender.js为每个级别创建一个html文件？我的static.paths.ts应该如何？

您的static.path.ts应包含您要预呈现的所有路由：

export const ROUTES = [
  '/',
  '/category/1/subcategory/1/event/1/ticket/1',
  '/category/1/subcategory/1/event/1/ticket/2',
  ...
];

看起来很乏味吗？这是使用静态生成的HTML而不是灵活的运行时服务器端呈现的权衡。您可以并且可能应该编写自己的脚本来生成应用程序可用的所有路径（查询数据库，生成所有可能的值等）以预呈现所需的所有页面。

第二个问题：如何为每个页面设置元标记？

与您设置元标记或任何Angular应用的方式没有什么不同，您可以使用Angular提供的Title和Meta服务。

示例：

constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private meta: Meta,
    private title: Title,
    private pageMetaService: PageMetaService
) { }

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        this.title.setTitle((`${this.article.title} - Tilt Report`));

        let metadata = [
            { name: 'title', content: 'Title' },
            { name: 'description', content: 'This is my description' },
            { property: 'og:title', content: 'og:Title' },
            { property: 'og:description', content: 'og:Description' },
            { property: 'og:url', content: 'http://www.example.com' },
        ];
        metadata.forEach((tag) => { this.meta.updateTag(tag) });
    };
}

第三个问题：我的app-routing.module应该如何？我应该使用儿童方法

您可以选择是否使用'children'方法，我认为这是延迟加载模块。在配置Angular Universal时，您应该进行某些设置以使延迟加载的模块在服务器端工作。

具有4级嵌套参数的角度通用启动器预渲染

1 个答案: