{"id":15831506,"url":"https://github.com/markpieszak/universal-es6-starter","last_synced_at":"2025-03-15T06:32:34.913Z","repository":{"id":66200160,"uuid":"81977502","full_name":"MarkPieszak/universal-es6-starter","owner":"MarkPieszak","description":"[Deprecated] Angular 2+ ES6 Universal Webpack Babel starter","archived":false,"fork":false,"pushed_at":"2017-02-16T19:27:26.000Z","size":59,"stargazers_count":5,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-12T12:24:29.165Z","etag":null,"topics":["angular","angular2","babel","es6","universal","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarkPieszak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-14T18:43:33.000Z","updated_at":"2017-12-07T00:05:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"c879c6bb-3c9d-4acb-bf8c-7d4fc5fbbf70","html_url":"https://github.com/MarkPieszak/universal-es6-starter","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"a0f7f6cf7fc0900cbb09d38a67edbe5097b0c7c4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarkPieszak%2Funiversal-es6-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarkPieszak%2Funiversal-es6-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarkPieszak%2Funiversal-es6-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarkPieszak%2Funiversal-es6-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarkPieszak","download_url":"https://codeload.github.com/MarkPieszak/universal-es6-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243695454,"owners_count":20332622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","babel","es6","universal","webpack"],"created_at":"2024-10-05T12:03:48.149Z","updated_at":"2025-03-15T06:32:34.897Z","avatar_url":"https://github.com/MarkPieszak.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n\n    \u003cimg src=\"https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png\" alt=\"Universal Angular 2 ES6\" height=\"320\"/\u003e\n\n\u003c/p\u003e\n\n# Angular 2+ [ES6-Babel] Universal Starter [![Universal Angular 2](https://img.shields.io/badge/universal-angular2-brightgreen.svg?style=flat)](https://github.com/angular/universal)\n\u003e Server-Side Rendering for Angular 2+ in **ES6** (using Babel)\n\nA minimal Angular 2+ starter for Universal JavaScript using ES6/Babel and Webpack 2\n\n\u003e **Recommend** : If you're looking for Universal Starter written in TypeScript go to [angular/universal-starter](https://github.com/angular/universal-starter)\n\u003e If you're looking for the Angular Universal repo go to [**angular/universal**](https://github.com/angular/universal)  \n\n---\n\n## What's the difference between TypeScript and ES6 or even ES5 when writing Angular v2+?\n### [Read here for more information](https://angular.io/docs/ts/latest/cookbook/ts-to-js.html)\n\n---\n\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)\n\n\n## Installation\n\n* `npm install`\n\n## Serve\n\n* `npm start` to build your client app and start a web server\n* `npm run build` to prepare a distributable bundle\n\n## Development\n* run `npm start` and `npm run watch` in two separate terminals to build your client app, start a web server, and allow file changes to update in realtime\n\n## Watch files\n* `npm run watch` to build your client app and start a web server\n\n## AoT and Prod\n* `npm run build:prod:ngc` to compile the ngfactory files and build prod\n\n---\n\n# Universal \"Gotchas\"\n\n\u003e When building Universal components in Angular 2 there are a few things to keep in mind.\n\n - **`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:\n    - If you need to use them, consider limiting them to only your main.client and wrapping them situationally with the imported *isBrowser / isNode* features from Universal.  `import { isBrowser, isNode } from 'angular2-universal'`;\n    - Another option is using `DOM` from [\"@angular/platform-browser\"](https://github.com/angular/angular/blob/e3687706c71beb7c9dbdae1bbb5fbbcea588c476/modules/%40angular/platform-browser/src/dom/dom_adapter.ts#L34)\n - **Don't manipulate the nativeElement directly**. Use the _Renderer_. We do this to ensure that in any environment we're able to change our view.\n - To use `templateUrl` or `styleUrls` you must use **`angular2-template-loader`** in your TS loaders.\n    - This is already setup within this starter repo. Look at the webpack.config file [here](https://github.com/angular/universal-starter/blob/master/webpack.config.ts) for details \u0026 implementation.\n - Try to *limit or* **avoid** using **`setTimeout`**. It will slow down the server-side rendering process. Make sure to remove them [`ondestroy`](https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html) in Components.\n   - Also for RxJs timeouts, make sure to _cancel_ their stream on success, for they can slow down rendering as well.\n - **Don't manipulate the nativeElement directly**. Use the _Renderer_. We do this to ensure that in any environment we're able to change our view.\n```typescript\nconstructor(element: ElementRef, renderer: Renderer) {\n  renderer.setElementStyle(element.nativeElement, 'font-size', 'x-large');\n}\n```\n - The application runs XHR requests on the server \u0026 once again on the Client-side (when the application bootstraps)\n    - Use a [UniversalCache](https://github.com/angular/universal-starter/blob/master/src/+app/shared/api.service.ts#L47-L71) instead of regular Http, to save certain requests so they aren't re-ran again on the Client.\n - Know the difference between attributes and properties in relation to the DOM.\n - 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 `\u003cimg src=\"\"\u003e` element the src attribute is reflected as the src property of the element type HTMLImageElement.\n\n\n----\n \n# Found a Bug? Want to Contribute?\n\nNothing's ever perfect, but please let me know by creating an issue (make sure there isn't an existing one about it already), and we'll try and work out a fix for it! If you have any good ideas, or want to contribute, feel free to either make an Issue with the Proposal, or just make a PR from your Fork.\n\n----\n\n\n# Other Tips:\n\n### Brotli Compression Support\n\nTo enable Brotli compression for server response with fallback for gzip replace the following code from src/server.aot.ts\n\n```\n  import * as compression from 'compression';\n\n  app.use(compression());\n```\nwith\n```\nimport * as mcache from 'memory-cache';\nconst { gzipSync } = require('zlib');\nconst accepts = require('accepts');\nconst { compressSync } = require('iltorb');\nconst interceptor = require('express-interceptor');\n\napp.use(interceptor((req, res)=\u003e({\n  // don't compress responses with this request header\n  isInterceptable: () =\u003e (!req.headers['x-no-compression']),\n  intercept: ( body, send ) =\u003e {\n    const encodings  = new Set(accepts(req).encodings());\n    const bodyBuffer = new Buffer(body);\n    // url specific key for response cache\n    const key = '__response__' + req.originalUrl || req.url;\n    let output = bodyBuffer;\n    // check if cache exists\n    if (mcache.get(key) === null) {\n      // check for encoding support\n      if (encodings.has('br')) {\n        // brotli\n        res.setHeader('Content-Encoding', 'br');\n        output = compressSync(bodyBuffer);\n        mcache.put(key, {output, encoding: 'br'});\n      } else if (encodings.has('gzip')) {\n        // gzip\n        res.setHeader('Content-Encoding', 'gzip');\n        output = gzipSync(bodyBuffer);\n        mcache.put(key, {output, encoding: 'gzip'});\n      }\n    } else {\n      const { output, encoding } = mcache.get(key);\n      res.setHeader('Content-Encoding', encoding);\n      send(output);\n    }\n    send(output);\n  }\n})));\n```\nthis will check the support, compress and cache the response.\n\n---\n\n## Edge case of server compatibility with Promise polyfills\n\nIf you have node modules with promise polyfill dependency on server - there is chance to get the following exception:\n```\nError: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.\n```\nIt occurs because [Zone.js](https://github.com/angular/zone.js/) Promise implementation is not\ndetected as Promise by some polyfills (e.g. [es6-promise](https://github.com/stefanpenner/es6-promise) before 4.x).\n\nTo sort it out, you need such polyfills initialized before zone.js. Zone.js is initialized in 'angular2-universal-polyfills'\nimport of [server.ts](https://github.com/angular/universal-starter/blob/master/src/server.ts#L4). So import problematic\nmodules before this line.\n\n### Documentation\n[Design Doc](https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUrUxcnwhBGS0EXbVlYicY)\n\n### Videos\nAngular 2 Universal Patterns - ng-conf, May 2016  \n[![Angular 2 Universal Patterns](http://img.youtube.com/vi/TCj_oC3m6_U/0.jpg)](https://www.youtube.com/watch?v=TCj_oC3m6_U)\n\nAngular Universal Source Code - ReadTheSource, January 2016  \n[![Angular Universal Source Code](http://img.youtube.com/vi/qOjtFjXoebY/0.jpg)](https://www.youtube.com/watch?v=qOjtFjXoebY)\n\nFull Stack Angular 2 - AngularConnect, Oct 2015  \n[![Full Stack Angular 2](https://img.youtube.com/vi/MtoHFDfi8FM/0.jpg)](https://www.youtube.com/watch?v=MtoHFDfi8FM)\n\nAngular 2 Server Rendering - Angular U, July 2015  \n[![Angular 2 Server Rendering](http://img.youtube.com/vi/0wvZ7gakqV4/0.jpg)](http://www.youtube.com/watch?v=0wvZ7gakqV4)\n\n## [preboot.js](https://github.com/angular/preboot)\n\u003e Control server-rendered page and transfer state before client-side web app loads to the client-side-app.\n\n# License\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkpieszak%2Funiversal-es6-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkpieszak%2Funiversal-es6-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkpieszak%2Funiversal-es6-starter/lists"}