Angular Universal

01.ts

import * as gulp from 'gulp';
import {gulpPrerender} from '@angular/universal';
import {App} from './app';

gulp.task("prerender", () => {
    return gulp.src(['index.html'])
        .pipe(gulpPrerender({
            directives: [App]
        }));
});

02.txt

aws s3 cp prerendered/*.html  s3://your-amazon-s3-bucket/your-site --recursive 
    --expires 2100-01-01T00:00:00Z --acl public-read 
    --cache-control max-age=2592000,public --content-encoding gzip

03.ts

import {createEngine} from 'angular2-express-engine';
import { UniversalModule } from 'angular2-universal';

app.engine('.html', createEngine({}));
app.set('views', __dirname);
app.set('view engine', 'html');

@NgModule({
    bootstrap: [ App ],
    declarations: [ App, ... ],
    imports: [
        UniversalModule, // NodeModule, NodeHttpModule, and NodeJsonpModule are included
        ...
    ],
    providers: [...],

})
export class MainModule {

}

function ngApp(req, res) {
    let baseUrl = '/';
    let url = req.originalUrl || '/';

    let config = {
        req,
        res,
        requestUrl: url,
        baseUrl,
        ngModule: MainModule,
        preboot: false,
        originUrl: ROOT_URL
    };

    console.log("rendering ...");

    res.render('index', config, (err, html) => {
        res.status(200).send(html);
    });

}

04.ts

export interface AuthenticationService {

    signUp(activationLink:boolean);
    login();
    logout();
    isLoggedIn();
    isLoggedInWithGitHub();

}

05.ts

export class ServerAuthenticationService implements AuthenticationService {

    constructor(private authenticationId, private isUserLoggedIn:boolean) {
        
    }

    signUp() {
        throw new Error("Signup event cannot be called while doing server side rendering");
    }
    

    login() {
        throw new Error("Login event cannot be called while doing server side rendering");
    }

    logout() {
        throw new Error("Logout event cannot be called while doing server side rendering");
    }
    
    isLoggedIn() {
        return this.isUserLoggedIn;
    }

    isLoggedInWithGitHub() {
        ...
    }
}

06.ts

@Injectable()
export class ClientAuthenticationService implements AuthenticationService {

    signUp(activationLink = false) {
        this.messagesService.clearAll();
        const lock = new Auth0Lock(AUTH0_API_KEY, AUTH0_SUB_DOMAIN);

        lock.showSignup(this.loginConfig(activationLink), this.loginCallback());
    }
    ....

}

07.ts

// define an injection name
export const authenticationService = new OpaqueToken("authenticationService");

// inject on the server
provide(authenticationService, {
    useFactory: () => new ServerAuthenticationService(req.authenticationId,isLoggedIn)
})
            
// inject on the client
provide(authenticationService, {
useFactory: (messagesService: MessagesService, ngZone: NgZone, cookieService: CookieService, userService: UserService, router:Router, gitHubService : GitHubService) => { 
    return new ClientAuthenticationService(messagesService, ngZone, cookieService, userService, router, gitHubService);
    },
  deps: [MessagesService, NgZone, CookieService, UserService, Router, GitHubService]
  })])