{"id":18769273,"url":"https://github.com/odipixel/angular-ssr","last_synced_at":"2026-04-26T22:31:12.006Z","repository":{"id":122709989,"uuid":"312768181","full_name":"odipixel/angular-ssr","owner":"odipixel","description":"Server Side Rendering App from development to deployment","archived":false,"fork":false,"pushed_at":"2020-11-17T03:42:46.000Z","size":538,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-20T23:18:07.739Z","etag":null,"topics":["angular","angularuniversal","server","ssr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/odipixel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-11-14T07:28:47.000Z","updated_at":"2020-11-18T08:52:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"0394686b-3faa-47ea-844c-d826127e0197","html_url":"https://github.com/odipixel/angular-ssr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/odipixel/angular-ssr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odipixel%2Fangular-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odipixel%2Fangular-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odipixel%2Fangular-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odipixel%2Fangular-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/odipixel","download_url":"https://codeload.github.com/odipixel/angular-ssr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odipixel%2Fangular-ssr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32315711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T21:09:39.134Z","status":"ssl_error","status_checked_at":"2026-04-26T21:09:21.240Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","angularuniversal","server","ssr"],"created_at":"2024-11-07T19:15:22.826Z","updated_at":"2026-04-26T22:31:11.988Z","avatar_url":"https://github.com/odipixel.png","language":"TypeScript","readme":"# About the project\n\n![Server Side Rendering](https://github.com/odipixel/angular-ssr/blob/main/src/assets/images/spacex.jpg)\n\n[Click here for demo](https://spacex-ssrapp.herokuapp.com/)\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.8 and Angular Universal(a technology that renders Angular Applications on the server).\n\nA normal angular application executes in the browser,rendering pages in DOM but Angular Universal executes on the server and generates static pages which can be later bootstrapped on the client.\n\n# SEO\n\nAs we know angular applications rely heavily on JavaScript and most search engines do not even execute JavaScript, In that case, we can render our application on the server and send back the rendered HTML. As the result, the crawler now can index our page properly.\n\nAngular’s Meta service makes it easy to get or set meta tags depending on the current active route in your app. We have to import Meta Service form `@angular/platform-browser` and inject it in a component.\n\n```sh\nimport { Meta } from '@angular/platform-browser';\n ```\nYou can use the `addTags` method to add multiple meta tags.\n\n```sh\nthis.metaTagService.addTags([\n      { name: 'keywords', content: 'Angular Server Side Rendering,SSR,Angular,Angular Universal' },\n      { name: 'robots', content: 'index, follow' },\n      { name: 'author', content: 'Kishore Mallick' },\n      { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n      { name: 'date', content: '16-11-2020', scheme: 'DD-MM-YYYY' },\n      { charset: 'UTF-8' }\n    ]);\n ```\n\n# Social Media Embedding\n\nMost of social media sites ignore JavaScript, as well. So when a link to our page is shared, we would not get a desired result with our page in it. As they have no problem handling HTML, so it will be easy to render our embeded social media contents.\n\n```sh\nthis.metaTagService.addTag({name: 'twitter:card', content: 'summary'});\nthis.metaTagService.addTag({name: 'twitter:site', content: '@ServerSideRendering'});\nthis.metaTagService.addTag({name: 'twitter:title', content: this.pageTitle});\nthis.metaTagService.addTag({name: 'twitter:description', content: 'This page describes Angular Server Side Rendering'});\nthis.metaTagService.addTag({name: 'twitter:text:description', content: 'This page describes Angular Server Side Rendering'});\nthis.metaTagService.addTag({name: 'twitter:image', content: 'https://avatars3.githubusercontent.com/u/16628232?v=3\u0026s=200'});\n ```\n\n# Browser Module\n\nWe have to import `BrowserModule.withServerTransition({appId: 'serverApp'})`.This method expects an object with a key called appId(string). This appId in our browser app module should match with one in the server app module.\n\n```sh\n imports: [\n    BrowserModule.withServerTransition({ appId: 'serverApp' }),\n    AppRoutingModule,\n    BrowserTransferStateModule,\n    HttpClientModule,\n  ]\n ```\n# Transfer State API\nWe will improve the efficiency of our app by creating the TransferState service, a key-value registry exchanged between the Node.js server and the application rendered in the browser.Normally, when we use angular universal without Transfer State API, the API that delivers the content, is hit twice. Once, when the server is rendering the page and second is, when the application is bootstrapped. We can overcome this problem by using Angular Transfer State API.We need to add the `BrowserTransferStateModule` to the AppModule.Then we need to inject this service in the component class.\n\n```sh\n  constructor(@Inject(PLATFORM_ID) private platformId: Object){}\n```\n\nIt can transfer data from the server side of the app to the browser side of the app.What we need to do is,first import `ServerTransferStateModule` on the server app and `BrowserTransferStateModule` on the browser app.\n\n```sh\nimport {ServerTransferStateModule} from '@angular/platform-server';\n@NgModule({\n  imports: [\n    AppModule,\n    //Make sure the string matches\n    BrowserModule.withServerTransition({\n      appId: 'serverApp'\n  }),\n    ServerModule,\n    ServerTransferStateModule\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppServerModule {}\n```\n```sh\n@NgModule({\n  declarations: [\n    AppComponent,\n    SidebarFilterComponent,\n    LaunchesComponent\n  ],\n  imports: [\n    BrowserModule.withServerTransition({ appId: 'serverApp' }),\n    AppRoutingModule,\n    BrowserTransferStateModule,\n    HttpClientModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nWe can detect if we are on the server or on the browser app by calling the `hasKey` method.\n\n```sh\nconst RESULT_KEY = makeStateKey\u003cstring\u003e('spaceXData');\n...\n private isServer: boolean;\n\n constructor(private http: HttpClient,private apiService:HttpService,\n    private transferState: TransferState,@Inject(PLATFORM_ID) private platformId: Object) {\n      this.isServer = isPlatformServer(platformId);\n}\n...\n ngOnInit() {\n    let spacexTransferStateKey = RESULT_KEY;\n       \n    if(this.transferState.hasKey(spacexTransferStateKey)) {\n      this.launchData = this.transferState.get(spacexTransferStateKey, {});\n      this.transferState.remove(spacexTransferStateKey);\n  } else if (this.isServer){\n     this.apiService.getAllLaunches().subscribe((res)=\u003e{\n      this.launchData=res;\n      this.transferState.set(spacexTransferStateKey, this.launchData);\n     }); \n  }\n  ```\n## Data Sharing between components\n\nThe BehaviorSubject holds the value that needs to be shared with other components. These components subscribe to data which is simple returning the BehaviorSubject value without the functionality to change the value.A BehaviorSubject  can emit the current value.\n\n* In http.service.ts `BehaviorSubject` is initialized.\n```sh\n  private apiData = new BehaviorSubject\u003cany\u003e(null);\n  public apiData$ = this.apiData.asObservable();\n```\n* In sidebar-filter.component.ts you have to set the API responses.\n```sh\nthis.apiService.setData(this.launchData);\n```\n* Component have to subscribe the data by returning the BehaviorSubject value\n```sh\napiService.apiData$.subscribe(data =\u003e this.launchData = data);\n```\n## Built With\n\nA list of commonly used resources in this project.\n\n* [Angular](https://angular.io/)\n* [Angular CLI](https://cli.angular.io/)\n* [Angular Universal](https://angular.io/guide/universal)\n* [Express](https://expressjs.com/)\n\n## Getting Started\n\nTo get a local copy up and running please follow below simple steps.\n\n### Prerequisites\n\n* npm\n\n```sh\nnpm install npm@latest -g\n```\n* angular cli\n```sh\nnpm install -g @angular/cli\n```\n\n### Installation\n\n1. Clone the repo\n```sh\ngit clone https://github.com/odipixel/angular-ssr.git\n```\n2. Install NPM packages\n```sh\nnpm install\n```\n### Configurations\n\nAll API configurations can be found in `environment.ts` file.By default api limit is 8 and it can be configurable.New APIs as well as existing APIs can be added or edited from here. \n\n## Development server\n\nTo start this app on your local system,run  `npm run dev:ssr` command.\nOpen a browser and navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `npm run build:ssr` to build the project. The build artifacts will be stored in the `dist/` directory. \n\n## Deployment(Using Heroku Git)\n\nDownload and install the  * [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)\n \n1. Create a folder in your local directory.\n2. Go to the directory that was created\nIf you haven't login already, log in to your Heroku account with below command line.\n\n```sh\nheroku login\n```\n2. Initialize the git in that folder using below command.\n\n```sh\ngit init\n```\n3. Copy \u0026 Paste your files/folders from your angular-ssr folder to inside the created folder,except `.git` and node_module folder.\n4. Set git remote heroku to  https://github.com/odipixel/angular-ssr.git using below command line.\n```sh\nheroku git:remote -a spacex-ssrapp\n```\n5. Deploy your changes\n```sh\ngit add .\n```\n```sh\ngit commit -am \"\u003cYour commit message\u003e\"\n```\n```sh\ngit push heroku master\n```\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodipixel%2Fangular-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodipixel%2Fangular-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodipixel%2Fangular-ssr/lists"}