;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ FooterComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(FooterComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/core/components/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-footer',
5 | templateUrl: './footer.component.html',
6 | styleUrls: ['./footer.component.scss']
7 | })
8 | export class FooterComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/core/components/header/header.component.html:
--------------------------------------------------------------------------------
1 |
26 |
--------------------------------------------------------------------------------
/src/app/core/components/header/header.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/app/core/components/header/header.component.scss
--------------------------------------------------------------------------------
/src/app/core/components/header/header.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { RouterTestingModule } from '@angular/router/testing';
4 | import { HeaderComponent } from './header.component';
5 |
6 | describe('HeaderComponent', () => {
7 | let component: HeaderComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | imports: [RouterTestingModule],
13 | declarations: [HeaderComponent]
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HeaderComponent);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/src/app/core/components/header/header.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { AppController } from '../../../app.controller';
4 |
5 | @Component({
6 | selector: 'app-header',
7 | templateUrl: './header.component.html',
8 | styleUrls: ['./header.component.scss']
9 | })
10 | export class HeaderComponent extends AppController implements OnInit {
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/core/components/home/home.component.html:
--------------------------------------------------------------------------------
1 |
2 | Contents...
3 |
4 |
--------------------------------------------------------------------------------
/src/app/core/components/home/home.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/app/core/components/home/home.component.scss
--------------------------------------------------------------------------------
/src/app/core/components/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HomeComponent } from './home.component';
4 |
5 | describe('HomeComponent', () => {
6 | let component: HomeComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ HomeComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(HomeComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/core/components/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: './home.component.html',
6 | styleUrls: ['./home.component.scss']
7 | })
8 | export class HomeComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/core/config/app-config.const.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Configuration, i.e. languages, locale, date formats etc.
3 | *
4 | * Shared settings for all environments: dev, prod, stage etc.
5 | */
6 | import { AppConfig } from '../interfaces/app-config.interface';
7 |
8 | export const appConfig: AppConfig = {
9 | appTitle: 'Angular Best Boilerplate',
10 | browserTabTitleDelimiter: ' | ',
11 | defaultLanguage: 'en_GB',
12 | availableLanguages: ['en_GB', 'pl_PL']
13 | };
14 |
--------------------------------------------------------------------------------
/src/app/core/config/router-config.const.ts:
--------------------------------------------------------------------------------
1 | import { RouterConfig } from '../interfaces/router-config.interface';
2 |
3 | export const routerConfig: RouterConfig = {
4 | users: {
5 | base: 'users'
6 | }
7 | };
8 |
--------------------------------------------------------------------------------
/src/app/core/core.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { CoreModule } from './core.module';
2 |
3 | describe('CoreModule', () => {
4 | let coreModule: CoreModule;
5 |
6 | beforeEach(() => {
7 | coreModule = new CoreModule();
8 | });
9 |
10 | it('should create an instance', () => {
11 | expect(coreModule).toBeTruthy();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/app/core/core.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { RouterModule } from '@angular/router';
4 |
5 | import { FooterComponent } from './components/footer/footer.component';
6 | import { HeaderComponent } from './components/header/header.component';
7 | import { HomeComponent } from './components/home/home.component';
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule,
12 | RouterModule
13 | ],
14 | declarations: [
15 | HeaderComponent,
16 | FooterComponent,
17 | HomeComponent
18 | ],
19 | exports: [
20 | HeaderComponent,
21 | FooterComponent
22 | ]
23 | })
24 | export class CoreModule {
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/core/interceptors/api.interceptor.spec.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
2 | import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
3 | import { TestBed } from '@angular/core/testing';
4 |
5 | import { environment } from '../../../environments/environment';
6 | import { ApiInterceptor } from './api.interceptor';
7 |
8 | describe('ApiInterceptor', () => {
9 | let httpClient: HttpClient;
10 | let httpMock: HttpTestingController;
11 |
12 | beforeEach(() => {
13 | TestBed.configureTestingModule({
14 | imports: [HttpClientTestingModule],
15 | providers: [
16 | { provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true }
17 | ]
18 | });
19 | httpClient = TestBed.get(HttpClient);
20 | httpMock = TestBed.get(HttpTestingController);
21 | });
22 |
23 | afterEach(() => httpMock.verify());
24 |
25 | it('should add correct Content-Security-Policy', () => {
26 | const header = 'Content-Security-Policy';
27 | const expectedHeader = `frame-ancestors ${environment.security.allowedOrigins}`;
28 |
29 | httpClient.get('/').subscribe(() => {});
30 | httpMock
31 | .expectOne(req => (req.headers.has(header) && req.headers.get(header) === expectedHeader))
32 | .flush({});
33 | });
34 |
35 | it('should add correct X-Frame-Options', () => {
36 | const header = 'X-Frame-Options';
37 | const expectedHeader = `ALLOW-FROM ${environment.security.allowedOrigins}`;
38 |
39 | httpClient.get('/').subscribe(() => {});
40 | httpMock
41 | .expectOne(req => (req.headers.has(header) && req.headers.get(header) === expectedHeader))
42 | .flush({});
43 | });
44 |
45 | it('should add correct X-XSS-Protection', () => {
46 | const header = 'X-XSS-Protection';
47 | const expectedHeader = '1; mode=block';
48 |
49 | httpClient.get('/').subscribe(() => {});
50 | httpMock
51 | .expectOne(req => (req.headers.has(header) && req.headers.get(header) === expectedHeader))
52 | .flush({});
53 | });
54 | });
55 |
--------------------------------------------------------------------------------
/src/app/core/interceptors/api.interceptor.ts:
--------------------------------------------------------------------------------
1 | import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import { Observable } from 'rxjs';
4 |
5 | import { environment } from '../../../environments/environment';
6 |
7 | @Injectable()
8 | export class ApiInterceptor implements HttpInterceptor {
9 |
10 | private baseUrl = environment.baseApiUrl;
11 |
12 | intercept(req: HttpRequest, next: HttpHandler): Observable> {
13 | const apiUrl = `${this.baseUrl}/${req.url}`;
14 | const parsedApiUrl = apiUrl.replace('///', '/').replace('//', '/');
15 |
16 | req = req.clone({
17 | url: parsedApiUrl,
18 | setHeaders: {
19 | 'Content-Security-Policy': `frame-ancestors ${environment.security.allowedOrigins}`,
20 | 'X-Frame-Options': `ALLOW-FROM ${environment.security.allowedOrigins}`,
21 | 'X-XSS-Protection': '1; mode=block'
22 | }
23 | });
24 |
25 | return next.handle(req);
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/core/interfaces/app-config.interface.ts:
--------------------------------------------------------------------------------
1 | export interface AppConfig {
2 | appTitle: string;
3 | browserTabTitleDelimiter: string;
4 | defaultLanguage: string;
5 | availableLanguages: string[];
6 | }
7 |
--------------------------------------------------------------------------------
/src/app/core/interfaces/app-environment.interface.ts:
--------------------------------------------------------------------------------
1 | export interface AppEnvironment {
2 | production: boolean;
3 | baseApiUrl: string;
4 | security: {
5 | allowedOrigins: string;
6 | };
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/core/interfaces/router-config.interface.ts:
--------------------------------------------------------------------------------
1 | import { Params } from '@angular/router';
2 |
3 | export interface RouterConfig {
4 | users: Params | any;
5 | }
6 |
7 |
--------------------------------------------------------------------------------
/src/app/core/interfaces/translations.interface.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Translations Modal in one place
3 | *
4 | * Keys should be as snake_case to distinguish them from classes properties in components and their views
5 | */
6 | export interface Translations {
7 | hello_world: string;
8 | users: string;
9 | home: string;
10 | language: string;
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/features/user/user.component.html:
--------------------------------------------------------------------------------
1 |
2 | user works!
3 |
4 |
--------------------------------------------------------------------------------
/src/app/features/user/user.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/app/features/user/user.component.scss
--------------------------------------------------------------------------------
/src/app/features/user/user.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserComponent } from './user.component';
4 |
5 | describe('UserComponent', () => {
6 | let component: UserComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ UserComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(UserComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/features/user/user.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-user',
5 | templateUrl: './user.component.html',
6 | styleUrls: ['./user.component.scss']
7 | })
8 | export class UserComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/features/user/user.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { UserComponent } from './user.component';
4 |
5 | @NgModule({
6 | imports: [
7 | CommonModule
8 | ],
9 | declarations: [UserComponent],
10 | exports: [UserComponent]
11 | })
12 | export class UserModule { }
13 |
--------------------------------------------------------------------------------
/src/app/lazy/users/users-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | import {AppController} from '../../app.controller';
5 | import { UsersComponent } from './users.component';
6 |
7 | const routes: Routes = [
8 | {
9 | path: '',
10 | component: UsersComponent,
11 | data: {
12 | title: AppController.trans().users
13 | }
14 | }
15 | ];
16 |
17 | @NgModule({
18 | imports: [RouterModule.forChild(routes)],
19 | exports: [RouterModule]
20 | })
21 | export class UsersRoutingModule { }
22 |
--------------------------------------------------------------------------------
/src/app/lazy/users/users.component.html:
--------------------------------------------------------------------------------
1 |
2 | users works!
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/lazy/users/users.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/app/lazy/users/users.component.scss
--------------------------------------------------------------------------------
/src/app/lazy/users/users.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { UsersComponent } from './users.component';
5 |
6 | describe('UsersComponent', () => {
7 | let component: UsersComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [UsersComponent],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA]
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(UsersComponent);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/src/app/lazy/users/users.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-users',
5 | templateUrl: './users.component.html',
6 | styleUrls: ['./users.component.scss']
7 | })
8 | export class UsersComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/lazy/users/users.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { UsersModule } from './users.module';
2 |
3 | describe('UsersModule', () => {
4 | let usersModule: UsersModule;
5 |
6 | beforeEach(() => {
7 | usersModule = new UsersModule();
8 | });
9 |
10 | it('should create an instance', () => {
11 | expect(usersModule).toBeTruthy();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/app/lazy/users/users.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 |
4 | import { UserModule } from '../../features/user/user.module';
5 | import { UsersRoutingModule } from './users-routing.module';
6 | import { UsersComponent } from './users.component';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | UserModule,
12 | UsersRoutingModule
13 | ],
14 | declarations: [UsersComponent]
15 | })
16 | export class UsersModule { }
17 |
18 |
--------------------------------------------------------------------------------
/src/app/shared/shared.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { SharedModule } from './shared.module';
2 |
3 | describe('SharedModule', () => {
4 | let sharedModule: SharedModule;
5 |
6 | beforeEach(() => {
7 | sharedModule = new SharedModule();
8 | });
9 |
10 | it('should create an instance', () => {
11 | expect(sharedModule).toBeTruthy();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 |
4 | @NgModule({
5 | imports: [
6 | CommonModule
7 | ],
8 | declarations: []
9 | })
10 | export class SharedModule { }
11 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/images/contents/angular-best-boilerplate-app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/assets/images/contents/angular-best-boilerplate-app.png
--------------------------------------------------------------------------------
/src/assets/images/contents/angular-best-boilerplate-components.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/assets/images/contents/angular-best-boilerplate-components.png
--------------------------------------------------------------------------------
/src/assets/images/contents/angular-best-boilerplate-general.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/assets/images/contents/angular-best-boilerplate-general.png
--------------------------------------------------------------------------------
/src/assets/images/contents/angular-best-boilerplate-state.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/assets/images/contents/angular-best-boilerplate-state.png
--------------------------------------------------------------------------------
/src/assets/images/contents/angular-best-boilerplate-workflow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/assets/images/contents/angular-best-boilerplate-workflow.png
--------------------------------------------------------------------------------
/src/environments/environment.dev.ts:
--------------------------------------------------------------------------------
1 | import { AppEnvironment } from '../app/core/interfaces/app-environment.interface';
2 |
3 | export const environment: AppEnvironment = {
4 | production: true,
5 | baseApiUrl: 'https://dev.example.com/api/v1',
6 | security: {
7 | allowedOrigins: 'https://dev.example.com'
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | import { AppEnvironment } from '../app/core/interfaces/app-environment.interface';
2 |
3 | export const environment: AppEnvironment = {
4 | production: true,
5 | baseApiUrl: 'https://example.com/api/v1',
6 | security: {
7 | allowedOrigins: 'https://example.com'
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/src/environments/environment.stage.ts:
--------------------------------------------------------------------------------
1 | import { AppEnvironment } from '../app/core/interfaces/app-environment.interface';
2 |
3 | export const environment: AppEnvironment = {
4 | production: true,
5 | baseApiUrl: 'https://stage.example.com/api/v1',
6 | security: {
7 | allowedOrigins: 'https://stage.example.com'
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | import { AppEnvironment } from '../app/core/interfaces/app-environment.interface';
6 |
7 | export const environment: AppEnvironment = {
8 | production: false,
9 | baseApiUrl: 'https://dev.example.com/api/v1',
10 | // baseAPI: PROXY_PREFIX_API_URL // using by http proxy,
11 | security: {
12 | allowedOrigins: 'https://dev.example.com',
13 | // allowedOrigins: 'https://localhost:4200'
14 | }
15 | };
16 |
17 | /*
18 | * For easier debugging in development mode, you can import the following file
19 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
20 | *
21 | * This import should be commented out in production mode because it will have a negative impact
22 | * on performance if an error is thrown.
23 | */
24 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
25 |
--------------------------------------------------------------------------------
/src/environments/environment.uat.ts:
--------------------------------------------------------------------------------
1 | import { AppEnvironment } from '../app/core/interfaces/app-environment.interface';
2 |
3 | export const environment: AppEnvironment = {
4 | production: true,
5 | baseApiUrl: 'https://uat.example.com/api/v1',
6 | security: {
7 | allowedOrigins: 'https://uat.example.com'
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | AngularBestBoilerplate
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage'),
20 | reports: ['html', 'lcovonly'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
--------------------------------------------------------------------------------
/src/lib/js/modernizr-touch-events.js:
--------------------------------------------------------------------------------
1 | /*! modernizr 3.6.0 (Custom Build) | MIT *
2 | * https://modernizr.com/download/?-touchevents-setclasses !*/
3 | !function(e,n,t){function o(e){var n=u.className,t=Modernizr._config.classPrefix||"";if(p&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),p?u.className.baseVal=n:u.className=n)}function s(e,n){return typeof e===n}function a(){var e,n,t,o,a,i,r;for(var l in c)if(c.hasOwnProperty(l)){if(e=[],n=c[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t console.error(err));
13 |
14 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | /**
5 | * Web Animations `@angular/platform-browser/animations`
6 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
7 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
8 | **/
9 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
10 |
11 | /**
12 | * By default, zone.js will patch all possible macroTask and DomEvents
13 | * user can disable parts of macroTask/DomEvents patch by setting following flags
14 | */
15 |
16 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
17 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
18 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
19 |
20 | /*
21 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
22 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
23 | */
24 | // (window as any).__Zone_enable_cross_context_check = true;
25 |
26 | /***************************************************************************************************
27 | * Zone JS is required by default for Angular itself.
28 | */
29 | import 'zone.js/dist/zone'; // Included with Angular CLI.
30 |
31 |
32 |
33 | /***************************************************************************************************
34 | * APPLICATION IMPORTS
35 | */
36 |
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import "styles/main";
3 |
--------------------------------------------------------------------------------
/src/styles/_reset.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Paste here your styles reset
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/_settings.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Shared SCSS settings for the global styles and components styles
3 | */
4 | @import "settings/variables";
5 | @import "settings/media";
6 | @import "settings/extendables";
7 | @import "settings/mixins";
8 | @import "settings/paths";
9 |
--------------------------------------------------------------------------------
/src/styles/general/_animations.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Animations
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/general/_backgrounds.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Backgrounds
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/general/_buttons.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Buttons
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/general/_decorations.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Custom Decorations
3 | */
4 | .border {
5 |
6 | &--default {
7 | border: 1px solid gray;
8 | }
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/src/styles/general/_forms.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Forms
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/general/_icons.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Icons
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/general/_images.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Images
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/general/_layout.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Layout and Grid System
3 | */
4 |
5 | .float-left {
6 | float: left;
7 | }
8 |
9 | .float-right {
10 | float: right;
11 | }
12 |
13 | .clearfix {
14 |
15 | &:after {
16 | content: '';
17 | clear: both;
18 | display: block;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/styles/general/_typography.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Typography
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/main.scss:
--------------------------------------------------------------------------------
1 | // Settings
2 | @import "reset";
3 | @import "settings";
4 |
5 | // General
6 | @import "general/animations";
7 | @import "general/backgrounds";
8 | @import "general/buttons";
9 | @import "general/decorations";
10 | @import "general/forms";
11 | @import "general/icons";
12 | @import "general/images";
13 | @import "general/layout";
14 | @import "general/typography";
15 |
16 | // Templates
17 | @import "templates/card";
18 | @import "templates/notifications";
19 | @import "templates/page";
20 |
21 | // Vendors
22 | //@import "vendors/*.scss";
23 |
--------------------------------------------------------------------------------
/src/styles/settings/_extendables.scss:
--------------------------------------------------------------------------------
1 | // %your-abstract-scss-class to use by @extend
2 |
--------------------------------------------------------------------------------
/src/styles/settings/_fonts.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Fonts Declarations
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/settings/_media.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * MEDIA & BREAKPOINTS & RELEVANT SIZES - Use the Mobile First approach!
3 | * Resolution -|- Usage - https://www.rapidtables.com/web/dev/screen-resolution-statistics.html
4 | * - 1366x768 - 19.1%
5 | * - 1920x1080 - 9.4%
6 | * - 1280x800 - 8.5%
7 | * - 320x568 - 6.4%
8 | * - 1440x900 - 5.7%
9 | * - others
10 | */
11 | $media-xxs: 320px; // iPhone 5
12 | $media-xxs-standard: 360px;// SmartPhone
13 | $media-xs: 576px; // Bootstrap v4
14 | $media-sm: 768px; // Bootstrap v4
15 | $media-lg: 992px; // Bootstrap v4
16 | $media-xl: 1200px; // Bootstrap v4
17 | $media-xl-screen: 1920px;
18 | $media-notebook: 1280px;
19 | $media-laptop: 1366px;
20 | $media-macbook: 1440px;
21 | $media-monitor: 1600px;
22 |
--------------------------------------------------------------------------------
/src/styles/settings/_mixins.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global Mixins, i.e. box-shadow
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/settings/_paths.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS urls related to the assets directory
3 | */
4 | // $path-logo-svg: url('/assets/images/logo.svg')
5 | // $path-logo-png: url('/assets/images/logo.png')
6 | // $path- ...your paths
7 |
--------------------------------------------------------------------------------
/src/styles/settings/_variables.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * COLORS
3 | */
4 | $color-default-font: black;
5 | $color-red-error: red;
6 | $color-red-bg: rgba(red, .5);
7 | // ...your custom colors
8 |
9 | /**
10 | * SPACING: MARGINS & PADDING
11 | */
12 | $space-xs: 3px;
13 | $space-sm: 5px;
14 | $space-md: 10px;
15 | $space-lg: 15px;
16 | $space-xl: 15px;
17 |
18 | /**
19 | * FONTS
20 | */
21 | $font-size-xs: .5rem;
22 | $font-size-sm: .6rem;
23 | $font-size-md: .75rem;
24 | $font-size-default: 1rem;
25 | $font-size-lg: 1.2rem;
26 | $font-size-xl: 1.4rem;
27 |
28 | /**
29 | * Z-INDEXES & LAYERS
30 | */
31 | $z-index-bottom: -1;
32 | $z-index-default: 0;
33 | $z-index-top: 1;
34 | $z-index-dropdown: 10;
35 | $z-index-menu: 1000;
36 | $z-index-overlay: 1100;
37 | $z-index-dialog: 1200;
38 | $z-index-notification: 1300;
39 |
40 | /**
41 | * TRANSITIONS & EFFECTS
42 | */
43 | $transition-effect-default: .3s ease;
44 | $transition-bezier: .3s cubic-bezier(0, 0, 0.2, 1);
45 |
--------------------------------------------------------------------------------
/src/styles/templates/_card.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Card to use everywhere
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/templates/_notifications.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Global notifications to use everywhere
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/templates/_page.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Page template to use everywhere
3 | */
4 |
--------------------------------------------------------------------------------
/src/styles/vendors/_angular-material.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bartuck/angular-best-boilerplate/480a621ead3d62d30e0e12c8dfd9f1973dc935e0/src/styles/vendors/_angular-material.scss
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import { getTestBed } from '@angular/core/testing';
4 | import {
5 | platformBrowserDynamicTesting,
6 | BrowserDynamicTestingModule
7 | } from '@angular/platform-browser-dynamic/testing';
8 | import 'zone.js/dist/zone-testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/test/components/dummy-app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | template: ``
5 | })
6 | export class DummyAppComponent {
7 | }
8 |
--------------------------------------------------------------------------------
/src/test/components/dummy-home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | template: `Home`
5 | })
6 | export class DummyHomeComponent {
7 | }
8 |
--------------------------------------------------------------------------------
/src/test/components/dummy-login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | template: `Login`
5 | })
6 | export class DummyLoginComponent {
7 | }
8 |
--------------------------------------------------------------------------------
/src/test/components/dummy-search.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | template: `Search`
5 | })
6 | export class DummySearchComponent {
7 | }
8 |
--------------------------------------------------------------------------------
/src/test/mocks/routes.mock.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 |
3 | import { AppComponent } from '../../app/app.component';
4 | import { DummyLoginComponent } from '../components/dummy-login.component';
5 | import { DummySearchComponent } from '../components/dummy-search.component';
6 |
7 | export const testingRoutes: Routes = [
8 | { path: '', component: AppComponent, data: { title: 'Home'} },
9 | { path: 'search', component: DummySearchComponent, data: { title: 'Search'} },
10 | { path: 'log-in', component: DummyLoginComponent, data: { title: 'Login'} }
11 | ];
12 |
--------------------------------------------------------------------------------
/src/test/mocks/users.mock.ts:
--------------------------------------------------------------------------------
1 | export const USERS_MOCK = [
2 | {
3 | name: 'User Name 1',
4 | email: 'user1@example.com'
5 | },
6 | {
7 | name: 'User Name 2',
8 | email: 'user2@example.com'
9 | },
10 | ];
11 |
--------------------------------------------------------------------------------
/src/test/spies/example-service.spy.ts:
--------------------------------------------------------------------------------
1 | export const EXAMPLE_SERVICE_SPY = jasmine.createSpyObj('ExampleService', ['get']);
2 |
--------------------------------------------------------------------------------
/src/test/stubs/example-service.stub.ts:
--------------------------------------------------------------------------------
1 | export class ExampleServiceStub {
2 |
3 | private name: string = 'ExampleServiceStub';
4 |
5 | get(): string {
6 | return `Hello, ${this.name}`;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/translations/en_GB.const.ts:
--------------------------------------------------------------------------------
1 | import { Translations } from '../app/core/interfaces/translations.interface';
2 |
3 | export const en_GB: Translations = {
4 | hello_world: 'Hello World',
5 | users: 'Users',
6 | home: 'Home',
7 | language: 'Language'
8 | };
9 |
--------------------------------------------------------------------------------
/src/translations/pl_PL.const.ts:
--------------------------------------------------------------------------------
1 | import { Translations } from '../app/core/interfaces/translations.interface';
2 |
3 | export const pl_PL: Translations = {
4 | hello_world: 'Witaj Świecie!',
5 | users: 'Użytkownicy',
6 | home: 'Home',
7 | language: 'Język'
8 | };
9 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "types": []
6 | },
7 | "exclude": [
8 | "test.ts",
9 | "**/*.spec.ts",
10 | "**/*.mock.ts",
11 | "**/*.spy.ts",
12 | "**/*.stub.ts",
13 | "test/**"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "test.ts",
12 | "polyfills.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "app",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "app",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/web.config:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "downlevelIteration": true,
6 | "importHelpers": true,
7 | "outDir": "./dist/out-tsc",
8 | "sourceMap": true,
9 | "declaration": false,
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | "emitDecoratorMetadata": true,
13 | "experimentalDecorators": true,
14 | "target": "es2015",
15 | "typeRoots": [
16 | "node_modules/@types"
17 | ],
18 | "lib": [
19 | "es2017",
20 | "dom"
21 | ]
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-blacklist": [
20 | true,
21 | "rxjs/Rx"
22 | ],
23 | "import-spacing": true,
24 | "indent": [
25 | true,
26 | "spaces"
27 | ],
28 | "interface-over-type-literal": true,
29 | "label-position": true,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-arg": true,
47 | "no-bitwise": true,
48 | "no-console": [
49 | true,
50 | "debug",
51 | "info",
52 | "time",
53 | "timeEnd",
54 | "trace"
55 | ],
56 | "no-construct": true,
57 | "no-debugger": true,
58 | "no-duplicate-super": true,
59 | "no-empty": false,
60 | "no-empty-interface": true,
61 | "no-eval": true,
62 | "no-inferrable-types": [
63 | true,
64 | "ignore-params"
65 | ],
66 | "no-misused-new": true,
67 | "no-non-null-assertion": true,
68 | "no-redundant-jsdoc": true,
69 | "no-shadowed-variable": true,
70 | "no-string-literal": false,
71 | "no-string-throw": true,
72 | "no-switch-case-fall-through": true,
73 | "no-trailing-whitespace": true,
74 | "no-unnecessary-initializer": true,
75 | "no-unused-expression": true,
76 | "no-use-before-declare": true,
77 | "no-var-keyword": true,
78 | "object-literal-sort-keys": false,
79 | "one-line": [
80 | true,
81 | "check-open-brace",
82 | "check-catch",
83 | "check-else",
84 | "check-whitespace"
85 | ],
86 | "ordered-imports": [
87 | true,
88 | {
89 | "import-sources-order": "lowercase-last",
90 | "named-imports-order": "lowercase-first"
91 | }
92 | ],
93 | "prefer-const": true,
94 | "quotemark": [
95 | true,
96 | "single"
97 | ],
98 | "radix": true,
99 | "semicolon": [
100 | true,
101 | "always"
102 | ],
103 | "triple-equals": [
104 | true,
105 | "allow-null-check"
106 | ],
107 | "typedef-whitespace": [
108 | true,
109 | {
110 | "call-signature": "nospace",
111 | "index-signature": "nospace",
112 | "parameter": "nospace",
113 | "property-declaration": "nospace",
114 | "variable-declaration": "nospace"
115 | }
116 | ],
117 | "unified-signatures": true,
118 | "variable-name": false,
119 | "whitespace": [
120 | true,
121 | "check-branch",
122 | "check-decl",
123 | "check-operator",
124 | "check-separator",
125 | "check-type"
126 | ],
127 | "no-output-on-prefix": true,
128 | "no-inputs-metadata-property": true,
129 | "no-outputs-metadata-property": true,
130 | "no-host-metadata-property": true,
131 | "no-input-rename": true,
132 | "no-output-rename": true,
133 | "use-lifecycle-interface": true,
134 | "use-pipe-transform-interface": true,
135 | "component-class-suffix": true,
136 | "directive-class-suffix": true
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
7 |