Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

universal-starter

Angular 2 Universal starter kit by @AngularClass

Subscribe to updates I use universal-starter


Statistics on universal-starter

Number of watchers on Github 1657
Number of open issues 26
Average time to close an issue 7 days
Main language TypeScript
Average time to merge a PR 1 day
Open pull requests 28+
Closed pull requests 27+
Last commit almost 2 years ago
Repo Created over 4 years ago
Repo Last Updated almost 2 years ago
Size 690 KB
Organization / Authorangular
Latest Releasev1.0.1
Contributors6
Page Updated
Do you use universal-starter? Leave a review!
View open issues (26)
View universal-starter activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating universal-starter for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Universal Angular

Angular Universal Starter Universal Angular

Server-Side Rendering for Angular

A minimal Angular starter for Universal JavaScript using TypeScript and Webpack

If you're looking for the Angular Universal repo go to angular/universal

Deploy

Getting Started

This demo is built following the Angular-CLI Wiki guide

We're utilizing packages from the Angular Universal @nguniversal repo, such as ng-module-map-ngfactory-loader to enable Lazy Loading.


Build Time Prerender(prerender) Vs. Server Side Rendering(ssr)

This repo demonstrates the use of 2 different forms of Server Side Rendering.

Prerender(prerender)

  • Happens at build time
  • Renders your application and replaces the dist index.html with a version rendered at the route /.

Server-Side Rendering(ssr)

  • Happens at runtime
  • Uses ngExpressEngine to render your application on the fly at the requested url.

Installation

  • npm install or yarn

Development (Client-side only rendering)

  • run npm run start which will start ng serve

Production (also for testing SSR/Pre-rendering locally)

npm run build:ssr && npm run serve:ssr - Compiles your application and spins up a Node Express to serve your Universal application on http://localhost:4000.

npm run build:prerender && npm run serve:prerender - Compiles your application and prerenders your applications files, spinning up a demo http-server so you can view it on http://localhost:8080 Note: To deploy your static site to a static hosting platform you will have to deploy the dist/browser folder, rather than the usual dist

Universal Gotchas

When building Universal components in Angular there are a few things to keep in mind.

  • For the server bundle you may need to include your 3rd party module into nodeExternals whitelist

  • window, document, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work. You do have some options, if you truly need some of this functionality:

    • If you need to use them, consider limiting them to only your client and wrapping them situationally. You can use the Object injected using the PLATFORM_ID token to check whether the current platform is browser or server.
     import { PLATFORM_ID } from '@angular/core';
     import { isPlatformBrowser, isPlatformServer } from '@angular/common';
    
     constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }
    
     ngOnInit() {
       if (isPlatformBrowser(this.platformId)) {
          // Client only code.
          ...
       }
       if (isPlatformServer(this.platformId)) {
         // Server only code.
         ...
       }
     }
    
    • Try to limit or avoid using setTimeout. It will slow down the server-side rendering process. Make sure to remove them ngOnDestroy in Components.
      • Also for RxJs timeouts, make sure to cancel their stream on success, for they can slow down rendering as well.
  • Don't manipulate the nativeElement directly. Use the Renderer2 from @angular/core. We do this to ensure that in any environment we're able to change our view.

    constructor(element: ElementRef, renderer: Renderer2) {
    this.renderer.setStyle(element.nativeElement, 'font-size', 'x-large');
    }
    
  • The application runs XHR requests on the server & once again on the Client-side (when the application bootstraps)

    • Use a cache that's transferred from server to client (TODO: Point to the example)
  • Know the difference between attributes and properties in relation to the DOM.

  • Keep your directives stateless as much as possible. For stateful directives, you may need to provide an attribute that reflects the corresponding property with an initial string value such as url in img tag. For our native element the src attribute is reflected as the src property of the element type HTMLImageElement.

License

MIT License

universal-starter open issues Ask a question     (View All Issues)
  • over 3 years UniversalCache link broken
  • over 3 years fix server.ts to Not stop server when 404'ing
  • over 3 years Ignoring node_modules from webpack bundle
  • over 3 years Uncaught ReferenceError: Buffer is not defined
  • over 3 years Angular Universal and Webpack Multi Entry Points
  • over 3 years Webpack proxy
  • over 3 years How to deal with "SCRIPT5022: Error: No provider for PlatformRef!" on the IE that version < 11
  • over 3 years Newest version couldn't prerendering html?
  • over 3 years Pug/Jade view engine
  • over 3 years Self not defined in polyfill
  • over 3 years No provider for title.
  • over 3 years Considering becoming an Angular CLI template or using @ngtools/webpack
  • over 3 years Running app in production.
  • over 3 years update build to include AoT build
  • over 3 years How to run in production
  • over 3 years Can't use templateURL for components
  • over 3 years support webpack config for minification
  • over 3 years Material 2 patch needs to be updated for alpha-9
  • over 3 years support for lazy routes ?
  • over 3 years Parse5DomAdapter has no implementation for getCookie
  • over 3 years How to load only the selected language json file
  • over 3 years Support for file loader (loading html through file loader)
  • over 3 years npm start should watch client and server
universal-starter open pull requests (View All Pulls)
  • Update typings.json
  • Update typings.json
  • chore(webpack-prerender): add webpack support for prerendering
  • chore(.gitignore): ignore webstorm project files
  • Webpack settings: ability to use external templates and scss, prod task
  • chore(package): Update dependencies
  • chore(vscode): Add VSCode Launch.json file
  • chore(deps): update to webpack 2.1.0-beta.20 and typescript 2.0.0
  • Systemjs
  • Should use env.PORT like in server.
  • Lazy load routes
  • Fix typo in README.md (stylesUrl instead of styleUrls)
  • Move template as well as styling into separate files
  • chore: 2.1.1 workaround
  • Add web animation polyfills for animations to work in Safari
  • SASS support
  • backend/api.ts => arrow func
  • fix image rendering
  • refactor(structure): clean up structure & organize
  • feat(aot): upgrade to 2.4.7 and keep aot
  • clean code
  • remove template and renderModuleFactory, is not used
  • feat(lint): add linting to universal starter
  • feat(http): add transfer cache module from nguniversal/common
  • feat(transfer-state): add an interceptor & a service to cache HTTP requests
  • Test infrastructure and SSR Compression Added
  • Fix small README typo
  • refactor: remove unused template
universal-starter list of languages used
universal-starter latest release notes
v1.0.1 Angular 2.0.0-alpha.45

starter

  • feat: universal directive
  • chore: update angular,universal

universal

  • fix: router-outlet
  • fix: src property as attribute
Other projects in TypeScript