3 |
5 |
6 | Projects
4 |
8 |
10 |
2 |
17 |
--------------------------------------------------------------------------------
/src/app/modules/home/page/project-item/project-container.component.scss-theme.scss:
--------------------------------------------------------------------------------
1 | @use '@angular/material' as mat;
2 | @import '@angular/material/theming';
3 |
4 | @mixin my-project-container-component-theme($theme) {
5 | $accent: map-get($theme, accent);
6 |
7 | .active {
8 | color: mat.get-color-from-palette($accent, default-contrast);
9 | background-color: mat.get-color-from-palette($accent);
10 |
11 | &:hover {
12 | color: mat.get-color-from-palette($accent, default-contrast);
13 | background-color: mat.get-color-from-palette($accent);
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/data/service/project.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Observable } from 'rxjs';
3 |
4 | import { Project } from '../schema/project';
5 | import { JsonApiService } from './json-api.service';
6 |
7 | @Injectable({
8 | providedIn: 'root'
9 | })
10 | export class ProjectService {
11 | constructor(private jsonApiService: JsonApiService) {}
12 |
13 | getAll(): Observable
3 |
16 |
4 |
15 |
5 |
14 |
6 |
13 |
7 |
8 |
10 |
12 |
8 |
10 |
2 |
--------------------------------------------------------------------------------
/src/app/modules/about/page/about/about.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 |
3 | import { AboutComponent } from './about.component';
4 |
5 | describe('AboutComponent', () => {
6 | let component: AboutComponent;
7 | let fixture: ComponentFixtureAngular Folder Structure
3 | 4 |5 | Based on best practices from the community, other github Angular projects, 6 | developer experience from production Angular projects, and contributors, 7 | this project goal is to create a skeleton structure which is flexible 8 | for projects big or small. 9 |
10 | 11 |12 | This project defines directory structure in an Angular application and it 13 | is a working application. The code for this project can be found at 14 | 15 | https://github.com/mathisGarberg/angular-folder-structure 16 | 17 |
18 |11 | The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. 12 | A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally 13 | bred for hunting. 14 |
15 |
2 |
28 |
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Mathis Garberg
4 | Copyright (c) 2019 Tom H Anderson
2 | Username: Mathis \\
3 | Password: 12345
4 |
5 |
6 |
7 | {{ error }}
8 |
9 |
10 |
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Angular Folder Structure - Highly Scalable
2 | ========================================
3 |
4 | 
5 |
6 | This project is inspired by the article on ITNEXT called
7 | "[How to define a highly scalable folder structure for your Angular project](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7)"
8 | by Mathis Garberg. Based on best practices from the community, other github
9 | Angular projects, developer experience from production Angular projects, and
10 | contributors to this repository, this project's goal is to *create a skeleton
11 | structure which is flexible for projects big or small*.
12 |
13 | 
14 |
15 | Tree Structure
16 | --------------
17 |
18 | This tree represents the directories this repository proposes be added to a
19 | default Angular application.
20 |
21 | ```
22 | .
23 | ├── media
24 | └── src
25 | ├── app
26 | │ ├── core
27 | │ ├── data
28 | │ ├── layout
29 | │ ├── module
30 | │ └── shared
31 | └── styles
32 | ```
33 |
34 | Documentation
35 | -------------
36 |
37 | [Read The Documentation](https://angular-folder-structure.readthedocs.io/en/latest/#)
38 | for details on each part of the directory structure.
39 |
40 | Demonstration Application
41 | -------------------------
42 |
43 | [See The Application](https://mathisgarberg.github.io/angular-folder-structure/)
44 | in action.
45 |
--------------------------------------------------------------------------------
/src/app/layout/content-layout/content-layout.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { OverlayContainer } from '@angular/cdk/overlay';
3 | import { map } from 'rxjs/operators';
4 |
5 | import { themes } from '@core/constants/themes';
6 | import { ThemeService } from '@core/service/theme.service';
7 |
8 | @Component({
9 | selector: 'app-content-layout',
10 | templateUrl: './content-layout.component.html',
11 | styleUrls: ['./content-layout.component.scss']
12 | })
13 | export class ContentLayoutComponent implements OnInit {
14 | currentTheme: string;
15 |
16 | currentActiveTheme$ = this.themeService.getDarkTheme().pipe(
17 | map((isDarkTheme: boolean) => {
18 | const [lightTheme, darkTheme] = themes;
19 |
20 | this.currentTheme = isDarkTheme ? lightTheme.name : darkTheme.name;
21 |
22 | if (this.overlayContainer) {
23 | const overlayContainerClasses = this.overlayContainer.getContainerElement()
24 | .classList;
25 | const themeClassesToRemove = Array.from(
26 | overlayContainerClasses
27 | ).filter((item: string) => item.includes('-theme'));
28 | if (themeClassesToRemove.length) {
29 | overlayContainerClasses.remove(...themeClassesToRemove);
30 | }
31 | overlayContainerClasses.add(this.currentTheme);
32 | }
33 |
34 | return this.currentTheme;
35 | })
36 | );
37 |
38 | private overlayContainer: OverlayContainer;
39 |
40 | constructor(private themeService: ThemeService) {}
41 |
42 | ngOnInit(): void {
43 | if (this.overlayContainer) {
44 | this.overlayContainer
45 | .getContainerElement()
46 | .classList.add(this.currentTheme);
47 | }
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { AuthLayoutComponent } from './layout/auth-layout/auth-layout.component';
4 | import { ContentLayoutComponent } from './layout/content-layout/content-layout.component';
5 | import { NoAuthGuard } from '@core/guard/no-auth.guard';
6 |
7 | const routes: Routes = [
8 | {
9 | path: '',
10 | redirectTo: '/auth/login',
11 | pathMatch: 'full'
12 | },
13 | {
14 | path: '',
15 | component: ContentLayoutComponent,
16 | canActivate: [NoAuthGuard], // Should be replaced with actual auth guard
17 | children: [
18 | {
19 | path: 'dashboard',
20 | loadChildren: () =>
21 | import('@modules/home/home.module').then(m => m.HomeModule)
22 | },
23 | {
24 | path: 'about',
25 | loadChildren: () =>
26 | import('@modules/about/about.module').then(m => m.AboutModule)
27 | },
28 | {
29 | path: 'contact',
30 | loadChildren: () =>
31 | import('@modules/contact/contact.module').then(m => m.ContactModule)
32 | }
33 | ]
34 | },
35 | {
36 | path: 'auth',
37 | component: AuthLayoutComponent,
38 | loadChildren: () =>
39 | import('@modules/auth/auth.module').then(m => m.AuthModule)
40 | },
41 | // Fallback when no prior routes is matched
42 | { path: '**', redirectTo: '/auth/login', pathMatch: 'full' }
43 | ];
44 |
45 | @NgModule({
46 | imports: [
47 | RouterModule.forRoot(routes, {
48 | useHash: true,
49 | relativeLinkResolution: 'legacy'
50 | })
51 | ],
52 | exports: [RouterModule],
53 | providers: []
54 | })
55 | export class AppRoutingModule {}
56 |
--------------------------------------------------------------------------------
/src/app/modules/auth/page/login/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import {
4 | UntypedFormGroup,
5 | UntypedFormBuilder,
6 | UntypedFormControl
7 | } from '@angular/forms';
8 | import { tap, delay, finalize, catchError } from 'rxjs/operators';
9 | import { of, Subscription } from 'rxjs';
10 |
11 | import { AuthService } from '@core/service/auth.service';
12 |
13 | @Component({
14 | selector: 'app-login',
15 | templateUrl: './login.component.html',
16 | styleUrls: ['./login.component.scss']
17 | })
18 | export class LoginComponent implements OnDestroy {
19 | error: string;
20 | isLoading: boolean;
21 | loginForm: UntypedFormGroup;
22 |
23 | private sub = new Subscription();
24 |
25 | constructor(
26 | private formBuilder: UntypedFormBuilder,
27 | private router: Router,
28 | private authService: AuthService
29 | ) {
30 | this.buildForm();
31 | }
32 |
33 | get f() {
34 | return this.loginForm.controls;
35 | }
36 |
37 | login() {
38 | this.isLoading = true;
39 |
40 | const credentials = this.loginForm.value;
41 |
42 | this.sub = this.authService
43 | .login(credentials)
44 | .pipe(
45 | delay(1500),
46 | tap(() => this.router.navigate(['/dashboard/home'])),
47 | finalize(() => (this.isLoading = false)),
48 | catchError(error => of((this.error = error)))
49 | )
50 | .subscribe();
51 | }
52 |
53 | ngOnDestroy(): void {
54 | this.sub.unsubscribe();
55 | }
56 |
57 | private buildForm(): void {
58 | this.loginForm = new UntypedFormGroup({
59 | username: new UntypedFormControl(''),
60 | password: new UntypedFormControl('')
61 | });
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/app/modules/home/page/project-item/project-item.component.html:
--------------------------------------------------------------------------------
1 |
2 |
41 |
--------------------------------------------------------------------------------
/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4 | import { RouterModule } from '@angular/router';
5 |
6 | import { MaterialModule } from './material.module';
7 |
8 | import {
9 | FontAwesomeModule,
10 | FaIconLibrary
11 | } from '@fortawesome/angular-fontawesome';
12 | import {
13 | faPlus,
14 | faEdit,
15 | faTrash,
16 | faTimes,
17 | faCaretUp,
18 | faCaretDown,
19 | faExclamationTriangle,
20 | faFilter,
21 | faTasks,
22 | faCheck,
23 | faSquare,
24 | faLanguage,
25 | faPaintBrush,
26 | faLightbulb,
27 | faWindowMaximize,
28 | faStream,
29 | faBook,
30 | faUserCircle,
31 | faAsterisk
32 | } from '@fortawesome/free-solid-svg-icons';
33 | import { faMediumM, faGithub } from '@fortawesome/free-brands-svg-icons';
34 |
35 | import { ControlMessagesComponent } from './component/control-messages/control-messages.component';
36 | import { SpinnerComponent } from './component/spinner/spinner.component';
37 |
38 | @NgModule({
39 | imports: [
40 | CommonModule,
41 | FormsModule,
42 | ReactiveFormsModule,
43 | RouterModule,
44 | FontAwesomeModule
45 | ],
46 | declarations: [ControlMessagesComponent, SpinnerComponent],
47 | exports: [
48 | CommonModule,
49 | FormsModule,
50 | ReactiveFormsModule,
51 | RouterModule,
52 | MaterialModule,
53 | FontAwesomeModule,
54 | ControlMessagesComponent,
55 | SpinnerComponent
56 | ]
57 | })
58 | export class SharedModule {
59 | constructor(faIconLibrary: FaIconLibrary) {
60 | faIconLibrary.addIcons(
61 | faGithub,
62 | faMediumM,
63 | faPlus,
64 | faEdit,
65 | faTrash,
66 | faTimes,
67 | faCaretUp,
68 | faCaretDown,
69 | faExclamationTriangle,
70 | faFilter,
71 | faTasks,
72 | faCheck,
73 | faSquare,
74 | faLanguage,
75 | faPaintBrush,
76 | faLightbulb,
77 | faWindowMaximize,
78 | faStream,
79 | faBook,
80 | faUserCircle,
81 | faAsterisk
82 | );
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/src/app/shared/material.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { MatButtonModule } from '@angular/material/button';
4 | import { MatToolbarModule } from '@angular/material/toolbar';
5 | import { MatMenuModule } from '@angular/material/menu';
6 | import { MatSelectModule } from '@angular/material/select';
7 | import { MatTabsModule } from '@angular/material/tabs';
8 | import { MatCheckboxModule } from '@angular/material/checkbox';
9 | import { MatListModule } from '@angular/material/list';
10 | import { MatIconModule } from '@angular/material/icon';
11 | import { MatNativeDateModule } from '@angular/material/core';
12 | import { MatSidenavModule } from '@angular/material/sidenav';
13 | import { MatInputModule } from '@angular/material/input';
14 | import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
15 | import { MatChipsModule } from '@angular/material/chips';
16 | import { MatCardModule } from '@angular/material/card';
17 | import { MatSlideToggleModule } from '@angular/material/slide-toggle';
18 | import { MatTooltipModule } from '@angular/material/tooltip';
19 | import { MatSnackBarModule } from '@angular/material/snack-bar';
20 | import { MatDividerModule } from '@angular/material/divider';
21 | import { MatDatepickerModule } from '@angular/material/datepicker';
22 |
23 | @NgModule({
24 | declarations: [],
25 | imports: [
26 | MatButtonModule,
27 | MatToolbarModule,
28 | MatMenuModule,
29 | MatSelectModule,
30 | MatTabsModule,
31 | MatInputModule,
32 | MatProgressSpinnerModule,
33 | MatChipsModule,
34 | MatSidenavModule,
35 | MatCheckboxModule,
36 | MatCardModule,
37 | MatListModule,
38 | MatIconModule,
39 | MatTooltipModule,
40 | MatSnackBarModule,
41 | MatSlideToggleModule,
42 | MatDividerModule,
43 | MatDatepickerModule,
44 | MatNativeDateModule
45 | ],
46 | exports: [
47 | MatButtonModule,
48 | MatToolbarModule,
49 | MatMenuModule,
50 | MatSelectModule,
51 | MatTabsModule,
52 | MatInputModule,
53 | MatProgressSpinnerModule,
54 | MatChipsModule,
55 | MatSidenavModule,
56 | MatCheckboxModule,
57 | MatCardModule,
58 | MatListModule,
59 | MatIconModule,
60 | MatTooltipModule,
61 | MatSnackBarModule,
62 | MatSlideToggleModule,
63 | MatDividerModule,
64 | MatDatepickerModule,
65 | MatNativeDateModule
66 | ]
67 | })
68 | export class MaterialModule {}
69 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /***************************************************************************************************
2 | * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
3 | */
4 | import '@angular/localize/init';
5 | /**
6 | * This file includes polyfills needed by Angular and is loaded before the app.
7 | * You can add your own extra polyfills to this file.
8 | *
9 | * This file is divided into 2 sections:
10 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
11 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
12 | * file.
13 | *
14 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
15 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
16 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
17 | *
18 | * Learn more in https://angular.io/guide/browser-support
19 | */
20 |
21 | /***************************************************************************************************
22 | * BROWSER POLYFILLS
23 | */
24 |
25 | /** IE10 and IE11 requires the following for the Reflect API. */
26 | import 'core-js/es6/reflect';
27 |
28 | /** Evergreen browsers require these. **/
29 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
30 | import 'core-js/es7/reflect'; // Run `npm install --save web-animations-js`.
31 |
32 | /**
33 | * By default, zone.js will patch all possible macroTask and DomEvents
34 | * user can disable parts of macroTask/DomEvents patch by setting following flags
35 | */
36 |
37 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
38 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
39 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
40 |
41 | /*
42 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
43 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
44 | */
45 | // (window as any).__Zone_enable_cross_context_check = true;
46 |
47 | /***************************************************************************************************
48 | * Zone JS is required by default for Angular itself.
49 | */
50 | import 'zone.js'; // Included with Angular CLI.
51 |
52 | /***************************************************************************************************
53 | * APPLICATION IMPORTS
54 | */
55 |
--------------------------------------------------------------------------------
/src/app/data/service/json/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "projects": [
3 | {
4 | "id": 1,
5 | "thumbnail": "https://images.unsplash.com/photo-1520769669658-f07657f5a307?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
6 | "title": "Visit Norway",
7 | "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
8 | },
9 | {
10 | "id": 2,
11 | "thumbnail": "https://images.unsplash.com/photo-1521109762031-b71a005c25b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
12 | "title": "Visit Norway",
13 | "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
14 | },
15 | {
16 | "id": 3,
17 | "thumbnail": "https://images.unsplash.com/photo-1531504060587-e6811129c0f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
18 | "title": "Visit Norway",
19 | "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
20 | },
21 | {
22 | "id": 4,
23 | "thumbnail": "https://images.unsplash.com/photo-1475066392170-59d55d96fe51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80",
24 | "title": "Visit Norway",
25 | "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
26 | },
27 | {
28 | "id": 5,
29 | "thumbnail": "https://images.unsplash.com/photo-1518124880777-cf8c82231ffb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1404&q=80",
30 | "title": "Visit Norway",
31 | "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
32 | }
33 | ]
34 | }
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-folder-structure",
3 | "version": "2.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "dev": "ng serve --aot",
9 | "build": "ng build",
10 | "test": "npm run lint && ng test --configuration=test",
11 | "lint": "npx ng lint angular-folder-structure",
12 | "e2e": "ng e2e",
13 | "watch": "ng test --configuration=test --browsers ChromeHeadless --watch",
14 | "build:prod": "ng build --configuration production --vendor-chunk",
15 | "clean": "rimraf ./dist/",
16 | "format:write": "prettier {src,e2e,cypress}/**/*.{ts,json,md,scss} --write",
17 | "format:test": "prettier {src,e2e,cypress}/**/*.{ts,json,md,scss} --list-different",
18 | "analyze": "npm run clean && npm run build:prod -- --stats-json && webpack-bundle-analyzer ./dist/stats.json",
19 | "compodoc": "compodoc -p src/tsconfig.app.json"
20 | },
21 | "husky": {
22 | "hooks": {
23 | "pre-commit": "npm run lint"
24 | }
25 | },
26 | "commitlint": {
27 | "extends": [
28 | "@commitlint/config-conventional"
29 | ]
30 | },
31 | "lint-staged": {
32 | "{src,e2e,cypress}/**/*.{ts,json,md,scss}": [
33 | "prettier --write",
34 | "git add"
35 | ]
36 | },
37 | "private": true,
38 | "dependencies": {
39 | "@angular/animations": "^14.1.0",
40 | "@angular/cdk": "^14.1.0",
41 | "@angular/common": "^14.1.0",
42 | "@angular/compiler": "^14.1.0",
43 | "@angular/core": "^14.1.0",
44 | "@angular/forms": "^14.1.0",
45 | "@angular/localize": "^14.1.0",
46 | "@angular/material": "^14.1.0",
47 | "@angular/platform-browser": "^14.1.0",
48 | "@angular/platform-browser-dynamic": "^14.1.0",
49 | "@angular/router": "^14.1.0",
50 | "@fortawesome/angular-fontawesome": "0.10.2",
51 | "@fortawesome/fontawesome-free": "6.1.1",
52 | "@fortawesome/fontawesome-svg-core": "6.1.1",
53 | "@fortawesome/free-brands-svg-icons": "6.1.1",
54 | "@fortawesome/free-solid-svg-icons": "6.1.1",
55 | "@testing-library/angular": "^12.1.0",
56 | "@testing-library/dom": "^5.6.1",
57 | "autoprefixer": "10.4.5",
58 | "bootstrap": "^4.6.0",
59 | "browser-detect": "^0.2.28",
60 | "core-js": "^2.6.12",
61 | "masonry-layout": "^4.2.2",
62 | "ngx-masonry": "13.0.0",
63 | "rxjs": "^7.5.6",
64 | "rxjs-compat": "^6.6.7",
65 | "tslib": "^2.3.1",
66 | "zone.js": "~0.11.4"
67 | },
68 | "devDependencies": {
69 | "@angular-devkit/build-angular": "~14.1.0",
70 | "@angular-devkit/core": "^14.1.0",
71 | "@angular-eslint/builder": "^14.0.2",
72 | "@angular-eslint/eslint-plugin": "14.0.2",
73 | "@angular-eslint/eslint-plugin-template": "14.0.2",
74 | "@angular-eslint/schematics": "14.0.2",
75 | "@angular-eslint/template-parser": "14.0.2",
76 | "@angular/cli": "^14.1.0",
77 | "@angular/compiler-cli": "^14.1.0",
78 | "@angular/language-service": "^14.1.0",
79 | "@commitlint/cli": "^17.0.3",
80 | "@commitlint/config-conventional": "^7.1.2",
81 | "@compodoc/compodoc": "^1.1.14",
82 | "@types/jasmine": "^3.9.0",
83 | "@types/jasminewd2": "^2.0.10",
84 | "@types/node": "^12.20.24",
85 | "@typescript-eslint/eslint-plugin": "^5.29.0",
86 | "@typescript-eslint/parser": "^5.29.0",
87 | "codelyzer": "^6.0.2",
88 | "eslint": "^8.18.0",
89 | "eslint-plugin-import": "2.26.0",
90 | "eslint-plugin-jsdoc": "39.3.3",
91 | "eslint-plugin-prefer-arrow": "1.2.3",
92 | "husky": "^1.1.3",
93 | "jasmine-core": "4.3.0",
94 | "jasmine-marbles": "^0.9.2",
95 | "jasmine-spec-reporter": "~5.0.0",
96 | "karma": "^6.3.16",
97 | "karma-chrome-launcher": "~3.1.0",
98 | "karma-coverage-istanbul-reporter": "~2.0.4",
99 | "karma-jasmine": "~4.0.0",
100 | "karma-jasmine-html-reporter": "^1.7.0",
101 | "karma-spec-reporter": "~0.0.32",
102 | "lint-staged": "^7.3.0",
103 | "prettier": "^1.19.1",
104 | "protractor": "^7.0.0",
105 | "rimraf": "^2.7.1",
106 | "ts-node": "~5.0.1",
107 | "typescript": "~4.6.4",
108 | "webpack-bundle-analyzer": "^4.5.0"
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular-folder-structure": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "application",
10 | "prefix": "app",
11 | "schematics": {
12 | "@schematics/angular:component": {
13 | "changeDetection": "OnPush",
14 | "style": "scss"
15 | }
16 | },
17 | "architect": {
18 | "build": {
19 | "builder": "@angular-devkit/build-angular:browser",
20 | "options": {
21 | "allowedCommonJsDependencies": [
22 | "rxjs-compat",
23 | "ngx-masonry"
24 | ],
25 | "outputPath": "dist",
26 | "index": "src/index.html",
27 | "main": "src/main.ts",
28 | "polyfills": "src/polyfills.ts",
29 | "tsConfig": "src/tsconfig.app.json",
30 | "assets": [
31 | {
32 | "glob": "favicon.ico",
33 | "input": "src",
34 | "output": "/"
35 | },
36 | {
37 | "glob": "**/*",
38 | "input": "src/assets",
39 | "output": "/assets"
40 | }
41 | ],
42 | "styles": [
43 | {
44 | "input": "src/styles.scss",
45 | "inject": true
46 | }
47 | ],
48 | "stylePreprocessorOptions": {
49 | "includePaths": [
50 | "./src/styles"
51 | ]
52 | },
53 | "scripts": [],
54 | "vendorChunk": true,
55 | "extractLicenses": false,
56 | "buildOptimizer": false,
57 | "sourceMap": true,
58 | "optimization": false,
59 | "namedChunks": true
60 | },
61 | "configurations": {
62 | "production": {
63 | "fileReplacements": [
64 | {
65 | "replace": "src/environments/environment.ts",
66 | "with": "src/environments/environment.prod.ts"
67 | }
68 | ],
69 | "optimization": true,
70 | "outputHashing": "all",
71 | "sourceMap": false,
72 | "namedChunks": false,
73 | "extractLicenses": true,
74 | "vendorChunk": false,
75 | "buildOptimizer": true,
76 | "budgets": [
77 | {
78 | "type": "bundle",
79 | "name": "polyfills",
80 | "baseline": "150kb",
81 | "maximumWarning": "50kb",
82 | "maximumError": "100kb"
83 | },
84 | {
85 | "type": "bundle",
86 | "name": "vendor",
87 | "baseline": "900kb",
88 | "maximumWarning": "100kb",
89 | "maximumError": "200kb"
90 | },
91 | {
92 | "type": "bundle",
93 | "name": "styles",
94 | "baseline": "280kb",
95 | "maximumWarning": "50kb",
96 | "maximumError": "100kb"
97 | },
98 | {
99 | "type": "bundle",
100 | "name": "main",
101 | "baseline": "1mb",
102 | "maximumWarning": "1mb",
103 | "maximumError": "1.5mb"
104 | },
105 | {
106 | "type": "anyComponentStyle",
107 | "maximumWarning": "6kb"
108 | }
109 | ]
110 | }
111 | },
112 | "defaultConfiguration": ""
113 | },
114 | "serve": {
115 | "builder": "@angular-devkit/build-angular:dev-server",
116 | "options": {
117 | "browserTarget": "angular-folder-structure:build"
118 | },
119 | "configurations": {
120 | "production": {
121 | "browserTarget": "angular-folder-structure:build:production"
122 | }
123 | }
124 | },
125 | "extract-i18n": {
126 | "builder": "@angular-devkit/build-angular:extract-i18n",
127 | "options": {
128 | "browserTarget": "angular-folder-structure:build"
129 | }
130 | },
131 | "test": {
132 | "builder": "@angular-devkit/build-angular:karma",
133 | "options": {
134 | "main": "src/test.ts",
135 | "polyfills": "src/polyfills.ts",
136 | "tsConfig": "src/tsconfig.spec.json",
137 | "karmaConfig": "src/karma.conf.js",
138 | "styles": [
139 | {
140 | "input": "src/main.scss",
141 | "inject": true
142 | }
143 | ],
144 | "stylePreprocessorOptions": {
145 | "includePaths": [
146 | "./src/styles"
147 | ]
148 | },
149 | "scripts": [],
150 | "assets": [
151 | {
152 | "glob": "favicon.ico",
153 | "input": "src/",
154 | "output": "/"
155 | },
156 | {
157 | "glob": "**/*",
158 | "input": "src/assets",
159 | "output": "/assets"
160 | }
161 | ]
162 | },
163 | "configurations": {
164 | "test": {
165 | "fileReplacements": [
166 | {
167 | "replace": "src/environments/environment.ts",
168 | "with": "src/environments/environment.test.ts"
169 | }
170 | ]
171 | }
172 | }
173 | },
174 | "lint": {
175 | "builder": "@angular-eslint/builder:lint",
176 | "options": {
177 | "lintFilePatterns": [
178 | "src/**/*.ts",
179 | "src/**/*.html"
180 | ]
181 | }
182 | }
183 | }
184 | },
185 | "angular-folder-structure-e2e": {
186 | "root": "e2e/",
187 | "projectType": "application",
188 | "architect": {
189 | "e2e": {
190 | "builder": "@angular-devkit/build-angular:protractor",
191 | "options": {
192 | "protractorConfig": "e2e/protractor.conf.js",
193 | "devServerTarget": "angular-folder-structure:serve"
194 | },
195 | "configurations": {
196 | "production": {
197 | "devServerTarget": "angular-folder-structure:serve:production"
198 | }
199 | }
200 | }
201 | }
202 | }
203 | },
204 | "defaultProject": "angular-folder-structure",
205 | "cli": {
206 | "defaultCollection": "@ngrx/schematics"
207 | }
208 | }
209 |
--------------------------------------------------------------------------------
3 |
4 |
5 |
6 | {{ project.title }}
7 | Dog Breed
8 |
9 | ![Photo of a Shiba Inu]()
10 |
11 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | {{ project.title }}
26 | Dog Breed
27 |
28 |
29 |
35 |
36 |
37 |
38 |
39 |
40 | 12 | The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. 13 | A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally 14 | bred for hunting. 15 |
16 |30 | The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. 31 | A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally 32 | bred for hunting. 33 |
34 |