标题标签和元标签未显示为延迟加载模块的角度为4的服务器端渲染

时间:2018-08-28 15:04:08

标签: angular tags title meta-tags serverside-rendering

在我的应用的先前版本中,所有组件和模块均已声明,并声明了在其中导入的路由

app.module.ts

declarations: [
  AppComponent,
  NavbarComponent
  FooterComponent,
  HomeComponent,
  NotFoundComponent
  ....
],
imports: [
  BrowserModule.withServerTransition({appId: 'my-app'}),
  ServerStateTransferModule.forRoot(),
  RouterModule.forRoot([
   {
    path: 'home',
    component: HomeComponent
   },
   {
    path: 'other',
    component: OtherComponents
   },
   ....
  ])
  ....
]

但是在新版本的app中,我使用的是LazyLoadModule,我的意思是将所有模块与app.module.ts分开,并将其他模块用于页面(例如在modules.ts中导入的home.module.ts和HomeModule)。 (以下说明)

app.module.ts

declarations: [
  AppComponent
],
imports: [
  NavbarModule,
  FooterModule,
  BrowserModule.withServerTransition({appId: 'my-app'}),
  ServerStateTransferModule.forRoot(),
  RouterModule.forRoot([
   {
     path        : '',
     loadChildren: 'app/modules#Modules'
   },
   {
     path      : '**',
     redirectTo: '/404'
   }
  ], {
   useHash: false
  })
]

在modules.ts中,我导入了任何页面模块

module.ts

@NgModule({
  imports: [
    HomeModule,
    NotFoundModule,
    SearchModule,
    ....
  ]
})
export class Modules {
}

app.server.module.ts,此文件由https://angular.io/guide/universal

写入网站

app.server.module.ts

imports  : [
 AppModule,
 ServerModule,
 ModuleMapLoaderModule
],

例如在home.component.ts中,我设置标题:

home.component.ts

@Component({
  selector   : 'app-home',
  templateUrl: './home.component.html',
  styleUrls  : [ './home.component.css' ]
})

export class HomeComponent implement OnInit {

  constructor (private title: Title){
    this.setPageHeader();
  }

  ngOnInit() {}

  setPageHeader () {
   this.meta.addTags([
    {
      name   : 'title',
      content: this.homeService.homepage_title
    },
    {
      name   : 'keywords',
      content: this.homeService.homepage_keywords
    },
    {
      name   : 'description',
      content: this.homeService.homepage_description
    }
   ]);
   this.title.setTitle(this.homeService.homepage_title);
  }
}

此版本已成功编译,但问题是在源代码视图中未显示标题标签和met标签

该问题的解决方案是什么?

0 个答案:

没有答案