{"id":21575510,"url":"https://github.com/rangle/schematics-angular","last_synced_at":"2026-03-10T07:04:04.022Z","repository":{"id":146999590,"uuid":"150092453","full_name":"rangle/schematics-angular","owner":"rangle","description":"Angular Schematics for adding features to an existing angular project to improve productivity and organization-wide consistency","archived":false,"fork":false,"pushed_at":"2018-10-31T11:17:20.000Z","size":1661,"stargazers_count":34,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T14:12:58.406Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/rangle.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":"2018-09-24T11:28:08.000Z","updated_at":"2024-02-26T06:11:32.000Z","dependencies_parsed_at":"2023-04-04T20:03:47.109Z","dependency_job_id":null,"html_url":"https://github.com/rangle/schematics-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fschematics-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fschematics-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fschematics-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fschematics-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rangle","download_url":"https://codeload.github.com/rangle/schematics-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248252691,"owners_count":21072699,"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":[],"created_at":"2024-11-24T12:13:29.450Z","updated_at":"2026-03-10T07:03:58.994Z","avatar_url":"https://github.com/rangle.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Schematics for Productivity and Consistency\n\nDeveloping large-scale web-applications is *hard*, and without a lot of\nexperience building large Angular applications, it's very easy to make\nan architectural or structural mistake that could cost your team a lot\nof money and time to fix down the road once that mistake is realized.\n\nThe schematics in this library will help your team develop Angular\napplications that are consistent and have an architecture/folder\nstructure that will scale for extremely large projects right from the\nget-go.\n\nThe output of these schematics is based on many years of experience\nbuilding large-scale projects in Angular, and have been used in\napplications that contain several hundred-thousand lines of code. Thus,\nthe opinions and ideas behind these schematics have been battle-tested\nand proved to prevent and solve scalability problems many people run\ninto when building large-scale Angular projects.\n\n## Installation\n\nTo add these schematics to your angular-cli project, type the\nfollowing in the console at the root of your project:\n\n```bash\nnpm install @egervari/schematics-angular --save-dev\n```\n\nTo run schematics from your console, also add the following global\nnpm library:\n\n```bash\nnpm install -g @angular-devkit/schematics-cli\n```\n\n### Using Schematics Via Console\n\n#### Adding prettier and overwriting TSLint and Prettier rules\n\nTo add prettier (if you currently don't have it installed) and use\nRangle's preferred starting point for TSLint and Prettier rules, run\nthe following schematic from your console:\n\n```bash\nschematics @egervari/schematics-angular:tslint-and-prettier\n```\n\nRunning this schematic will also create a bunch of scripts to\nconveniently check and fix your project so you don't have to add them\nyourself.\n\nYou should see the following updates to your project:\n\n```bash\n    Added \"prettier\" into devDependencies\n    Added \"tslint-config-prettier\" into devDependencies\nCREATE /prettier.config.js (173 bytes)\nUPDATE /tslint.json (869 bytes)\nUPDATE /package.json (2552 bytes)\n```\n\n#### Creating Features\n\nTo create a feature module containing components, routes, services,\ntypes and isolated ngrx infrastructure, you must specify the feature's\n`name`, `path` and optionally, you can specify your project's component\n`prefix` for its selector, but the schematic can often figure this out\nfrom your Angular project workspace.\n\n```bash\nschematics @egervari/schematics-angular:feature --name=my-feature --path=src/app --prefix=rng\n```\n\nIf your project currently does not have a `/features` folder, the\nschematic will create one for you.\n\nYou should see the following files be created/updated when running this\nschematic:\n\n```bash\nCREATE /src/app/features/my-feature/my-feature-routing.module.ts (370 bytes)\nCREATE /src/app/features/my-feature/my-feature.module.ts (676 bytes)\nCREATE /src/app/features/my-feature/components/my-feature/my-feature.component.html (0 bytes)\nCREATE /src/app/features/my-feature/components/my-feature/my-feature.component.scss (12 bytes)\nCREATE /src/app/features/my-feature/components/my-feature/my-feature.component.ts (224 bytes)\nCREATE /src/app/features/my-feature/components/index.ts (52 bytes)\nCREATE /src/app/features/my-feature/services/my-feature.service.ts (200 bytes)\nCREATE /src/app/features/my-feature/store/my-feature.actions.ts (239 bytes)\nCREATE /src/app/features/my-feature/store/my-feature.effects.ts (453 bytes)\nCREATE /src/app/features/my-feature/store/my-feature.reducer.ts (560 bytes)\nCREATE /src/app/features/my-feature/store/my-feature.store.ts (305 bytes)\nCREATE /src/app/features/my-feature/types/my-feature-state/my-feature-state.functions.spec.ts (419 bytes)\nCREATE /src/app/features/my-feature/types/my-feature-state/my-feature-state.functions.ts (158 bytes)\nCREATE /src/app/features/my-feature/types/my-feature-state/my-feature-state.interface.ts (56 bytes)\nUPDATE /src/app/store/app.reducer.ts (543 bytes)\nUPDATE /src/app/types/app-state/app-state.interface.ts (175 bytes)\nUPDATE /src/app/types/app-state/app-state.functions.ts (273 bytes)\nUPDATE /src/app/app-routing.module.ts (355 bytes)\n```\n\n#### Creating Modules\n\nSometimes you wish to create modules outside of your routes. They are\nnot really features, but reusable pieces of code the rest of the app\ncan share. To create such a module, run the following schematic:\n\n```bash\nschematics @egervari/schematics-angular:module --name=my-module --path=src/app\n```\n\nIf your project currently does not have a `/modules` folder, the\nschematic will create one for you.\n\nYou should see the following files be created/updated when running this\nschematic:\n\n```bash\nCREATE /src/app/modules/my-module/my-module.module.ts (559 bytes)\nCREATE /src/app/modules/my-module/services/my-module.service.ts (199 bytes)\nCREATE /src/app/modules/my-module/store/my-module.actions.ts (236 bytes)\nCREATE /src/app/modules/my-module/store/my-module.effects.ts (448 bytes)\nCREATE /src/app/modules/my-module/store/my-module.reducer.ts (547 bytes)\nCREATE /src/app/modules/my-module/store/my-module.store.ts (303 bytes)\nCREATE /src/app/modules/my-module/types/my-module-state/my-module-state.functions.spec.ts (410 bytes)\nCREATE /src/app/modules/my-module/types/my-module-state/my-module-state.functions.ts (154 bytes)\nCREATE /src/app/modules/my-module/types/my-module-state/my-module-state.interface.ts (55 bytes)\nUPDATE /src/app/store/app.reducer.ts (660 bytes)\nUPDATE /src/app/types/app-state/app-state.interface.ts (314 bytes)\nUPDATE /src/app/types/app-state/app-state.functions.ts (425 bytes)\nUPDATE /src/app/app.module.ts (768 bytes)\n```\n\n#### Creating Components\n\nCreating components is equally easy - make sure to point the `path`\nto the module/feature folder you wish the component to be located:\n\n```bash\nschematics @egervari/schematics-angular:component --name=my-form --path=src/app\n```\n\nIf your path currently does not have a `/components` folder, the\nschematic will create one for you.\n\nYou should see the following files be created/updated when running this\nschematic:\n\n```bash\nCREATE /src/app/components/my-form/my-form.component.html (0 bytes)\nCREATE /src/app/components/my-form/my-form.component.scss (12 bytes)\nCREATE /src/app/components/my-form/my-form.component.ts (214 bytes)\nUPDATE /src/app/components/index.ts (192 bytes)\nUPDATE /src/app/app.module.ts (2484 bytes)\n```\n\n#### Creating Services\n\nCreates a service and updates the containing module file.\n\n```bash\nschematics @egervari/schematics-angular:service --name=my-api --path=src/app\n```\n\nIf your path currently does not have a `/services` folder, the\nschematic will create one for you.\n\nYou should see the following files be created/updated when running this\nschematic:\n\n```bash\nCREATE /src/app/services/my-api.service.ts (200 bytes)\nUPDATE /src/app/app.module.ts (2561 bytes)\n```\n\n#### Creating Types\n\nCreates a paired interface and functions file for a given model.\n\n```bash\nschematics @egervari/schematics-angular:type --name=user-profile --path=src/app\n```\n\nIf your path currently does not have a `/types` folder, the\nschematic will create one for you.\n\nYou should see the following files be created when running this\nschematic:\n\n```bash\nCREATE /src/app/types/user-profile/user-profile.functions.spec.ts (390 bytes)\nCREATE /src/app/types/user-profile/user-profile.functions.ts (146 bytes)\nCREATE /src/app/types/user-profile/user-profile.interface.ts (55 bytes)\n```\n\n#### Creating a new project\n\nThe Angular CLI and the default @ngrx schematics do not create folders\nand files that help developers scale over the long term. Thus, we also\nprovide a schematic to make some adjustments to a newly created Angular\nCLI project to help you get started on the right foot and to support the\nother schematics.\n\nTo create a new Angular CLI Project, execute the following commands\nand you're good to go:\n\n```bash\nnpm install @angular/cli -g\n\nng new my-project\n```\n\nWhen asked:\n\n* Say **(Y)es** to add Angular Routing\n* Select **SCSS** for your stylesheet format\n\n```bash\ncd my-project\n\nng add @ngrx/store\nng add @ngrx/effects\n\nnpm install @egervari/schematics-angular --save-dev\n```\n\nAnd then to correct the default structure, run the `initialize`\nschematic with no parameters:\n\n```bash\nschematics @egervari/schematics-angular:initialize\n```\n\nYou should see the following changes:\n\n```bash\n            Added \"prettier\" into devDependencies\n            Added \"tslint-config-prettier\" into devDependencies\nDELETE /src/app/app.component.html\nDELETE /src/app/app.component.scss\nDELETE /src/app/app.component.ts\nDELETE /src/app/reducers/index.ts\nDELETE /src/app/app.effects.ts\nDELETE /src/app/app.component.spec.ts\nDELETE /src/app/app.effects.spec.ts\nCREATE /prettier.config.js (163 bytes)\nCREATE /src/app/types/app-state/app-state.functions.ts (118 bytes)\nCREATE /src/app/types/app-state/app-state.interface.ts (33 bytes)\nCREATE /src/app/components/index.ts (35 bytes)\nCREATE /src/app/components/app/app.component.html (1173 bytes)\nCREATE /src/app/components/app/app.component.scss (0 bytes)\nCREATE /src/app/components/app/app.component.ts (215 bytes)\nCREATE /src/app/store/app.reducer.ts (403 bytes)\nCREATE /src/app/store/app.effects.ts (180 bytes)\nCREATE /src/app/store/app.store.ts (385 bytes)\nUPDATE /tslint.json (826 bytes)\nUPDATE /package.json (1784 bytes)\nUPDATE /src/app/app.module.ts (740 bytes)\n```\n\n#### Where to go from here?\n\nFrom here, you can run schematics for creating features to get your\nproject started. For example, to create a `landing` section for your\napplication, run the following schematic:\n\n```bash\nschematics @egervari/schematics-angular:feature --name=landing --path=src/app\n```\n\nAnd to create the `home`, `login` and `forgot-password` sections within the\nlanding module, run the following 3 schematics:\n\n```bash\nschematics @egervari/schematics-angular:feature --name=home --path=src/app/features/landing\nschematics @egervari/schematics-angular:feature --name=login --path=src/app/features/landing\nschematics @egervari/schematics-angular:feature --name=forgot-password --path=src/app/features/landing\n```\n\nAt this point, take a quick look at your source code and you'll be\nastounded as to how much manual labour was saved as a result of using\nthese schematics. Everything is modularized and chained together for\nyou, such as your routes, lazy-loading, states, state default values and\nreducers. Your NgModule's are properly connected. You have clear\nseparation of concerns everywhere.\n\nAnd if you're new to Angular and didn't know the right way to begin\nyour first project architecturally, this will put you on the right path\nto having a great, scalable architecture over the long-term.\n\n### Using Schematics Through WebStorm\n\nTo use schematics in WebStorm, right-click on a folder, select\n**'New'**, then select **'Angular Schematic'**, and then select any\nschematic from the following list:\n\n![alt text](docs/webstorm-1.png \"Angular Schematics Selection\")\n\nFor the parameters input, WebStorm will pass many of the options - such\nas project name and path - on your behalf, so all you have to do is set\nthe `name` parameter for most schematics and you're all set:\n\n![alt text](docs/webstorm-2.png \"Add name parameter\")\n\n## Building and testing\n\nTo build the source code, run:\n\n```bash\nnpm run build\n```\n\nAfter the schematics are built, to run them locally from the project\nroot, run:\n\n```bash\ncd dist\nschematics .:feature --name=app --path=src/app\n```\n\n## Linting and Prettier\n\nTo clean up the source code, run:\n\n```bash\nnpm run fix\n```\n\n## Publishing\n\nTo publish this to npm, run the following commands:\n\n```bash\nnpm version major/minor/patch\nnpm run build\nnpm run publish\n```\n\n### Quickly create a patch version\n\nTo quickly create a patch version, instead of going through all of the\nbuild and publish commands manually, instead run:\n\n```bash\nnpm run release-patch\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangle%2Fschematics-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frangle%2Fschematics-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangle%2Fschematics-angular/lists"}