{"id":25647114,"url":"https://github.com/actionanand/single-spa-angular-root-config","last_synced_at":"2026-05-14T18:33:24.169Z","repository":{"id":278892398,"uuid":"937093481","full_name":"actionanand/single-spa-angular-root-config","owner":"actionanand","description":"Single-Spa Angular root config app","archived":false,"fork":false,"pushed_at":"2025-05-15T18:51:07.000Z","size":569,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-15T19:42:30.318Z","etag":null,"topics":["angular18","angular2","root-config","single-spa"],"latest_commit_sha":null,"homepage":"https://single-spa-angular.surge.sh","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/actionanand.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,"zenodo":null}},"created_at":"2025-02-22T10:16:12.000Z","updated_at":"2025-05-15T18:51:11.000Z","dependencies_parsed_at":"2025-03-16T17:38:02.244Z","dependency_job_id":null,"html_url":"https://github.com/actionanand/single-spa-angular-root-config","commit_stats":null,"previous_names":["actionanand/single-spa-angular-root-config"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/actionanand/single-spa-angular-root-config","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-angular-root-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-angular-root-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-angular-root-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-angular-root-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actionanand","download_url":"https://codeload.github.com/actionanand/single-spa-angular-root-config/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-angular-root-config/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33037860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["angular18","angular2","root-config","single-spa"],"created_at":"2025-02-23T11:18:42.418Z","updated_at":"2026-05-14T18:33:24.163Z","avatar_url":"https://github.com/actionanand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Single-Spa Angular Root Config App\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.5.\n\n## Overview\n\nThis is **polyglot** single-spa root cinfig app using Angular Framework in root config.\nThis repo is used in conjunction with eleven other repos listed below. Together they make up an application composed of microfrontends. Each app can be updated and deployed independently from the others.\n\n- [**Root Config** (This Repo)](https://github.com/actionanand/single-spa-demo-root-config)\n- [**Angular App**](https://github.com/actionanand/single-spa-angular)\n- [**React App**](https://github.com/actionanand/single-spa-react)\n- [**Vue App**](https://github.com/actionanand/single-spa-vue)\n- [**Svelte App**](https://github.com/actionanand/single-spa-svelte)\n- [**sidebar App**](https://github.com/actionanand/single-spa-sidebar)\n- [**Footer App**](https://github.com/actionanand/single-spa-footer)\n- [**404 App**](https://github.com/actionanand/single-spa-404)\n- [**Vanilla JS App**](https://github.com/actionanand/single-spa-vanilla-js)\n- [**Utility App**](https://github.com/actionanand/single-spa-utility)\n- [**Angular Parcel App**](https://github.com/actionanand/angular-parcel-app)\n- [**React Parcel App**](https://github.com/actionanand/react-parcel-app)\n\n### Live site preview\n\n1. https://single-spa-angular.surge.sh\n2. https://single-spa-angular.onrender.com\n3. https://actionanand.github.io/single-spa-angular-root-config\n\n### How to deploy in surge\n\n```sh\nyarn run deploy:surge\n```\n\n## Cloning Guide\n\n1.  Clone only the remote primary HEAD (default: origin/master)\n\n```bash\ngit clone \u003curl\u003e --single-branch\n```\n\n2. Only specific branch\n\n```bash\ngit clone \u003curl\u003e --branch \u003cbranch\u003e --single-branch [\u003cfolder\u003e]\n```\n\n```bash\ngit clone \u003curl\u003e --branch \u003cbranch\u003e\n```\n\n3. Cloning repositories using degit\n\n   - main branch is default.\n\n```bash\nnpx degit github:user/repo#branch-name \u003cfolder-name\u003e\n```\n\n4. Cloning this project with skeleton\n\n```bash\ngit clone https://github.com/actionanand/single-spa-angular-root-config.git --branch 1-skeleton angular-proj-name\n```\n\n```bash\nnpx degit github:actionanand/single-spa-angular-root-config#1-skeleton angular-proj-name\n```\n\n### Creating surge token\n\n1. install surge globally\n\n```sh\nnpm install surge -g\n```\n\n2. Generating Surge token\n\n```sh\nsurge token\n```\n\nFor the first time, you installed surge, it takes your email and password to create/login account through terminal.\n\n3. Save this token in a `SECRET` with name `SURGE_TOKEN`. For this goto Repo Settings \u003e Secrets \u003e New_secret. Enter Token Name `SURGE_TOKEN` and paste the token generated in it.\n\n## Automate using `Prettier`, `Es Lint` and `Husky`\n\n1. Install the compatible node version\n\n```bash\n  nvm install v20.13.1\n```\n\n2. Install and Configure Prettier\n\n   - Install prettier as below:\n\n   ```bash\n     yarn add prettier -D\n   ```\n\n   - Create a `.prettierrc` file and write down the format as below: - [online ref](https://prettier.io/docs/en/options.html)\n\n   ```yml\n   trailingComma: 'all'\n   tabWidth: 2\n   useTabs: false\n   semi: true\n   singleQuote: true\n   bracketSpacing: true\n   bracketSameLine: true\n   arrowParens: 'avoid'\n   printWidth: 120\n   overrides:\n     - files:\n         - '*.js'\n         - '*.jsx'\n       options:\n         bracketSpacing: true\n         jsxSingleQuote: true\n         semi: true\n         singleQuote: true\n         tabWidth: 2\n         useTabs: false\n     - files:\n         - '*.ts'\n       options:\n         tabWidth: 2\n   ```\n\n   - Create a `.prettierignore` file and write as below(sample)\n\n   ```gitignore\n   # Ignore artifacts:\n   build\n   coverage\n   e2e\n   node_modules\n   dist\n   dest\n   reports\n\n   # Ignore files\n   *.lock\n   package-lock.json\n   yarn.lock\n   ```\n\n3. Install `Es Lint`, if not installed\n\n```bash\nng add @angular-eslint/schematics\n```\n\nif error comes, use the below command\n\n```shell\nng add @angular-eslint/schematics@next\n```\n\n4. Configure pre-commit hooks\n\nPre-commit hooks are a nice way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. [husky](https://github.com/typicode/husky) can be used to easily configure git hooks to prevent bad commits. We will use this along with [pretty-quick](https://github.com/azz/pretty-quick) to run Prettier on our changed files. Install these packages, along with [npm-run-all](https://github.com/mysticatea/npm-run-all), which will make it easier for us to run npm scripts:\n\n```bash\nyarn add husky pretty-quick npm-run-all -D\n```\n\nTo configure the pre-commit hook, simply add a `precommit` npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, `run-s` to run scripts in sequence, and `run-p` to run scripts in parallel:\n\n```json\n  \"precommit\": \"run-s format:fix lint\",\n  \"format:fix\": \"pretty-quick --staged\",\n  \"format:check\": \"prettier --config ./.prettierrc --list-different \\\"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\\\"\",\n  \"format:all\": \"prettier --config ./.prettierrc --write \\\"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\\\"\",\n  \"lint\": \"ng lint\",\n```\n\n5. Initialize husky\n\n   - Run it once\n\n   ```bash\n     npm pkg set scripts.prepare=\"husky install\"\n     npm run prepare\n   ```\n\n   - Add a hook\n\n   ```bash\n     npx husky add .husky/pre-commit \"yarn run precommit\"\n     npx husky add .husky/pre-commit \"yarn test\"\n     git add .husky/pre-commit\n   ```\n\n   - Make a commit\n\n   ```bash\n     git commit -m \"Keep calm and commit\"\n     # `yarn run precommit and yarn test` will run every time you commit\n   ```\n\n6. How to skip prettier format only in particular file\n\n   1. JS\n\n   ```js\n   matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);\n\n   // prettier-ignore\n   matrix(\n       1, 0, 0,\n       0, 1, 0,\n       0, 0, 1\n     )\n   ```\n\n   2. JSX\n\n   ```jsx\n   \u003cdiv\u003e\n     {/* prettier-ignore */}\n     \u003cspan     ugly  format=''   /\u003e\n   \u003c/div\u003e\n   ```\n\n   3. HTML\n\n   ```html\n   \u003c!-- prettier-ignore --\u003e\n   \u003cdiv         class=\"x\"       \u003ehello world\u003c/div            \u003e\n\n   \u003c!-- prettier-ignore-attribute --\u003e\n   \u003cdiv (mousedown)=\"       onStart    (    )         \" (mouseup)=\"         onEnd      (    )         \"\u003e\u003c/div\u003e\n\n   \u003c!-- prettier-ignore-attribute (mouseup) --\u003e\n   \u003cdiv (mousedown)=\"onStart()\" (mouseup)=\"         onEnd      (    )         \"\u003e\u003c/div\u003e\n   ```\n\n   4. CSS\n\n   ```css\n   /* prettier-ignore */\n   .my    ugly rule\n     {\n   \n     }\n   ```\n\n   5. Markdown\n\n   ```md\n     \u003c!-- prettier-ignore --\u003e\n\n   Do not format this\n   ```\n\n   6. YAML\n\n   ```yml\n   # prettier-ignore\n   key  : value\n     hello: world\n   ```\n\n   7. For more, please [check](https://prettier.io/docs/en/ignore.html)\n\n## Resources\n\n- [GitHub Actions for Angular](https://github.com/rodrigokamada/angular-github-actions)\n- [Angular 16 - milestone release](https://github.com/actionanand/ng16-signal-milestone-release)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fsingle-spa-angular-root-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factionanand%2Fsingle-spa-angular-root-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fsingle-spa-angular-root-config/lists"}