{"id":13481915,"url":"https://github.com/cmelion/generator-ng2-webpack","last_synced_at":"2025-03-16T12:32:46.909Z","repository":{"id":72350479,"uuid":"52841798","full_name":"cmelion/generator-ng2-webpack","owner":"cmelion","description":"An opinionated tool for scaffolding an app using angular2 and webpack","archived":false,"fork":false,"pushed_at":"2016-11-28T16:18:28.000Z","size":9367,"stargazers_count":109,"open_issues_count":21,"forks_count":18,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-02-27T09:13:11.801Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/cmelion.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}},"created_at":"2016-03-01T02:31:43.000Z","updated_at":"2022-03-14T14:16:14.000Z","dependencies_parsed_at":"2023-02-28T08:15:51.155Z","dependency_job_id":null,"html_url":"https://github.com/cmelion/generator-ng2-webpack","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmelion%2Fgenerator-ng2-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmelion%2Fgenerator-ng2-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmelion%2Fgenerator-ng2-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmelion%2Fgenerator-ng2-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cmelion","download_url":"https://codeload.github.com/cmelion/generator-ng2-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814887,"owners_count":20352055,"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-07-31T17:00:57.408Z","updated_at":"2025-03-16T12:32:46.516Z","avatar_url":"https://github.com/cmelion.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"Now that Angular2 has moved to Webpack, the need for this generator is less of a priority for me. I'm working on a [new one](https://github.com/cmelion/generator-redux-observable) based on [Redux-Observable](https://github.com/redux-observable/redux-observable) that will support either Angular2 or React as well as a seamless mixture of the two.  Work on this repo will be limited to bug-fixes and pull-requests.\n\n[![NPM](https://nodei.co/npm/generator-ng2-webpack.png?downloads=true)](https://npmjs.org/package/generator-ng2-webpack)\n\n[![Join the chat at https://gitter.im/cmelion/generator-ng2-webpack](https://badges.gitter.im/cmelion/generator-ng2-webpack.svg)](https://gitter.im/cmelion/generator-ng2-webpack?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n# generator-ng2-webpack\n\nAn opinionated [BYOBE](http://nobackend.org/2013/11/cross-origin-backend.html) tool ([Yeoman](http://yeoman.io) generator) for scaffolding an app using angular2 and webpack\n\nWe like React too!  So if you have some react components you want to use in your Angular 2 apps we will be adding a sub-generator very soon!\nFor now check out the about component in the [generated app](//cmelion.github.io/generator-ng2-webpack/about) for a taste of what you can do.\n\n\n# Credits\nThis generator was inspired by: \n* https://github.com/preboot/angular-webpack\n* https://github.com/AngularClass/angular2-webpack-starter\n* https://github.com/mcfly-io/generator-ng2-webpack\n* http://www.syntaxsuccess.com/viewarticle/integrating-react-with-angular-2.0\n\n\u003ca href=\"//cmelion.github.io/generator-ng2-webpack/\" rel=\"Demo App\"\u003e![Demo App](http://www.masterbrandlk.com/smsdemo/image/demo_icon.jpg)\u003c/a\u003e\n\n[Sample generator output](//github.com/cmelion/ng2-webpack-demo-app)\n\n## Installation\n\nFirst, install [Yeoman](http://yeoman.io) and generator-ng2-webpack using [npm](https://www.npmjs.com/). If you don't already have node.js/npm installed, we recommend using [nvm](https://github.com/creationix/nvm) (windows users may want to consult the [wiki](https://github.com/cmelion/generator-ng2-webpack/wiki/NVM-installation-for-Windows)).\n\n```bash\nnpm install -g yo\nnpm install -g generator-ng2-webpack\n```\n\nThen generate your new project:\n\n```bash\n# create an application directory\n$mkdir my-app\n\n# change directory to your app\n$ cd my-app\n\nyo ng2-webpack [project-name]\n```\n\nYou then have access to the following sub generators:\n* **yo ng2-webpack:service** (Creates a service)\n* **yo ng2-webpack:pipe** (Creates a pipe)\n* **yo ng2-webpack:component** (Creates a component)\n* **yo ng2-webpack:directive** (Creates a directive)\n* **yo ng2-webpack:interface** (Creates an interface)\n\nResulting in a complete, yet simple, starter for Angular using Webpack.\n\nYou may prefer to use npm to run your sub-generators.\nFor a complete list of available commands and to add tab auto-completion, run the following commands in a terminal:\n\n    $ npm completion \u003e\u003e ~/.bashrc\n    $ source ~/.bashrc\n    $ npm run \u003ctab\u003e\u003ctab\u003e\n    \nwhich will produce the following output    \n```\n\nbuild                 docker-open-terminal  e2e-live              new-service           watch\nci                    docker-server         lint                  postinstall           webdriver-start\nclean                 docker-start          new-component         server                webdriver-update\nclean-install         docker-stop           new-directive         start                 \nclean-start           docs                  new-interface         test                  \ndelayed-open          e2e                   new-pipe              test-watch  \n \n```\n\nThis workflow serves as a starting point for building component based Angular 2.0 applications using Webpack. \n\n* Heavily commented webpack configuration with reasonable defaults.\n* ES6, and ES7 support with babel.\n* Source maps included in all builds.\n* Development server with live reload.\n* Production builds with cache busting.\n* Testing environment using karma to run tests and jasmine as the framework.\n* Code coverage when tests are run.\n* No gulp and no grunt, just npm scripts.\n\n\u003eWarning: Make sure you're using the latest version of Node.js and NPM\n\n### Quick start\n\n\n```bash\n\n# change directory to your app\n$ cd my-app\n\n# start the server\n$ npm start\n```\n\ngo to [http://localhost:2368](http://localhost:2368) in your browser.\n\n# Table of Contents\n\n* [Getting Started](#getting-started)\n    * [File Structure](#file-structure)\n    * [Dependencies](#dependencies)\n    * [Installing](#installing)\n    * [Running the app](#running-the-app)\n    * [Developing](#developing)\n    * [Testing](#testing)\n    * [Roadmap](#roadmap)\n    * [FAQ](#frequently-asked-questions)\n* [License](#license)\n\n# Getting Started\n\n## File Structure\n\n```\n├── app/                            * top level web app component folder\n│   ├── components/                 * subcomponents\n│   │   ├── about/                  * example page level component folder\n│   │   │   ├── index.async.ts      * .async indicates that the component will be asychronously loaded\n│   │   │   ├── spec.ts             * unit test\n│   │   │   ├── style.scss          * css styles, could be css, less or sass\n│   │   │   └── template.html       * component's html template\n│   │   └── home/                   * example main page level component\n│   │       ├── e2e.js              * end-to-end test for home\n│   │       ├── index.ts            * a simple synchronous component\n│   │       ├── spec.ts             * \n│   │       ├── style.scss          * \n│   │       └── template.html       * \n│   ├── e2e.js                      * end-to-end test for the app component\n│   ├── index.ts                    * the app component\n│   ├── root.spec.ts                * the main entry point for hierarchically nested tests.\n│   ├── services/                   * app level service folder\n│   │   └── api/                    * example application level service folder\n│   │       ├── index.ts            * example service\n│   │       └── spec.ts             * unit test associated with example service\n│   ├── style.scss                  * application component specific styles\n│   └── template.html               * application component html template\n├── bootstrap.ts                    * application entry point (bootstrap)\n├── public/                         * static public facing resources\n│   ├── img/                        * global/top level icons and images\n│   └── index.html                  * the html index page where it all starts\n├── shims/                          * shims an polyfills for non-compliant browsers\n│   └── shims_for_IE.js             * sample shim\n├── style/                          * \n│   └── app.scss                    * styles required by the index page\n└── vendor.ts                       * this is where we import shims/polyfills and core third party libraries\n```\n\n## Dependencies\n\nWhat you need to run this app:\n* `node` and `npm` (Use [NVM](https://github.com/creationix/nvm))\n* Ensure you're running Node (`v4.1.x`+) and NPM (`2.14.x`+)\n\n## Installing\n\n```bash\n# create an application directory\n$mkdir my-app\n\n# change directory to your app\n$ cd my-app\n\nyo ng2-webpack [project-name]\n```\nThat's it!\n\n## Running the app\n\nAfter you have installed all dependencies you can now run the app with:\n```bash\nnpm start\n```\nor (if you want to automatically open a browser window)\n\n```bash\nnpm delayed-open\n```\nIt will start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The port will be displayed to you as `http://localhost:2368`.\n\n## Developing\n\n### Build files\n\n* single run: `npm run build`\n* build files and watch: `npm run watch`\n\n## Testing\n\n#### 1. Unit Tests\n\n* single run: `npm test`\n* live mode (TDD style): `npm run test-watch`\n\n## Roadmap\n\n* Mocking with [JSON Server](https://github.com/typicode/json-server) - see [working example](https://github.com/cmelion/ng2-webpack-demo-app)\n* [Docker](https://www.docker.com/) integration\n* Support for [Eclipse Che](https://github.com/eclipse/che)\n\n## Frequently asked questions\n\n* How do I async load a component?\n    * see wiki [How-do-I-async-load-a-component-with-AsyncRoute](https://github.com/cmelion/generator-ng2-webpack/wiki/How-do-I-async-load-a-component-with-AsyncRoute%3F)\n* I hate that all the files are named index.ts, style.scss and template.html and what happened to my.controller.ts, etc?\n    * While it's mostly personal preference, there are several good reasons for standardized filenames, see [filename conventions](https://github.com/cmelion/generator-ng2-webpack/wiki/I-hate-that-all-the-files-are-named-index.ts,-style.scss-and-template.html!)\n    * In a component based architecture almost everything is a component, checkout [what happened to my .controller. ?](https://github.com/cmelion/generator-ng2-webpack/wiki/What-happened-to-my.controller.ts,-etc%3F)\n* [Why should I use a generator?](https://github.com/cmelion/generator-ng2-webpack/wiki/Why-should-I-use-a-generator%3F)\n* How do I run docker commands from the npm tool window?\n    * Install docker run: `npm install -g docker-run`\n    * see wiki [Docker Workflow explained](https://github.com/cmelion/generator-ng2-webpack/wiki/Why-Docker%3F)\n* How do I [import third party/vendor libs](https://github.com/cmelion/generator-ng2-webpack/wiki/Importing-vendor-libs)?\n* How do I add Material-Design-Lite(MDL) to a project?\n    *  see wiki [Working with MDL](https://github.com/cmelion/generator-ng2-webpack/wiki/Working-with-Material-Design-Lite) \n\n\n# License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmelion%2Fgenerator-ng2-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcmelion%2Fgenerator-ng2-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmelion%2Fgenerator-ng2-webpack/lists"}