[](https://travis-ci.org/FountainJS/generator-fountain-angular2) [](https://codecov.io/gh/FountainJS/generator-fountain-angular2) [](http://slackin.fountainjs.io/) # Fountain Angular 2 Generator [](https://angular.io/) > Fountain Angular 2 Generator allows you to start an Angular2 web app with the best developer experience possible! > No matter what framework or module management you want to use, we got you covered with a cutting edge working configuration. > We use [Gulp 4](http://gulpjs.com/) as a task manager but we'll ask you questions about: - Modules management: Webpack, SystemJS, none - JS preprocessor: Babel, TypeScript, none - CSS preprocessor: Sass, Stylus, Less, none This generator is a sub-generator of the the Yeoman Fountain generator for webapps [generator-fountain-webapp](https://github.com/FountainJS/generator-fountain-webapp). ## Generator Fountain Angular 2 structure To utilize the best of the Yeoman infrastructure, we heavily rely on the composability features that the generators offer. Thereby, each requirement for your application will be addressed by a dedicated Yeoman generator (generators utilized will vary depending on the options selected). Additional information: [DESIGN.md](http://fountainjs.io/doc/design). ### Web tooling layer [](https://github.com/FountainJS/generator-fountain-gulp) [](https://github.com/FountainJS/generator-fountain-eslint) [](https://github.com/FountainJS/generator-fountain-browsersync) [](https://github.com/FountainJS/generator-fountain-karma) ### Module management layer [](https://github.com/FountainJS/generator-fountain-webpack) [](https://github.com/FountainJS/generator-fountain-systemjs) [](https://github.com/FountainJS/generator-fountain-inject) ## Usage ### Requirement Node 6+ && NPM 3+ This generator is targeted to be used with Node >= 6.0.0 and NPM => 3.0.0. You can check your version number with the command ``` node --version && npm --version ``` ### Install ##### Install required tools `yo`: ``` npm install -g yo ``` ##### Install `generator-fountain-angular2`: ``` npm install -g generator-fountain-angular2 ``` ### Run ##### Create a new directory, and go into: ``` mkdir my-new-project && cd my-new-project ``` ##### Run `yo fountain-angular2`, and select desired technologies: ``` yo fountain-angular2 ``` #### Use NPM scripts - `npm run build` to build an optimized version of your application in /dist - `npm run serve` to launch a browser sync server on your source files - `npm run serve:dist` to launch a server on your optimized application - `npm run test` to launch your unit tests with Karma - `npm run test:auto` to launch your unit tests with Karma in watch mode #### Or Gulp tasks If you have [`gulp-cli`](https://www.npmjs.com/package/gulp-cli) installed in global packages you can use equivalent: - `gulp` or `gulp build` - `gulp serve` - `gulp serve:dist` - `gulp test` - `gulp test:auto` **If you don't have [`gulp-cli`](https://www.npmjs.com/package/gulp-cli) installed globally, the following error will occur:** > /usr/local/lib/node_modules/gulp/bin/gulp.js:121 gulpInst.start.apply(gulpInst, toRun); TypeError: Cannot read property 'apply' of undefined ### Sub-generators Few sub-generators are available. You can see the full list by running `yo --generators`. Each generator has 2 options: - You can set the name of the generated item with `--name` - You can set the path of the generated item with `--dir` **Example:** ``` yo fountain-angular2:component --name myComponent --dir components/game ``` ### [Start development](http://fountainjs.io/doc/usage/#use-npm-scripts) ## [Changelog](https://github.com/FountainJS/generator-fountain-angular2/releases) ## [Contributing](http://fountainjs.io/doc/contributing)