###An angular 2 component/service generator(based on angular official release) that can generate templates for all kinds of angular 2 projects.
find in npm: https://www.npmjs.com/package/generator-ng2component ###VERSION 1.1.3
current features:
1. create a component with full standard structure (check example tree below);
2. create a service with full standard structure;
3. auto declare component in your current .module.ts file, or don't declare;
4. you decide if you want to use index.ts file
###Steps: ( Assuming you have installed node.js [tested against node v6.9.1])
-
install yeoman (you may need 'sudo' for permission)
npm install -g yo
-
install this tool
globally (may need sudo): npm install -g generator-ng2component
or just to local project: npm install --save-dev generator-ng2component
-
run via yeoman
yo ng2component
-
follow the command line instructions, and your component will be populated in designated directory.
- what do u want to generate?
you can generate either component or service or both! default only component- Name for this Component & its Folder?
default: show-message
[notice: generator will declare this component for u only if u have corresponding .module.ts] - resides position?
default under: your_project_root/webpack, enter '.' will generate in current folder - style sheet?
choose from sass, css, less - where is your module?
default: webpack; (type = use component's location, type - do not declare)
[assuming your module's folder name is the same with module's name, above example will find src/app/app.module.ts, also AVOID TYPING TRAILING SLASH at the end] - service name?
default: device - service resides position?
default under: your_project_root/webpack/shared/services/ - import service into new component?
default: no - omit index.ts?
default: false. it will generate index.ts for each of your cmp/service
- Name for this Component & its Folder?
normally, it will generate following (example) structure under your project/webpack:
project-root/ ├── webpack/ │ └── some-module-name/ │ ├── show-message/ │ │ ├── show-message.component.ts │ │ ├── show-message.component.spec.ts │ │ ├── show-message.component.sass[less][css] │ │ ├── show-message.component.html │ │ └── index.ts │ ├── some-module-name.module.ts (auto declare) │ └── shared/ │ └── device/ │ ├── device.service.ts │ ├── device.service.spec.ts │ ├── device.ts │ └── index.ts
- what do u want to generate?
Find more generators on yeoman: http://yeoman.io/generators/
- add 'generate pipe/directive/module/class/interface/e2e test' option
You're welcome to contribute (open issues, PRs)! Also, if you think this tool is helpful, please watch/star/fork me on github/npmjs and let more people know it!
Check current version: npm view generator-ng2component version
Check newest version: npm outdated generator-ng2component
Update your local version: npm install generator-ng2component big changes happened on following versions. Feel free to use older version if you think current version contains issues.
02/25/2017 v1.1.2 generator can declare component automatically in your .module.ts now
02/24/2017 v1.1.1 generator can declare component automatically for your app.module.ts now
02/22/2017 v1.0.9 capable to omit generating index.ts now
11/12/2016 v1.0.6 generator is capable to import service automatically into component now
11/09/2016 v1.0.3 now you have stable service generator
11/8/2016 v0.0.11 fixed ts linting warnings
11/07/2016 v0.0.7 added global colors/fonts ref to scss
11/01/2016 v0.0.5 first stable version, can only generate component