https://github.com/sinedied/ng-lite-starter
Minimal starter for Angular projects
https://github.com/sinedied/ng-lite-starter
angular minimal starter template
Last synced: 5 months ago
JSON representation
Minimal starter for Angular projects
- Host: GitHub
- URL: https://github.com/sinedied/ng-lite-starter
- Owner: sinedied
- License: mit
- Created: 2022-07-12T14:12:21.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-07T07:46:10.000Z (over 2 years ago)
- Last Synced: 2025-05-06T23:08:16.264Z (5 months ago)
- Topics: angular, minimal, starter, template
- Language: TypeScript
- Homepage:
- Size: 410 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ðŠķ ng-lite starter
> Minimal starter for Angular projects.
See this [dev.to article](https://dev.to/angular/a-simpler-and-smaller-angular-starter-with-nglite-1ooh) to learn how this starter was created and for more details about the differences with Angular CLI's default `ng new`.
*Note: the article was written based on Angular 14, and this starter has been updated since so you can expect a few differences since Angular 15 base starter simplified a few things already.* ð
## Usage
To create a new project from this starter, you can either:
- Run `npx degit sinedied/ng-lite-starter `
- Or select **Use this template** button at the top of this repository and follow the instructions.
## Tasks
This starter works the same way as any Angular project, by using either the included NPM scripts or the Angular CLI directly:
- `ng serve`: run dev server at `http://localhost:4200/`
- `ng build`: build the project in the `dist/` directory.
- `ng generate component component-name`: generates a new component.
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
## Add unit testing
You can add unit testing to your project using the [Jest](https://jestjs.io) testing framework by following these steps:
1. Run `npm install --save-dev jest @angular-builders/jest @types/jest`
2. Add a `jest.config.js` file to your project root with the following content:
```js
module.exports = {
clearMocks: true,
collectCoverage: true,
coverageDirectory: "coverage",
};
```
3. Add a `tsconfig.spec.json` file to your project root with the following content:
```json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": ["jest"],
"esModuleInterop": true
},
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
```
4. In your `angular.json` file, add this after your `serve` configuration (under the `architect` key):
```json
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"tsConfig": "tsconfig.spec.json"
}
},
```
If you want to have tests generated by default when using the `ng generate` command, you can also remove all the `"skipTests": true` occurences in this file.
5. Create your first test in `src/app/app.component.spec.ts`:
```typescript
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
let component: AppComponent;
let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create the component', () => {
expect(component).toBeTruthy();
});
});
```
You can now run your tests with `ng test` or `ng test --watch`.