{"id":18508651,"url":"https://github.com/genesiscommunitysuccess/angular16-with-genesis-ui","last_synced_at":"2026-04-27T18:34:52.193Z","repository":{"id":207584739,"uuid":"719330679","full_name":"genesiscommunitysuccess/angular16-with-genesis-ui","owner":"genesiscommunitysuccess","description":"Angular Integration Example","archived":false,"fork":false,"pushed_at":"2023-12-08T19:09:50.000Z","size":364,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-06T22:04:09.924Z","etag":null,"topics":["angular","genesis","genesis-ui"],"latest_commit_sha":null,"homepage":"https://genesis.global/platform/","language":"TypeScript","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/genesiscommunitysuccess.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,"zenodo":null}},"created_at":"2023-11-16T00:03:23.000Z","updated_at":"2023-11-23T09:55:55.000Z","dependencies_parsed_at":"2023-12-08T20:36:02.311Z","dependency_job_id":null,"html_url":"https://github.com/genesiscommunitysuccess/angular16-with-genesis-ui","commit_stats":null,"previous_names":["genesiscommunitysuccess/angular16-with-genesis-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/genesiscommunitysuccess/angular16-with-genesis-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/genesiscommunitysuccess%2Fangular16-with-genesis-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/genesiscommunitysuccess%2Fangular16-with-genesis-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/genesiscommunitysuccess%2Fangular16-with-genesis-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/genesiscommunitysuccess%2Fangular16-with-genesis-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/genesiscommunitysuccess","download_url":"https://codeload.github.com/genesiscommunitysuccess/angular16-with-genesis-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/genesiscommunitysuccess%2Fangular16-with-genesis-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32349849,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T17:12:42.749Z","status":"ssl_error","status_checked_at":"2026-04-27T17:12:41.658Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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","genesis","genesis-ui"],"created_at":"2024-11-06T15:14:58.941Z","updated_at":"2026-04-27T18:34:52.176Z","avatar_url":"https://github.com/genesiscommunitysuccess.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 16 with Genesis Ui\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.10. \n\nSample steps followed:\n\n```shell\nnpm install -g @angular/cli@v16-lts\nng new angular16-with-genesis-ui\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? CSS\n...\ncd angular16-with-genesis-ui\nng generate component dashboard\nng generate component not-found\nng generate module auth\n```\n\nIn addition, moved project onto a custom webpack builder and added `\"skipLibCheck\": true` to tsconfig.json.\n\n**Please see the [initial commits](https://github.com/genesiscommunitysuccess/angular16-with-genesis-ui/commits/main) where these steps were broken down for clarity.**\n\n## Code Tours\n\nWhen opening the repository for the first time in either VSCode or Intellij, you should get prompted to install some recommended plugins. These include a Code Tour plugin:\n\n* [CodeTour for VSCode](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour)\n* [CodeTour for Intellij](https://plugins.jetbrains.com/plugin/19227-codetour)\n\nAfter installing, you may need to manually start the \"Genesis UI Integration\" code tour from the menu in your IDE.\n\n### Adding Web Component Support\n\nOn-top of the cli generated baseline, we've configured this angular project to work with browser native [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components),\na.k.a Custom Elements, which are completely web framework independent. Angular has full support for Web Components, which you can verify on the [Angular + Custom Elements Test Results](https://custom-elements-everywhere.com/libraries/angular/results/results.html), running on https://custom-elements-everywhere.com/.\n\nTo get angular to recognise Web Components, we simply add the [CUSTOM_ELEMENTS_SCHEMA](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA) to the project where we need this support.\n\n```ts\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule, Component } from '@angular/core';\n...\n@NgModule({ // \u003c or `Component`\n  ...\n  schemas: [\n    CUSTOM_ELEMENTS_SCHEMA\n  ]\n})\n```\n\nThen it's just a matter of adding any Web Components you wish to use to the project's dependency graph, via a `\u003cscript\u003e` tag, npm install, or whatever other means you prefer.\n\nHere we're adding a Web Component from the community via a script tag:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/ionicons@7.2.1/dist/ionicons.js\"\u003e\u003c/script\u003e\n```\n\nAnd then adding the element markup to your templates:\n\n```html\n\u003cion-icon name=\"rocket\"\u003e\u003c/ion-icon\u003e\n```\n\nThat's it! No framework plumbing code required beyond perhaps binding values to these web components via their attributes, or handling their emitted events if required. Given you'll probably want to do that, you need to add the Angular `FormsModule`.\n\n```ts\n...\nimport { FormsModule } from '@angular/forms';\n...\n@NgModule({ // \u003c or `Component`\n  ...\n  imports: [\n    ...\n    FormsModule  // \u003c enable bindings etc. on our web components\n  ],\n})\n```\n\nWith the above in place, our Web Components are now first class citizens. There's some Web Component binding examples at the bottom of the dashboard page.\n\nWe've added the same script tag integration to this project's [index.html](./src/index.html) file, and used icon Web Component in the [dashboard.component.html](./src/app/dashboard/dashboard.component.html) template. Look out for the rocket icon on the dashboard.\nWhile using the script tag approach is fine in many cases, some third-party imports may required post import setup. Where you do that setup is really up to you. If it's a component that you only want to use in one place, then perhaps import and add the setup in that area.\nIf it's for components or design systems you plan do use across the entire application, you may wish to centralise that in a shared location. For the latter, we've created such a shared area in [src/app/shared/](./src/app/shared/README.md).\n\n#### Are Web Components a thing yet?\n\n[Yes!](https://arewebcomponentsathingyet.com)\n\n#### Where can I find Web Components?\n\nWe provide a lot of pre-built and extensible Web Components at Genesis. From simple primitives, like buttons, switches, and even icon components like the above, to fully connected composites and micro frontends built to work with the Genesis backend.\nThis project's [auth module](./src/app/auth/auth.module.ts) uses the pre-build `@genesislcap/foundation-auth` micro frontend to offload all user authentication, mfa, and self-service password recovery complexity to Genesis.\nLearn about these on https://learn.genesis.global/docs/web/web-components/overview/.\n\nBeyond that, check out https://www.webcomponents.org/, where you can browse single elements and collections from well known companies such as [Adobe](https://www.webcomponents.org/author/adobe), [Github](https://www.webcomponents.org/author/github), and [Google](https://www.webcomponents.org/author/GoogleWebComponents).\nThe [component.gallery](https://component.gallery/design-systems/?tech=Web+Components) and [Open UI](https://open-ui.org/) websites are also good starting points.\n\n#### How do I build a Web Component?\n\nAngular developers who are interested in creating native Web Components should check out the [Angular Elements](https://angular.io/guide/elements) package. Also, see the [All the Ways to make a Web Component](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/board/) board.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application 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 `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\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 a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgenesiscommunitysuccess%2Fangular16-with-genesis-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgenesiscommunitysuccess%2Fangular16-with-genesis-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgenesiscommunitysuccess%2Fangular16-with-genesis-ui/lists"}