https://github.com/rangle/custom-angular-schematic-demo
Custom schematics for libraries
https://github.com/rangle/custom-angular-schematic-demo
angular-schematics cli-app
Last synced: 7 months ago
JSON representation
Custom schematics for libraries
- Host: GitHub
- URL: https://github.com/rangle/custom-angular-schematic-demo
- Owner: rangle
- Created: 2022-02-28T17:10:22.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-21T20:14:03.000Z (about 3 years ago)
- Last Synced: 2025-03-24T14:13:29.298Z (11 months ago)
- Topics: angular-schematics, cli-app
- Language: TypeScript
- Homepage:
- Size: 220 KB
- Stars: 4
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom Angular Schematics for Libraries
This is a demo repository for the blog post "How to Use Custom Schematics to Supercharge Developer Experience".
## Get Started
- Clone this repository
- Change to the `schematics` folder and run `npm install`
- Run `npm run build` to build the schematics, or run `npm run dev` to build the schematics on watch mode
- Run `npm link` in the `schematics` folder
- Change to the `demo-app` folder and run `npm install`
- Once the installation is complete, also run `npm link ds-schematics` to link the custom schematics to the demo app so that you can test the custom schematics on an Angular project
## Test Schematics on Demo App
## Test the `Component` Command
- Run `ng g ds-schematics:component --name=checkbox --standalone` to generate a standalone checkbox component
```bash
CREATE src/app/checkbox/checkbox.component.scss (0 bytes)
CREATE src/app/checkbox/checkbox.component.html (0 bytes)
CREATE src/app/checkbox/checkbox.component.spec.ts (613 bytes)
CREATE src/app/checkbox/checkbox.component.ts (263 bytes)
```
- Run `ng g ds-schematics:component --name=checkbox` to generate a component that is part of the AppModule
```bash
CREATE src/app/checkbox/checkbox.component.scss (0 bytes)
CREATE src/app/checkbox/checkbox.component.html (0 bytes)
CREATE src/app/checkbox/checkbox.component.spec.ts (613 bytes)
CREATE src/app/checkbox/checkbox.component.ts (263 bytes)
UPDATE src/app/app.module.ts (484 bytes)
```
## Test the `ng add` Command
- Run `ng g ds-schematics:ng-add`
- This command updates the npm script `test: jest` and install Jest as a dependency
## FAQ
Q: I saw this error `An unhandled exception occurred: Collection "ds-schematics" cannot be resolved.` when I'm running the schematics commands
A: Run `npm link ds-schematics` in the `demo-app` folder again and should resolve this issue.