Issues with Styles approach in ngAspnetCoreEngine #424

naveedahmed1 · 2017-09-26T22:06:05Z

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.

The text was updated successfully, but these errors were encountered:

MarkPieszak · 2017-10-10T23:27:45Z

It'll be adding in the upcoming 5.0 release (as it's waiting to be merged in there, there were many updates for 5.0)

5.0 PR here:
#437

Universal aspnetcore-engine PR here:
angular/universal#825

naveedahmed1 · 2017-10-11T10:17:47Z

That's great! Any update on migrating this repo to Angular 5, since Angular 5 is now in RC.

* feat(5.0): update engine-etc for angular 5.0-rc1 WIP - More updates to come * remove ng 4 references * update source maps for faster HMR builds * use aspnetcore-engine & misc updates and fixes * update to 5.0 official Closes #434 Closes #435 Closes #430 Closes #424

…IO#437) * feat(5.0): update engine-etc for angular 5.0-rc1 WIP - More updates to come * remove ng 4 references * update source maps for faster HMR builds * use aspnetcore-engine & misc updates and fixes * update to 5.0 official Closes TrilonIO#434 Closes TrilonIO#435 Closes TrilonIO#430 Closes TrilonIO#424

MarkPieszak mentioned this issue Oct 10, 2017

feat(Angular 5.0): update engine-etc for angular 5.0 & Domino #437

Merged

MarkPieszak closed this as completed in #437 Nov 2, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issues with Styles approach in ngAspnetCoreEngine #424

Issues with Styles approach in ngAspnetCoreEngine #424

naveedahmed1 commented Sep 26, 2017 •

edited

MarkPieszak commented Oct 10, 2017

naveedahmed1 commented Oct 11, 2017

Issues with Styles approach in ngAspnetCoreEngine #424

Issues with Styles approach in ngAspnetCoreEngine #424

Comments

naveedahmed1 commented Sep 26, 2017 • edited

MarkPieszak commented Oct 10, 2017

naveedahmed1 commented Oct 11, 2017

naveedahmed1 commented Sep 26, 2017 •

edited