├── .editorconfig
├── .gitignore
├── .vscode
├── extensions.json
├── launch.json
└── tasks.json
├── README.md
├── angular.json
├── firebase.json
├── package-lock.json
├── package.json
├── server.ts
├── src
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.config.server.ts
│ ├── app.config.ts
│ ├── app.routes.ts
│ └── pages
│ │ ├── creator
│ │ ├── creator.component.html
│ │ ├── creator.component.scss
│ │ └── creator.component.ts
│ │ ├── detail
│ │ ├── detail.component.html
│ │ ├── detail.component.scss
│ │ └── detail.component.ts
│ │ └── list
│ │ ├── list.component.html
│ │ ├── list.component.scss
│ │ └── list.component.ts
├── assets
│ └── .gitkeep
├── favicon.ico
├── index.html
├── main.server.ts
├── main.ts
└── styles.scss
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # Compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | /bazel-out
8 |
9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 |
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 |
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 |
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 |
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # AngularCrud17Firebase
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.6.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | 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.
28 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular-crud-17-firebase": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | }
12 | },
13 | "root": "",
14 | "sourceRoot": "src",
15 | "prefix": "app",
16 | "architect": {
17 | "build": {
18 | "builder": "@angular-devkit/build-angular:application",
19 | "options": {
20 | "outputPath": "dist/angular-crud-17-firebase",
21 | "index": "src/index.html",
22 | "browser": "src/main.ts",
23 | "polyfills": [
24 | "zone.js"
25 | ],
26 | "tsConfig": "tsconfig.app.json",
27 | "inlineStyleLanguage": "scss",
28 | "assets": [
29 | "src/favicon.ico",
30 | "src/assets"
31 | ],
32 | "styles": [
33 | "src/styles.scss"
34 | ],
35 | "scripts": [],
36 | "server": "src/main.server.ts",
37 | "prerender": true,
38 | "ssr": {
39 | "entry": "server.ts"
40 | }
41 | },
42 | "configurations": {
43 | "production": {
44 | "budgets": [
45 | {
46 | "type": "initial",
47 | "maximumWarning": "500kb",
48 | "maximumError": "1mb"
49 | },
50 | {
51 | "type": "anyComponentStyle",
52 | "maximumWarning": "2kb",
53 | "maximumError": "4kb"
54 | }
55 | ],
56 | "outputHashing": "all"
57 | },
58 | "development": {
59 | "optimization": false,
60 | "extractLicenses": false,
61 | "sourceMap": true
62 | }
63 | },
64 | "defaultConfiguration": "production"
65 | },
66 | "serve": {
67 | "builder": "@angular-devkit/build-angular:dev-server",
68 | "configurations": {
69 | "production": {
70 | "buildTarget": "angular-crud-17-firebase:build:production"
71 | },
72 | "development": {
73 | "buildTarget": "angular-crud-17-firebase:build:development"
74 | }
75 | },
76 | "defaultConfiguration": "development"
77 | },
78 | "extract-i18n": {
79 | "builder": "@angular-devkit/build-angular:extract-i18n",
80 | "options": {
81 | "buildTarget": "angular-crud-17-firebase:build"
82 | }
83 | },
84 | "test": {
85 | "builder": "@angular-devkit/build-angular:karma",
86 | "options": {
87 | "polyfills": [
88 | "zone.js",
89 | "zone.js/testing"
90 | ],
91 | "tsConfig": "tsconfig.spec.json",
92 | "inlineStyleLanguage": "scss",
93 | "assets": [
94 | "src/favicon.ico",
95 | "src/assets"
96 | ],
97 | "styles": [
98 | "src/styles.scss"
99 | ],
100 | "scripts": []
101 | }
102 | }
103 | }
104 | }
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-crud-17-firebase",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test",
10 | "serve:ssr:angular-crud-17-firebase": "node dist/angular-crud-17-firebase/server/server.mjs"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "^17.0.0",
15 | "@angular/common": "^17.0.0",
16 | "@angular/compiler": "^17.0.0",
17 | "@angular/core": "^17.0.0",
18 | "@angular/forms": "^17.0.0",
19 | "@angular/platform-browser": "^17.0.0",
20 | "@angular/platform-browser-dynamic": "^17.0.0",
21 | "@angular/platform-server": "^17.0.0",
22 | "@angular/router": "^17.0.0",
23 | "@angular/ssr": "^17.0.6",
24 | "express": "^4.18.2",
25 | "rxjs": "~7.8.0",
26 | "tslib": "^2.3.0",
27 | "zone.js": "~0.14.2"
28 | },
29 | "devDependencies": {
30 | "@angular-devkit/build-angular": "^17.0.6",
31 | "@angular/cli": "^17.0.6",
32 | "@angular/compiler-cli": "^17.0.0",
33 | "@types/express": "^4.17.17",
34 | "@types/jasmine": "~5.1.0",
35 | "@types/node": "^18.18.0",
36 | "jasmine-core": "~5.1.0",
37 | "karma": "~6.4.0",
38 | "karma-chrome-launcher": "~3.2.0",
39 | "karma-coverage": "~2.2.0",
40 | "karma-jasmine": "~5.1.0",
41 | "karma-jasmine-html-reporter": "~2.1.0",
42 | "typescript": "~5.2.2"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/server.ts:
--------------------------------------------------------------------------------
1 | import { APP_BASE_HREF } from '@angular/common';
2 | import { CommonEngine } from '@angular/ssr';
3 | import express from 'express';
4 | import { fileURLToPath } from 'node:url';
5 | import { dirname, join, resolve } from 'node:path';
6 | import bootstrap from './src/main.server';
7 |
8 | // The Express app is exported so that it can be used by serverless Functions.
9 | export function app(): express.Express {
10 | const server = express();
11 | const serverDistFolder = dirname(fileURLToPath(import.meta.url));
12 | const browserDistFolder = resolve(serverDistFolder, '../browser');
13 | const indexHtml = join(serverDistFolder, 'index.server.html');
14 |
15 | const commonEngine = new CommonEngine();
16 |
17 | server.set('view engine', 'html');
18 | server.set('views', browserDistFolder);
19 |
20 | // Example Express Rest API endpoints
21 | // server.get('/api/**', (req, res) => { });
22 | // Serve static files from /browser
23 | server.get('*.*', express.static(browserDistFolder, {
24 | maxAge: '1y'
25 | }));
26 |
27 | // All regular routes use the Angular engine
28 | server.get('*', (req, res, next) => {
29 | const { protocol, originalUrl, baseUrl, headers } = req;
30 |
31 | commonEngine
32 | .render({
33 | bootstrap,
34 | documentFilePath: indexHtml,
35 | url: `${protocol}://${headers.host}${originalUrl}`,
36 | publicPath: browserDistFolder,
37 | providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
38 | })
39 | .then((html) => res.send(html))
40 | .catch((err) => next(err));
41 | });
42 |
43 | return server;
44 | }
45 |
46 | function run(): void {
47 | const port = process.env['PORT'] || 4000;
48 |
49 | // Start up the Node server
50 | const server = app();
51 | server.listen(port, () => {
52 | console.log(`Node Express server listening on http://localhost:${port}`);
53 | });
54 | }
55 |
56 | run();
57 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
Deck name
4 |Deck description
5 |Author
6 |