A yeoman generator to scaffold an Angular2 application

Installation

First, install Yeoman and generator-ng2-pro using npm (we assume you have pre-installed node.js ).

• Installing yarn

npm install -g yarn 
npm install -g yo
npm install -g generator-ng2-pro

Then generate your new project:

yo ng2-pro

steps

• Run yarn start from a terminal
• Navigate to http://localhost:8080/ The app will automatically reload if you change any of the source files

Features

Scaffold Complete Directory Layout

├── /config/                   
    └── /helpers.js
    └── /karma-test-shim.js
    └── /webpack.common.js
    └── /webpack.dev.js
    └── /webpack.test.js
├── /public/                    
    ├── /css
    ├── /images
├── /src/                       
    ├── /app
         └── /app.component.html
         └── /app.component.scss
         └── /app.component.spec.ts
         └── /app.component.ts
         └── /app.module.ts
    ├── /index.html
    └── main.ts
    └── polyfills.ts
    └── vendor.ts
├── /node_modules/             
├── .gitignore                                    
├── .travis.yml                                     
├── karma.conf.js              
├── Readme.md                
├── package.json                
├── typedoc.json                  
├── tsconfig.json              
├── tslint.json               
└── typings.json                
└── webpack.conf.js 

Usage

That'll generate a project with all the common tools setup. This includes: Filled package.json file

• Webpack task runner
• Jasmine unit testing
• Karma test runner
• TSLint and SASS Lint linting and code style checking
• Istanbul code coverage
• Travis CI continuous integration

Generating Component, Directives, Pipes and Services

You can use yo ng2-pro command to generate Angular Componenet, Directives, Pipes and Services

Scaffold               Usage
Component              yo ng2-pro:component --name [component-name]
Directive              yo ng2-pro:directive --name [directive-name]
Pipe                   yo ng2-pro:pipe --name [pipe-name]
Service                yo ng2-pro:service --name [service-name]
Interface              yo ng2-pro:interface --name [interface-name]

Testing

yarn test

Tslint

Uses the sass-lint npm module to check ts files. you can use this linter by runing following command

yarn tslint

sass-lint

Uses the sass-lint npm module to check scss and sass files. you can use this linter by runing following command

yarn sass-lint

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

License

MIT © Erandi