KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #typescript #codex #claude-code #mcp #rust #deepseek-harness #ai-agent #cli

angular-material-boilerplate

★ 27 Open GitHub ↗

A straightforward and well structured boilerplate based on Google's Angular Material project.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# angular-material-boilerplate

A straightforward and well structured boilerplate based on Google's Angular Material project.

## Features
* Live reload
* Organised folder structure
* Minified CSS, HTML and JS build files
* Minified images.
* SASS support
* Responsive layout
* Mobile ready
* [Material Design Icons](https://material.io/icons/) icons
* Support for Unit & E2E Testing
* Unit Test reporting
* [ESLint](http://eslint.org/) code analysis tool.
* [Jasmine](http://jasmine.github.io/2.3/introduction.html) testing framework
* [Karma](http://karma-runner.github.io/0.13/index.html) test runner
* [Protractor](https://angular.github.io/protractor/#/)  end-to-end test framework

## Live Demo
[Check out the live demo](http://cmacdonnacha.github.io/angular-material-boilerplate/)

## Setup
1. Install [Git](https://git-scm.com/downloads) and [NodeJS](http://nodejs.org/)
2. `git clone https://github.com/cmacdonnacha/angular-material-boilerplate.git myApp`
3. `cd myApp`
4. `npm install`

## Quick Usage
* `npm start` : Creates a development build folder called `public` and serves it on: [`http://localhost:3000/`](http://localhost:3000/)
* `npm start --production` : Creates a production ready folder called `production` and serves it on: [`http://localhost:4000/`](http://localhost:4000/)
* `npm test` : Runs code checks, unit tests and E2E tests.
* `npm run unit` : Runs unit tests only.
* `npm run e2e` : Runs E2E tests only. 
* `npm run eslint` : Runs an ESLint code check only.
* `npm run coverage` : Creates and serves the unit test coverage reports on: [`http://localhost:5000/`](http://localhost:5000/)
* `npm run build` : Creates the `public` build folder but doesn't serve it.
* `npm run build --production` : Creates the `production` build folder but doesn't serve it.

## Project Structure
This project follows a **"Folders-by-Feature"** structure very similar to [John Papa's Styleguide](https://github.com/johnpapa/angular-styleguide#application-structure). From the screenshot below you can see that there are 6 separate features, a folder for each one.
Each feature is treated as a mini Angular app. This structure allows us developers to easily locate code and identify what each file represents at a glance.
By retaining this structure the project is much more manageable as it grows.

![alt text](http://i.imgur.com/9jYKIoi.png "Folders-by-Feature structure")

* The `app` folder contains the following individual features:
    * `about`: Contains the about page related files.
    * `layout`: The high level layout container which stitches it all together.
    * `shared`: Contains all shared services, directives, styles etc. used across the entire app.
    * `sidenav`: Contains the sidenav related files.
    * `todo`: Contains the todo page related files.
    * `toolbar`: Contains the toolbar related files.

* The `assets` folder contains all globally used images.

#### Adding a new feature folder
In the future I hope to automate the ability to create a new feature folder but for now, check out the [wiki](https://github.com/cmacdonnacha/angular-material-boilerplate/wiki/How-to-add-your-own-feature-folder) to see how you can go about adding one manually.

## Troubleshooting
Even crème de menthe projects have their issues. Here are some problems you may face along with some suggestions on how to resolve them:

#### 1. Issue: I'm getting the following error: ***"Error: EPERM or operation not permitted or permission denied"***
This can happen when trying to delete a folder that's already in use. For example when running `npm test` while the `npm start` task is already running.

**Suggestion:**
1. Stop any tasks that are already running and try again.

<br>

#### 2. Issue: I'm getting the following error when running the `npm test` task: ***"No selenium server jar found at the specified location"***

**Suggestion:** 
1. Run the following command and try again: `npm run webdriver-update`

<br>

#### 3. Issue: I'm getting the following error while running the `npm start` task: ***"Error: ENOENT: no such file or directory, scandir 'C:....node_modeules\node-sass\vendor"***
This can happen if you have changed your environment since first installing node-sass or if you are running an old version of node-sass.

**Suggestion:**

1. Run this command: `npm rebuild node-sass`

<br>

#### 4. Issue: None of the above have helped
**Suggestion:**

This project has been tested with the following tools:
* **NodeJs:** 6.9.2
* **Npm:** 3.10.9

If you are running into issues while installing node packages then ensure you have the versions above installed.

<br>

## Contribute
Believe it or not, **angular-material-boilerplate** is not perfect. If you want to improve it somehow then by all means go ahead and create a pull request :-)

## TODO
- Add source maps
- Automate ability to add new feature folder
- Switch to Material SVG icons

angular-material-boilerplate

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README