Last active
May 5, 2017 15:24
-
-
Save PatrickJS/53bd3e974af3d9c60db80aa0f6a9e8c3 to your computer and use it in GitHub Desktop.
How to build your own Angular Universal integrations for Angular 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>index as a string</title> | |
| </head> | |
| <body> | |
| <app> | |
| Loading... | |
| </app> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // make sure the dev includes you include polyfills before any node code | |
| import * as fs from 'fs'; | |
| import {Bootloader} from 'angular2-universal'; | |
| // plugin | |
| export function yourPluginConfig(indexFilePath: string, platformConfig: any) { | |
| // template is the full document as a string | |
| const indexTemplate = fs.readFileSync(indexFilePath); // provide a better way to get ahold of the index.html | |
| const bootloader = new Bootloader(platformConfig); // maintain your platform instance | |
| return function buildYourIndex(config: any): Promise<string> { | |
| return bootloader.serializeApplication({ | |
| template: indexTemplate, // or provide template in config.template | |
| directives: config.directives, | |
| providers: config.providers | |
| }) | |
| .then(html => { | |
| console.log(html); | |
| return html; | |
| }); | |
| } | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {APP_BASE_HREF} from '@angular/common'; | |
| import {ORIGIN_URL, REQUEST_URL} from 'angular2-universal'; | |
| import {AppComponent} from './universal/app'; | |
| export const platformConfig = { | |
| platformProviders: [ | |
| provide(ORIGIN_URL, { | |
| useValue: 'http://localhost:300' // full urls are needed for node xhr | |
| }) | |
| provide(APP_BASE_HREF, {useValue: '/'}), | |
| ], | |
| async: true, | |
| preboot: false | |
| } | |
| export const config = { | |
| directives: [ | |
| // The component that will become the main App Shell | |
| AppComponent | |
| ], | |
| providers: [ | |
| // What URL should Angular be treating the app as if navigating | |
| provide(REQUEST_URL, {useValue: '/'}) | |
| ] | |
| } | |
| // render your index.html | |
| const buildYourIndex = yourPlugin(platformConfig); | |
| buildYourIndex(config) | |
| .then(html => console.log('done rendering'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment