[英]Angular Server-Side Rendering with Route Resolve
我试图在Angular(v4)中使用服务器端渲染,以实现更好的SEO。
事情一直按预期进行,直到我在路线上添加resolve
为止。 添加resolve
导致HTML title
在查看源代码时保留其初始值。
我的模块:
import {
Injectable,
ModuleWithProviders,
NgModule
} from '@angular/core';
import {
ActivatedRouteSnapshot,
Resolve,
Router,
RouterModule,
RouterStateSnapshot
} from '@angular/router';
import {
Observable
} from 'rxjs/Rx';
import {
ArticleComponent
} from './article.component';
import {
Article,
ArticlesService,
UserService,
SharedModule
} from '../shared';
@Injectable()
export class ArticleResolver implements Resolve < Article > {
constructor(
private articlesService: ArticlesService,
private router: Router,
private userService: UserService
) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): any {
return this.articlesService.get(route.params['slug'])
.catch((err) => this.router.navigateByUrl('/'));
}
}
const articleRouting: ModuleWithProviders = RouterModule.forChild([{
path: 'article/:slug',
component: ArticleComponent,
resolve: {
article: ArticleResolver
},
data: {
preload: true
}
}]);
@NgModule({
imports: [
articleRouting,
SharedModule
],
declarations: [
ArticleComponent
],
providers: [
ArticleResolver
]
}) export class ArticleModule {}
我的组件:
import {
Component,
OnInit
} from '@angular/core';
import {
ActivatedRoute,
Router,
} from '@angular/router';
import {
Title,
Meta
} from '@angular/platform-browser';
import {
AppComponent
} from '../app.component';
import {
Article,
} from '../shared';
@Component({
selector: 'article-page',
templateUrl: './article.component.html'
})
export class ArticleComponent implements OnInit {
article: Article;
constructor(
private route: ActivatedRoute,
private meta: Meta,
private title: Title
) {}
ngOnInit() {
this.route.data.subscribe(
(data: {
article: Article
}) => {
this.article = data.article;
}
);
this.title.setTitle(this.article.title);
}
}
我是Angular SSR的新手,因此非常感谢任何指导。
无需订阅路由数据,而是从快照中检索结果,如下所示:
this.route.snapshot.data['article']
您可能还需要在模块的providers
注册ArticlesService
。
作为附带说明,此导入:
import {
Observable
} from 'rxjs/Rx';
是RxJS反模式。 请改用以下导入:
import {Observable} from 'rxjs/Observable';
我发现我的主要服务引用了一个辅助服务,该服务试图从window.localStorage
返回身份验证令牌。
尝试访问客户端存储导致Angular SSR省略了我组件的源代码生成。
感谢@Adam_P帮助我完成它!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.