When attempting to change the page title using BrowserModule, I encountered an issue. I added the BrowserModule and Title in the application module as shown here: https://angular.io/guide/set-document-title
However, in a child module where I tried to add the service and module (BrowserModule) as well, I faced a problem with the Title service being 'undefined'.
Here is the code for the module:
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";
import { ProductService } from "../../services/Product";
import { ProductComponent } from "../../components/product/component";
import { ProductResolve } from "../../components/product/resolve";
const routes: Routes =
[
{
path: "produs/:url",
component: ProductComponent,
resolve:
{
Product: ProductResolve,
},
},
];
@NgModule({
imports:
[
CommonModule,
RouterModule.forChild(routes),
],
providers:
[
ProductResolve,
ProductService,
],
declarations:
[
ProductComponent,
],
exports:
[
RouterModule,
ProductComponent,
],
})
export class ProductModule { }
And here is the code for the component:
import { Component, OnInit, OnDestroy } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Product } from "../../services/Product";
import { Title } from '@angular/platform-browser';
@Component({
templateUrl: "../../templates/product/component.html",
styleUrls: [
"../../sass/product/component.scss",
]
})
export class ProductComponent implements OnInit, OnDestroy
{
private Subscribe: any;
constructor(private titleService: Title, private Route: ActivatedRoute)
{
}
ngOnInit()
{
this.Subscribe = this.Route.data.subscribe(this.process);
}
private process(product: Product)
{
//console.log(this.title);
//this.titleService.setTitle(product.Title);
}
ngOnDestroy()
{
this.Subscribe.unsubscribe();
}
}
Finally, here is the app module code snippet:
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
@NgModule({
declarations: [
...
],
imports: [
...
BrowserModule,
],
providers: [LoadingScreenService, Title],
bootstrap: [AppComponent],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }