{"id":15040715,"url":"https://github.com/hp-e/generator-ng-seed","last_synced_at":"2025-07-14T21:42:24.617Z","repository":{"id":57248100,"uuid":"75979128","full_name":"hp-e/generator-ng-seed","owner":"hp-e","description":"A yeoman generator for scaffolding an Angular version x project","archived":false,"fork":false,"pushed_at":"2017-06-06T05:03:52.000Z","size":214,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-10T09:17:20.891Z","etag":null,"topics":["angular","scaffolding","typescript","webpack","yeoman"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/hp-e.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-08T22:07:05.000Z","updated_at":"2017-04-25T06:25:44.000Z","dependencies_parsed_at":"2022-08-24T16:31:26.894Z","dependency_job_id":null,"html_url":"https://github.com/hp-e/generator-ng-seed","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hp-e%2Fgenerator-ng-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hp-e%2Fgenerator-ng-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hp-e%2Fgenerator-ng-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hp-e%2Fgenerator-ng-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hp-e","download_url":"https://codeload.github.com/hp-e/generator-ng-seed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248937237,"owners_count":21186191,"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":["angular","scaffolding","typescript","webpack","yeoman"],"created_at":"2024-09-24T20:44:57.715Z","updated_at":"2025-04-14T18:34:11.301Z","avatar_url":"https://github.com/hp-e.png","language":"JavaScript","readme":"# A [Yeoman](http://yeoman.io) generator for scaffolding an Angular project with Typescript and webpack.\nThe goal of this generator is to provide a very simple scaffolding tool for an Angular project.\n\n**Supported Angular versions:**\n* Angular 4.1.0\n* Angular 2.4.10\n\nNB! Version 1 of Angular is not and will not be supported in this generator.\n\n## Getting Started\n\nFirst of all you will need the yeoman cli for this generator. If you don't have it installed do that now.\n\n```cmd \n$ npm install -g yo\n```\n\n### Run the generator\n\nTo install this generator from npm, run:\n\n```cmd\n$ npm install -g generator-ng-seed\n```\n\nFinally, initiate the generator:\n```cmd\n$ yo ng-seed\n```\n\nor to download dependencies later\n```cmd\n$ yo ng-seed --skip-install\n```\n\nor to skip all questions and only create the minimum files required to run a simple angular2 project\n```cmd\n$ yo ng-seed --q\n```\n\n#### Options\n|Option ||Description|\n| -|-|-|\n| --q|optional|q for quick start. If all you want is a basic structure. This will scaffold the files with all default settings|\n| --flat|optional|Changes the itemFolderStructure to flat. The subgenerators will place all created files at the root of the selected folder|\n| --self|optional|Changes the itemFolderStructure to self. The subgenerators will place all created files with the items name and place the item in this folder. Overrides the default setting |\n| --css|optional|Changes the defaultStyle to css (default is scss) |\n| --no-barrel|optional|Changes the module.useBarrelFile to false and will not write items to the barrel file |\n| --no-linting|optional|Will not add the linting.json settings file to the root |\n| --no-bundler|optional|Will not install webpack or any file needed for the webpack. |\n\n\n## File structure\nThe generator produce the following output. This structure is loosly based on the angular2-seed from the angular team.\n\n```\ngenerator-ng-seed/\n ├──config/                       \n |   ├──prod.config.js                     \n ├──src/                       \n │   ├──main.ts                     //this is the starting point for the application\n │   │\n │   ├──index.html                          \n │   ├──favicon.ico             \n │   │\n │   ├──polyfills.ts                \n │   ├──vendor.ts                   // third pary libraries can be imported to this file\n │   │\n │   ├──app/                   \n │   │   ├──core/  \n │   │   │   └──rxjs-extensions.ts          \n │   │   ├──home/        \n │   │   │   ├──home.component.scss          \n │   │   │   ├──home.component.html        \n │   │   │   └──home.component.ts          \n │   │   ├──shared/        \n │   │   │   page-not-found.ts          \n │   │   ├──app.component.html        \n │   │   ├──app.component.ts        \n │   │   ├──app.module.ts        \n │   │   ├──app.routes.ts        \n │   │   └──app.settings.ts             \n │   │\n │   └──assets/                      \n │       └──styles.scss                      \n │\n ├──.gitignore             \n ├──.yo.rc.json             \n ├──CHANGELOG.md            \n ├──README.md             \n │──ng-seed.json                          \n ├──tsconfig.json                          \n ├──package.json                \n └──webpack.config.js     \n```\n\n### Enjoy!\n\nThis generator comes with Webpack with tasks for compiling and running.\n\nTo build and run the project:\n \n```\n$ npm start\n```\n\nTo build only:\n\n```\n$ npm run build\n```\n\n## Sub generators\n\nThe ng-seed generator also provides a set of sub generators to speed up your \ndevelopment with Angular, TypeScript and WebPack\n\n* module  \n* page  \n* component  \n* model  \n* model  \n* service  \n* directive  \n* pipe  \n* version  \n\n### Module\nIn this sub generator a module is a directory in the src/app directory. It consists of a \u003cname\u003e.module.ts, router, pages, components.\nYou will be asked for a name for the module. This should be written in singular form (e.g company not companies). Where appropriate we \nwill fint the plural form. Separate word with upper case (companyManager, companyContact etc)\n\n```yo ng-seed:module [path/]\u003cmoduleName\u003e [--p] [--s] [--c] [--d] [--m] [--pipe] [--structure-flat | --structure-self | structure-ask ] [--tpl] [--scss | --css ] [--no-barrel] [--tpl]```\n\nTo run the module sub generator:\n```\n$ yo ng-seed:module moduleName\n```\n\n#### Options\n|Option ||Description|\n| -|-|-|\n| folder|optional|If you need to put the module in a different folder from src/app then you can add the foldername here. Must be a part of the moduleName and finish with / (foreword slash)|\n| moduleName|**required**|The moduleName cannot be separated with SPACE. Use PascalCase for the module name |\n| --c|optional|Adds a set of pages to the module. You wil be asked about the component name. |\n| --p|optional|Adds a set of pages to the module. You wil be asked about the page name. |\n| --m|optional|Adds a set of pages to the module. You wil be asked about the model name. |\n| --s|optional|Adds a set of pages to the module. You wil be asked about the service name. |\n| --d|optional|Adds a set of pages to the module. You wil be asked about the directive name. |\n| --pipe|optional|Adds a set of pipes to the module. You wil be asked about the page name. |\n| --lazy|optional|Uses the CommonModule instead of BrowserModule so that it could be lazy loaded |\n| --flat|optional|Adds the items to the same folder as the module. Overrides the default setting |\n| --self|optional|Creates a folder with the items name and place the item in this folder. Overrides the default setting |\n| --ask|optional|You will be asked where to place the items. Overrides the default setting |\n| --tpl|optional|Adds a template file to the component or page. Overrides the default setting |\n| --scss|optional|Adds a scss style page for each item (component or page). Overrides the default setting |\n| --css|optional|Adds a css style page for each item (component or page). Overrides the default setting |\n| --no-barrel|optional|Will not write the items to the barrel file, Overrides the default settings |\n\n### COMPONENT sub- generator\n\nCreates a set of components\n```yo ng-seed:component \u003cpathToModule\u003e [--tpl] [--scss | --css ] [--structure-flat | --structure-self | structure-ask ] [--no-barrel]```\n\n### PAGE sub- generator\nCreates a set of pages.\nWhat is a page? A page is still a component, but I think of a page as an endpoint for a route, a landing component that holds a set of components.\n\nExample: http://localhost:3000/departments would point to a index.page.ts and inside the template I would call other components.\n\n```yo ng-seed:page \u003cpathToModule\u003e [--tpl] [--scss | --css ] [--structure-flat | --structure-self | structure-ask ] [--no-barrel]```\n\n### MODEL sub- generator\nCreates a set of models and adds it to the module.\n\n```yo ng-seed:model \u003cpathToModule\u003e [--structure-flat | --structure-self | structure-ask ] [--no-barrel]```\n\n### SERVICE sub- generator\nCreates a set of services and adds it to the module.\n\n```yo ng-seed:service \u003cpathToModule\u003e [--structure-flat | --structure-self | structure-ask ]```\n\n### DIRECTIVE sub- generator\nCreates a set of directives and adds it to the module.\n\n```yo ng-seed:directive \u003cpathToModule\u003e [--structure-flat | --structure-self | structure-ask ] [--no-barrel]```\n\n### PIPE sub- generator\nCreates a set of directives and adds it to the module.\n\n```yo ng-seed:pipe \u003cpathToModule\u003e [--structure-flat | --structure-self | structure-ask ] [--no-barrel]```\n\n\n## Samples\n\n### I want to create a simple module \n```\nyo ng-seed:module CompanyManager\n```\nthe above sample will produce the following:\n```\nmoduleName = CompanyManager\ngenerator-ng-seed/\n ├──src/                       \n │   ├──app/                   \n │   │   ├──company-manager/                             \n │   │   │   ├──company-manager.module.ts                \n │   │   │   └──company-manager.routing.module.ts                           \n```\n\n### I want to create a simple module \nThis will create the module inside the content sub directory\n```\nyo ng-seed:module content/CompanyManager\n```\n\nthe above sample will produce the following:\n```\nmoduleName = CompanyManager\ngenerator-ng-seed/\n ├──src/                       \n │   ├──app/                   \n │   │   ├──content/                             \n │   │   │   ├──company-manager/                             \n │   │   │   │   ├──company-manager.module.ts                \n │   │   │   │   └──company-manager.routing.module.ts                           \n```\n\n### I want to create a module with a set of components, service and model\n\nTo create a module named admin, ready to be lazy loaded and adding a component, service and a couple of models together with the module:\n```\nyo ng-seed:module CompanyManager --c --s --m --lazy\n```\n\nYou will now be asked some questions:\n```\n? What is the component name(s) (separate components with SPACE)? tabel chart\n? What is the model name(s) (separate models with SPACE)? manager\n? What is the service name(s) (separate services with SPACE)? admin\n```\n\nthe above sample will produce the following:\n```\nmoduleName = CompanyManager\ngenerator-ng-seed/\n ├──src/                       \n │   ├──app/                   \n │   │   ├──company-manager/                             \n │   │   │   ├──components/                      \n │   │   │   │   ├──chart.component.html       \n │   │   │   │   ├──chart.component.ts       \n │   │   │   │   ├──table.component.html       \n │   │   │   │   └──table.component.ts         \n │   │   │   ├──models/                          \n │   │   │   │   └──manager.model.ts             \n │   │   │   ├──services/                                \n │   │   │   │   └──admin.servcice.ts         \n │   │   │   ├──company-manager.module.ts                \n │   │   │   ├──company-manager.routing.module.ts                     \n │   │   │   └──company-manager.exports.ts            \n```\n\n**What if I want to place all items in the same sub directory?**\n\nYou can add --structure-ask to the above example, then you will be asked to provide a name for the directory:\n\n```\n? Please provide a name for the sub-directory to place the item in? myItems\n```\n\nNow the structure would look like this\n```\nmoduleName = admin\ngenerator-ng-seed/\n ├──src/                       \n │   ├──app/                   \n │   │   ├──company-manager/                             \n │   │   │   ├──my-items/                      \n │   │   │   │   ├──chart.component.html       \n │   │   │   │   ├──chart.component.ts       \n │   │   │   │   ├──table.component.html       \n │   │   │   │   ├──table.component.ts                                  \n │   │   │   │   ├──manager.model.ts                                            \n │   │   │   │   └──admin.servcice.ts         \n │   │   │   ├──company-manager.module.ts                \n │   │   │   ├──company-manager.routing.module.ts                     \n │   │   │   └──company-manager.exports.ts            \n```\n\n**What if I want to place all items module root folder?**\n\nYou can replace **--structure-ask** with **--structure-flat** \n\nNow the structure would look like this\n```\nmoduleName = admin\ngenerator-ng-seed/\n ├──src/                       \n │   ├──app/                   \n │   │   ├──company-manager/                                             \n │   │   │   ├──chart.component.html       \n │   │   │   ├──chart.component.ts       \n │   │   │   ├──table.component.html       \n │   │   │   ├──table.component.ts                                  \n │   │   │   ├──manager.model.ts                                            \n │   │   │   ├──company-manager.servcice.ts         \n │   │   │   ├──company-manager.module.ts                \n │   │   │   ├──company-manager.routing.module.ts                     \n │   │   │   └──company-manager.exports.ts            \n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhp-e%2Fgenerator-ng-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhp-e%2Fgenerator-ng-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhp-e%2Fgenerator-ng-seed/lists"}