Giter Club home page Giter Club logo

nadeemse / angular2-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
8.0 2.0 3.0 6.73 MB

Angular2-4 boilerplate by using Angular CLI, That includes Modular Approach for large scale applications, Each module has its own main routes & inner routes that used angular2 lazy loading routing. It also has core.module & Shared.module module that is helpful to manage repetition. Custom Http interceptor to handle all kind of HTTP errors & validations.

TypeScript 14.17% JavaScript 15.42% HTML 8.90% CSS 61.52%
angular2-boilerplate inner-routes lazy-loading angular4-start

angular2-boilerplate's Introduction

Angular2 boilerplate

This project was generated with angular-cli version 1.0.0-beta.14.

This project includes modular approach and inner routes, Default modules are

catalog

  • Products
  • Categories

Account

  • Profile
  • Login
  • SignUp
  • Forgot-password

CMS-pages

Shopping-cart

All these modules are based on inner routing & modular approach.

Project Setup

Follow the following steps and you're good to go! Important: NPM has to be installed on your machine!

1: Clone repo

git clone https://github.com/nadeemse/angular2-boilerplate.git

2: Install packages

cd angular2-boilerplate
npm install
npm install -g angular-cli

potential issues

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

If you will see this error then it mean that angular-cli version need to be upgraded, simply follow below steps to make it run.

npm uninstall angular-cli -g

This will remove angular-cli global version.

npm cache clean

Clear NPM cache

npm install angular-cli@latest -g

If you have an existing project built with prior versions of Angular CLI, you will need to upgrade:

rm -rf node_modules dist tmp

Remove node modules, dist and tmp folder by running above command.

npm install angular-cli@latest --save-dev

Install latest angular-cli version in your project

npm install 

install dependencies

ng serve 

Enjoy developing Angular2 application.

Choose following work-around if you can't upgrade Angular CLI.

npm uninstall webpack --save-dev
npm install [email protected] --save-dev

Further help for Angular CLI

To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

3: Start server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Component

Run ng generate component component-name to generate a new component. to generate an sub component navigate to component and runt same command ng generate component component-name OR ng g c component-name

Directive

Run ng g directive my-new-directive to generate a new directive.

Pipe

Run ng g pipe my-new-pipe to generate a new pipe.

Service

Run ng g service my-new-service to generate a new Service.

Class

Run ng g class my-new-class to generate a new Class.

Interface

Run ng g interface my-new-interface to generate a new Interface.

Enum

Run ng g enum my-new-enum to generate a new Enum.

Serve

Run ng serve to serve the project while developing application.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

MORE HELP

For help, Drop me an email on [email protected]

angular2-boilerplate's People

Contributors

nadeemse avatar rizrepos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.