Aspnetcore-angular-universal: Showcase Angular Title service

[MarkPieszak]

Show how we can automatically update it through data within a Route.

Updated Root App Component, subscribing to NavigationEnd event and changing Title through MetaService when route finishes changing.

Currently only works in Browser, as we're not supplying the entire Html document. We'll have to look into fixing this later.

import { Component, ViewEncapsulation, Inject, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { Subscription } from 'rxjs/Subscription';
import { isBrowser } from 'angular2-universal';
import { Meta } from 'app-shared';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/filter';

@Component({
    selector: 'app-root',
    template: `
        <div class="container-fluid">
            <app-nav-menu></app-nav-menu>
            <router-outlet></router-outlet>
        </div>
    `,
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit, OnDestroy {

    private defaultPageTitle: string = 'Angular Universal & ASP.NET Core Starter';
    private sub: Subscription;

    constructor(
        public router: Router,
        public activatedRoute: ActivatedRoute,
        public meta: Meta
    ) {}

    ngOnInit() {
        // Change "Title" on every navigationEnd event
        // Titles come from the data.title property on all Routes (see app.routes.ts)
        this.changeTitleOnNavigation();
    }

    ngOnDestroy() {
        // Subscription clean-up
        this.sub.unsubscribe();
    }

    private changeTitleOnNavigation () {
        this.sub = this.router.events
            .filter(event => event instanceof NavigationEnd)
            .map(() => this.activatedRoute)
            .map(route => {
                while (route.firstChild) route = route.firstChild;
                return route;
            })
            .filter(route => route.outlet === 'primary')
            .mergeMap(route => route.data)
            .subscribe((event) => {

                // Set Title if available, otherwise leave the default Title
                const title = event['title'] 
                    ? (event['title'] + ' - ' + this.defaultPageTitle)
                    : this.defaultPageTitle;

                // Temporarily only do this in the Browser
                // Until we can get entire Html doc (this is a .NET issue since we never pass the entire Document (only root-app))
                return isBrowser ? this.meta.setTitle(event['title']) : '';
            });
    }

}

[CDuane]

Hi, the title doesn't seem to be changing when switching pages from the nav menu. I tested on the latest commit (93d54b2647879380960f77c15d9725b64cf86d5a).

I am saying this because I thought this was fixed, or did I think wrongly?
Thanks.

[MarkPieszak]

Do you have JS disabled?
Or is it happening client-side when normally going around the App in the browser?

Only ask about JS being disabled because the server changing the Title isn't working just yet, but hopefully very soon! Working with Steve to see if the Prerender tag can somehow pass things to a ViewData so we can set Title/meta that way (since we made .NET have all the control over the .

Anyway let me know! I pulled down a fresh copy, seems to be working client-side at least though.

[AbrarJahin]

I am finding this feature working :)

No problem with this 🥇

[CDuane]

My JS is enabled and it is happening client-side when normally going around the app in the browser.
I pulled down a fresh copy, I used NodeJS 6.9.4 and .NET Core 1.1.
I expect the title in the browser tab to change, but it does not.
I even tried it on another computer.
I am new to this so I might be doing something wrong.
Thanks.

[MarkPieszak]

Are you still seeing this issue with the Latest? @CDuane
What browser are you using by the way?

[CDuane]

I use Chrome.

I've got an error now, let me first tell you what I did.

1. Cloned the repo
2. cd into the directory
3. npm install
4. dotnet restore
5. dotnet run

When I visit localhost:5000, it crashes with this error
Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0] An unhandled exception has occurred: Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module 'C:\Users\duane\Desktop\coreng\Client\dist\main-server' at Function.Module._resolveFilename (module.js:470:15) at Function.Module._load (module.js:418:25) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at findBootModule (C:\Users\duane\AppData\Local\Temp\tmpC6A7.tmp:111:17) at findRenderToStringFunc (C:\Users\duane\AppData\Local\Temp\tmpC6A7.tmp:116:28) at renderToStringImpl (C:\Users\duane\AppData\Local\Temp\tmpC6A7.tmp:75:51) at C:\Users\duane\AppData\Local\Temp\tmpC6B8.tmp:113:19 at IncomingMessage.<anonymous> (C:\Users\duane\AppData\Local\Temp\tmpC6B8.tmp:132:38) at emitNone (events.js:86:13)

[MarkPieszak]

@CDuane That's my fault! Apologies.

I'm pushing up the fix now, but basically to get past it, just run npm run webpack in the command line (from the root directory) then run your project, and you'll be all set.

I added a build step in postinstall to run both webpack:vendor & then run the regular webpack build, which will fix this for new installs :)

Thanks for pointing that one out!!

[CDuane]

I'm happy to tell you that everything is working now.
The application runs, thanks to your fix, and the title changes when routing.
Thanks for your work.

[MarkPieszak]

Glad to hear it :+1:
More updates to come!

[engaymankassas]

Hi ,
are we able in insert meta data in server side ?
Thanks

[MarkPieszak]

Not yet but soon there will be updates to the repo for Angular 4.0 and Meta will all be set :) @Aymankassas

[engaymankassas]

Thank you ,
But i would to ask if we can run our code on server , why we can not insert meta by meta.service or insert it to head to html on server then send all html with meta to client

[AbrarJahin]

Hi @MarkPieszak , I think it is an important issue, but this issue-

https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/87

is more important.

What do you think?

[MarkPieszak]

It can be done, but it takes handling collecting all of the needed data manually during the server render and manually pulling it out from the serialized result, passing it back to .NET in the Controller, and then rendering things manually through ViewData[] as opposed to the TagHelper. (You can see what part of what it's going to look like very soon when I rollout the ng4.0 here).

Since we're using MVC (and it has control over the View and Html), we only pass Angular the <app> as opposed to the entire <html> doc. This is why it's a little trickier! I'll try to get it in there asap, give me a week or so! @Aymankassas