Description
I am using Angular 4.4.3, and angular/material 2.0.0-beta.11 and ngAspnetCoreEngine form this repository in one of my projects. There is a slight difference the way I am setting title and canonical tags in my app. Since majority of the pages in my case are dynamic and both title and canonical tags are dynamic as well. Therefore instead of setting title and links from App component on (router change subscription) I set title and links from the component corresponding to the page. For title I am using Title service from Angular and for Links I am using Links server from this repo.
Today when I inspected the generated markup of few pages of my app. I found duplicate title and canonical tags.
I did some research and found that the issue is due to the way ngAspnetCoreEngine fetches the styles:
let STYLES_STRING: string = htmlDoc.indexOf('<style ng-transition') > -1
? htmlDoc.substring(
htmlDoc.indexOf('<style ng-transition'),
htmlDoc.lastIndexOf('</style>') + 8)
: null;
Since I am using Material it appends several style tags to the Head element, each tag containing styles related to specific component or group of components. Now when I add Title from my component its not always the first element after <head> tag. Sometimes its after few styles tags, followed by few other style tags.
Although using the above approach, selects all style tags but it also select the title and meta tags if they fall in between style tags. As a result the final markup which is sent from the server to the browser contains multiple Title tags. One form globals.title and other from the globals.styles.
There is some code in ngAspnetCoreEngine, but its commented
// Broken after 4.0 (worked in rc)
// if (element.name === 'style') {
// let styleTag = '<style ';
// for (let key in element.attribs) {
// if (key) {
// styleTag += `${key}="${element.attribs[key]}">`;
// }
// }
// styleTag += `${element.children[0].data}</style>`;
// STYLES.push(styleTag);
// }
I uncommented the above code in ngAspnetCoreEngine and updated the resolve statement to the following:
resolve({
html: APP_HTML,
globals: {
styles: STYLES.join(' '),
title: TITLE,
scripts: SCRIPTS.join(' '),
meta: META.join(' '),
links: LINKS.join(' ')
}
});
And it started working perfectly.
Based on above, I think the styles approach in current ngAspnetCoreEngine requires an update. There is a comment in above code which says // Broken after 4.0 (worked in rc) I am not sure what exactly is broken, its working perfectly fine with Angular 4.4.3.