## Starting an Angular Cli Seed Application

October 31 2017 by [Chris](/content/chris@techdevsolutions.com)

I've personally restarted creating an Angular 4 seed project as so much has changed since the last time I solidified my last one.

It's hosted [here](http://angularcliseed.techdevsolutions.com/home) and the source code can be found on my personal [Github](https://github.com/cmk1523/angular-cli-seed).

Before creating a new Angular 4 project, it's essential that you run the following to install the angular/cli toolset before you begin: `npm install -g @angular/cli`.

I then created a new Angular project by running: `ng new angular-cli-seed` (where "angular-cli-seed" is the name of the new project).

I then customized the package.json file with custom scripts and packages. The full file can be found [here](https://github.com/cmk1523/angular-cli-seed/blob/master/package.json).

```
...
"scripts": %7B
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:watch": "ng build -w",
    "build:prod": "ng build --prod",
    "test": "ng test --single-run",
    "test:chrome": "npm run test --browsers Chrome",
    "test:firefox": "npm run test --browsers Firefox",
    "test:chrome:coverage": "npm run test:chrome -- --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e"
    %7D
...
"dependencies": %7B
...
"moment": "2.18.1",
"jquery": "3.2.1",
"toastr": "2.1.2",
"bootstrap": "3.3.7",
...
```

I then updated both the styles and scripts folders in my .angular-cli.json [file](https://github.com/cmk1523/angular-cli-seed/blob/master/.angular-cli.json). This step essentially gives me the ability to now use jQuery, toastr, and Bootstrap... after including them in the package.json file in the step above. Angular CLI's default setup will bundle all of it too (except for the halflings files)!

I then created 4 new components by running the following from inside my ./src/app/ folder:

```
ng g c header
ng g c home
ng g c about
ng g c contact
```

I created a very basic AppRouting module and then updated my app.component.html file to simply:

`<app-header></app-header><router-outlet></router-outlet>`

Finally, I quickly integrated the [simplest](https://getbootstrap.com/docs/3.3/examples/starter-template/) of all Bootstrap examples. I won't get in to testing here, but I did implement very simple instantiation unit tests and are runnable via: `ng test` or `ng test:chrome`. It's runnable by running `ng serve` and I created my deployable version with `ng build:prod`.