├── LICENSE
├── README.md
├── client
    ├── client.lua
    └── util.lua
├── fxmanifest.lua
├── server
    └── server.lua
└── web
    ├── .editorconfig
    ├── .gitignore
    ├── .vscode
        ├── extensions.json
        ├── launch.json
        └── tasks.json
    ├── README.md
    ├── angular.json
    ├── package-lock.json
    ├── package.json
    ├── src
        ├── app
        │   ├── app.component.html
        │   ├── app.component.scss
        │   ├── app.component.ts
        │   ├── app.module.ts
        │   ├── example-container
        │   │   ├── example-container.component.html
        │   │   ├── example-container.component.scss
        │   │   └── example-container.component.ts
        │   └── nui.service.ts
        ├── assets
        │   └── .gitkeep
        ├── favicon.ico
        ├── index.html
        ├── main.ts
        └── styles.scss
    ├── tsconfig.app.json
    ├── tsconfig.json
    └── tsconfig.spec.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 r3ps4J
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/client/client.lua:
--------------------------------------------------------------------------------
 1 | local function toggleNuiFrame(shouldShow)
 2 |     SetNuiFocus(shouldShow, shouldShow)
 3 |     SendAngularMessage("setVisible", shouldShow)
 4 | end
 5 | 
 6 | RegisterCommand("show-nui", function()
 7 |     toggleNuiFrame(true)
 8 |     debugPrint("Show NUI frame")
 9 | end)
10 | 
11 | RegisterNUICallback("hideFrame", function(_, cb)
12 |     toggleNuiFrame(false)
13 |     debugPrint("Hide NUI frame")
14 |     cb({})
15 | end)
16 | 
17 | RegisterNUICallback("getClientData", function(data, cb)
18 |     debugPrint("Data sent by Angular", json.encode(data))
19 | 
20 |     -- Lets send back client coords to the Angular app for use
21 |     local curCoords = GetEntityCoords(PlayerPedId())
22 | 
23 |     local retData <const> = { x = curCoords.x, y = curCoords.y, z = curCoords.z }
24 |     cb(retData)
25 | end)
26 | 


--------------------------------------------------------------------------------
/client/util.lua:
--------------------------------------------------------------------------------
 1 | --- A simple wrapper around SendNUIMessage that you can use to
 2 | --- dispatch actions to the Angular app.
 3 | ---
 4 | ---@param action string The action you wish to target
 5 | ---@param data any The data you wish to send along with this action
 6 | function SendAngularMessage(action, data)
 7 | 	SendNUIMessage({
 8 | 		action = action,
 9 | 		data = data
10 | 	})
11 | end
12 | 
13 | local currentResourceName = GetCurrentResourceName()
14 | local debugIsEnabled = GetConvarInt(('%s-debugMode'):format(currentResourceName), 0) == 1
15 | 
16 | --- A simple debug print function that is dependent on a convar
17 | --- will output a nice prettified message if debugMode is on
18 | function debugPrint(...)
19 | 	if not debugIsEnabled then return end
20 | 	local args <const> = { ... }
21 | 
22 | 	local appendStr = ''
23 | 	for _, v in ipairs(args) do
24 | 		appendStr = appendStr .. ' ' .. tostring(v)
25 | 	end
26 | 	local msgTemplate = '^3[%s]^0%s'
27 | 	local finalMsg = msgTemplate:format(currentResourceName, appendStr)
28 | 	print(finalMsg)
29 | end
30 | 


--------------------------------------------------------------------------------
/fxmanifest.lua:
--------------------------------------------------------------------------------
 1 | fx_version "cerulean"
 2 | games { "gta5", "rdr3" }
 3 | lua54 "yes"
 4 | 
 5 | description "Basic Angular & Lua boilerplate"
 6 | author "r3ps4J"
 7 | version "1.0.0"
 8 | repository 'https://github.com/r3ps4J/cfx-angular-boilerplate-lua'
 9 | 
10 | ui_page "web/dist/index.html"
11 | 
12 | client_script "client/**/*.lua"
13 | server_script "server/**/*.lua"
14 | 
15 | files {
16 | 	"web/dist/index.html",
17 | 	"web/dist/**/*",
18 | }
19 | 


--------------------------------------------------------------------------------
/server/server.lua:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Darril44K/angular-fivem/31e4f8c9d9bb5fea52b66456eb43add33ce23969/server/server.lua


--------------------------------------------------------------------------------
/web/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = tab
 7 | indent_size = tab
 8 | tab_size = 4
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 
12 | [*.ts]
13 | quote_type = double
14 | 
15 | [*.md]
16 | max_line_length = off
17 | trim_trailing_whitespace = false
18 | 


--------------------------------------------------------------------------------
/web/.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 | 


--------------------------------------------------------------------------------
/web/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 |   "recommendations": ["angular.ng-template"]
4 | }
5 | 


--------------------------------------------------------------------------------
/web/.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": "pwa-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 | 


--------------------------------------------------------------------------------
/web/.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 | 


--------------------------------------------------------------------------------
/web/README.md:
--------------------------------------------------------------------------------
 1 | # Web
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.2.
 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 | 


--------------------------------------------------------------------------------
/web/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "web": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "scss",
 11 |           "skipTests": true
 12 |         },
 13 |         "@schematics/angular:class": {
 14 |           "skipTests": true
 15 |         },
 16 |         "@schematics/angular:directive": {
 17 |           "skipTests": true
 18 |         },
 19 |         "@schematics/angular:guard": {
 20 |           "skipTests": true
 21 |         },
 22 |         "@schematics/angular:interceptor": {
 23 |           "skipTests": true
 24 |         },
 25 |         "@schematics/angular:pipe": {
 26 |           "skipTests": true
 27 |         },
 28 |         "@schematics/angular:resolver": {
 29 |           "skipTests": true
 30 |         },
 31 |         "@schematics/angular:service": {
 32 |           "skipTests": true
 33 |         }
 34 |       },
 35 |       "root": "",
 36 |       "sourceRoot": "src",
 37 |       "prefix": "app",
 38 |       "architect": {
 39 |         "build": {
 40 |           "builder": "@angular-devkit/build-angular:browser",
 41 |           "options": {
 42 |             "outputPath": "dist",
 43 |             "index": "src/index.html",
 44 |             "main": "src/main.ts",
 45 |             "polyfills": [
 46 |               "zone.js"
 47 |             ],
 48 |             "tsConfig": "tsconfig.app.json",
 49 |             "inlineStyleLanguage": "scss",
 50 |             "assets": [
 51 |               "src/favicon.ico",
 52 |               "src/assets"
 53 |             ],
 54 |             "styles": [
 55 |               "src/styles.scss"
 56 |             ],
 57 |             "scripts": []
 58 |           },
 59 |           "configurations": {
 60 |             "production": {
 61 |               "budgets": [
 62 |                 {
 63 |                   "type": "initial",
 64 |                   "maximumWarning": "500kb",
 65 |                   "maximumError": "1mb"
 66 |                 },
 67 |                 {
 68 |                   "type": "anyComponentStyle",
 69 |                   "maximumWarning": "2kb",
 70 |                   "maximumError": "4kb"
 71 |                 }
 72 |               ],
 73 |               "outputHashing": "all"
 74 |             },
 75 |             "development": {
 76 |               "buildOptimizer": false,
 77 |               "optimization": false,
 78 |               "vendorChunk": true,
 79 |               "extractLicenses": false,
 80 |               "sourceMap": true,
 81 |               "namedChunks": true
 82 |             }
 83 |           },
 84 |           "defaultConfiguration": "production"
 85 |         },
 86 |         "serve": {
 87 |           "builder": "@angular-devkit/build-angular:dev-server",
 88 |           "configurations": {
 89 |             "production": {
 90 |               "browserTarget": "web:build:production"
 91 |             },
 92 |             "development": {
 93 |               "browserTarget": "web:build:development"
 94 |             }
 95 |           },
 96 |           "defaultConfiguration": "development"
 97 |         },
 98 |         "extract-i18n": {
 99 |           "builder": "@angular-devkit/build-angular:extract-i18n",
100 |           "options": {
101 |             "browserTarget": "web:build"
102 |           }
103 |         },
104 |         "test": {
105 |           "builder": "@angular-devkit/build-angular:karma",
106 |           "options": {
107 |             "polyfills": [
108 |               "zone.js",
109 |               "zone.js/testing"
110 |             ],
111 |             "tsConfig": "tsconfig.spec.json",
112 |             "inlineStyleLanguage": "scss",
113 |             "assets": [
114 |               "src/favicon.ico",
115 |               "src/assets"
116 |             ],
117 |             "styles": [
118 |               "src/styles.scss"
119 |             ],
120 |             "scripts": []
121 |           }
122 |         }
123 |       }
124 |     }
125 |   }
126 | }
127 | 


--------------------------------------------------------------------------------
/web/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build --base-href /web/dist/",
 8 |     "watch": "ng build --watch --configuration development --base-href /web/dist/",
 9 |     "test": "ng test"
10 |   },
11 |   "private": true,
12 |   "dependencies": {
13 |     "@angular/animations": "^15.0.0",
14 |     "@angular/common": "^15.0.0",
15 |     "@angular/compiler": "^15.0.0",
16 |     "@angular/core": "^15.0.0",
17 |     "@angular/forms": "^15.0.0",
18 |     "@angular/platform-browser": "^15.0.0",
19 |     "@angular/platform-browser-dynamic": "^15.0.0",
20 |     "@angular/router": "^15.0.0",
21 |     "rxjs": "~7.5.0",
22 |     "tslib": "^2.3.0",
23 |     "zone.js": "~0.12.0"
24 |   },
25 |   "devDependencies": {
26 |     "@angular-devkit/build-angular": "^15.0.2",
27 |     "@angular/cli": "~15.0.2",
28 |     "@angular/compiler-cli": "^15.0.0",
29 |     "@types/jasmine": "~4.3.0",
30 |     "jasmine-core": "~4.5.0",
31 |     "karma": "~6.4.0",
32 |     "karma-chrome-launcher": "~3.1.0",
33 |     "karma-coverage": "~2.2.0",
34 |     "karma-jasmine": "~5.1.0",
35 |     "karma-jasmine-html-reporter": "~2.0.0",
36 |     "typescript": "~4.8.2"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/web/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <app-example-container *ngIf="visible"></app-example-container>
2 | 


--------------------------------------------------------------------------------
/web/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Darril44K/angular-fivem/31e4f8c9d9bb5fea52b66456eb43add33ce23969/web/src/app/app.component.scss


--------------------------------------------------------------------------------
/web/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, HostListener, OnInit } from "@angular/core";
 2 | import { NuiService } from "./nui.service";
 3 | 
 4 | @Component({
 5 | 	selector: "app-root",
 6 | 	templateUrl: "./app.component.html",
 7 | 	styleUrls: ["./app.component.scss"]
 8 | })
 9 | export class AppComponent implements OnInit {
10 | 	visible: boolean = false;
11 | 
12 | 	constructor(private nui: NuiService) {}
13 | 
14 | 	ngOnInit(): void {
15 | 		// This listens for the "setVisible" message
16 | 		this.nui.fromMessageAction<boolean>("setVisible").subscribe({
17 | 			next: (value) => {
18 | 				this.visible = value;
19 | 			}
20 | 		});
21 | 
22 | 		// This will set the NUI to visible if we are developing in browser
23 | 		this.nui.dispatchDebugMessages([
24 | 			{
25 | 				action: "setVisible",
26 | 				data: true
27 | 			}
28 | 		]);
29 | 	}
30 | 
31 | 	@HostListener("window:keydown", ["$event"])
32 | 	handleKeyboardEvent(event: KeyboardEvent) {
33 | 		if (["Backspace", "Escape"].includes(event.code)) {
34 | 			if (!this.nui.isEnvBrowser()) this.nui.fetchNui("hideFrame");
35 | 			this.visible = false;
36 | 		}
37 | 	}
38 | }
39 | 


--------------------------------------------------------------------------------
/web/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from "@angular/core";
 2 | import { BrowserModule } from "@angular/platform-browser";
 3 | 
 4 | import { AppComponent } from "./app.component";
 5 | import { ExampleContainerComponent } from "./example-container/example-container.component";
 6 | 
 7 | @NgModule({
 8 | 	declarations: [
 9 | 		AppComponent,
10 | 		ExampleContainerComponent
11 | 	],
12 | 	imports: [
13 | 		BrowserModule
14 | 	],
15 | 	providers: [],
16 | 	bootstrap: [AppComponent],
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/web/src/app/example-container/example-container.component.html:
--------------------------------------------------------------------------------
 1 | <div class="nui-wrapper">
 2 | 	<div class="popup-thing">
 3 | 		<div>
 4 | 			<h1>This is the NUI Pop-up!</h1>
 5 | 			<p>Exit with the escape key</p>
 6 | 			<button (click)="handleGetClientData()">Get Client Data</button>
 7 | 			<ng-container *ngIf="clientData">
 8 | 				<h5>Returned Data:</h5>
 9 | 				<pre>
10 | 				<code>
11 | 					{{ clientData | json}}
12 | 				</code>
13 | 				</pre>
14 | 			</ng-container>
15 | 		</div>
16 | 	</div>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/web/src/app/example-container/example-container.component.scss:
--------------------------------------------------------------------------------
 1 | .nui-wrapper {
 2 | 	text-align: center;
 3 | 	height: 100%;
 4 | 	display: flex;
 5 | 	justify-content: center;
 6 | 	align-items: center;
 7 | 
 8 | 	.popup-thing {
 9 | 		background: #282c34;
10 | 		border-radius: 10px;
11 | 		width: 500px;
12 | 		height: 400px;
13 | 		display: flex;
14 | 		justify-content: center;
15 | 		align-items: center;
16 | 		color: white;
17 | 
18 | 		pre {
19 | 			counter-reset: line-numbering;
20 | 			background: #2c3e50;
21 | 			padding: 12px 0px 14px 0;
22 | 			color: #ecf0f1;
23 | 			line-height: 140%;
24 | 		}
25 | 	}
26 | }
27 | 


--------------------------------------------------------------------------------
/web/src/app/example-container/example-container.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | import { NuiService } from "../nui.service";
 3 | 
 4 | interface ReturnData {
 5 | 	x: number;
 6 | 	y: number;
 7 | 	z: number;
 8 | }
 9 | 
10 | @Component({
11 | 	selector: "app-example-container",
12 | 	templateUrl: "./example-container.component.html",
13 | 	styleUrls: ["./example-container.component.scss"]
14 | })
15 | export class ExampleContainerComponent {
16 | 	clientData?: ReturnData;
17 | 
18 | 	constructor(private nui: NuiService) {}
19 | 
20 | 	handleGetClientData() {
21 | 		this.nui
22 | 			.fetchNui<ReturnData>("getClientData")
23 | 			.then((retData) => {
24 | 				console.log("Got return data from client scripts:");
25 | 				console.dir(retData);
26 | 				this.clientData = retData;
27 | 			})
28 | 			.catch((e) => {
29 | 				console.error("Setting mock data due to error", e);
30 | 				this.clientData = { x: 500, y: 300, z: 200 };
31 | 			});
32 | 	}
33 | }
34 | 


--------------------------------------------------------------------------------
/web/src/app/nui.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable, isDevMode } from "@angular/core";
 2 | import { fromEvent, Observable, Subject } from "rxjs";
 3 | 
 4 | interface NuiMessage<T = any> {
 5 | 	action: string;
 6 | 	data: T;
 7 | }
 8 | 
 9 | @Injectable({
10 | 	providedIn: "root"
11 | })
12 | export class NuiService {
13 | 	private resourceName: string = (window as any).GetParentResourceName
14 | 		? (window as any).GetParentResourceName()
15 | 		: "nui-app";
16 | 
17 | 	private messageObservable: Observable<MessageEvent>;
18 | 	private actionObservables: Record<string, Subject<any>> = {};
19 | 
20 | 	private lastMessages: Record<string, any> = {};
21 | 
22 | 	constructor() {
23 | 		this.messageObservable = fromEvent<MessageEvent<NuiMessage>>(window, "message");
24 | 		this.messageObservable.subscribe((event: MessageEvent<NuiMessage>) => {
25 | 			this.lastMessages[event.data.action] = event.data;
26 | 			if (this.actionObservables[event.data.action]) {
27 | 				this.actionObservables[event.data.action].next(event.data.data);
28 | 			}
29 | 		});
30 | 	}
31 | 
32 | 	public isEnvBrowser(): boolean {
33 | 		return !(window as any).invokeNative;
34 | 	}
35 | 
36 | 	async fetchNui<T = any>(eventName: string, data?: any, mockData?: T): Promise<T> {
37 | 		if (this.isEnvBrowser() && mockData) {
38 | 			return mockData;
39 | 		}
40 | 		const options = {
41 | 			method: "post",
42 | 			headers: {
43 | 				"Content-Type": "application/json; charset=UTF-8"
44 | 			},
45 | 			body: JSON.stringify(data)
46 | 		};
47 | 		const response = await fetch(`https://${this.resourceName}/${eventName}`, options);
48 | 		return await response.json();
49 | 	}
50 | 
51 | 	public fromMessageAction<T = any>(action: string): Subject<T> {
52 | 		if (!this.actionObservables[action]) {
53 | 			this.actionObservables[action] = new Subject<T>();
54 | 		}
55 | 		return this.actionObservables[action];
56 | 	}
57 | 
58 | 	public getLastMessageData<T = any>(action: string): T | false {
59 | 		return this.lastMessages[action] ?? false;
60 | 	}
61 | 
62 | 	public dispatchDebugMessages<P>(events: NuiMessage<P>[], timeout = 1000): void {
63 | 		if (isDevMode() && this.isEnvBrowser()) {
64 | 			for (const event of events) {
65 | 				setTimeout(() => {
66 | 					window.dispatchEvent(new MessageEvent("message", { data: event }));
67 | 				}, timeout);
68 | 			}
69 | 		}
70 | 	}
71 | }
72 | 


--------------------------------------------------------------------------------
/web/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Darril44K/angular-fivem/31e4f8c9d9bb5fea52b66456eb43add33ce23969/web/src/assets/.gitkeep


--------------------------------------------------------------------------------
/web/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Darril44K/angular-fivem/31e4f8c9d9bb5fea52b66456eb43add33ce23969/web/src/favicon.ico


--------------------------------------------------------------------------------
/web/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<title>NUI Angular boilerplate</title>
 6 | 		<base href="/" />
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 9 | 	</head>
10 | 	<body>
11 | 		<app-root></app-root>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/web/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
2 | 
3 | import { AppModule } from "./app/app.module";
4 | 
5 | platformBrowserDynamic()
6 | 	.bootstrapModule(AppModule)
7 | 	.catch((err) => console.error(err));
8 | 


--------------------------------------------------------------------------------
/web/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | body {
3 | 	height: 100%;
4 | }
5 | 


--------------------------------------------------------------------------------
/web/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/web/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitOverride": true,
10 |     "noPropertyAccessFromIndexSignature": true,
11 |     "noImplicitReturns": true,
12 |     "noFallthroughCasesInSwitch": true,
13 |     "sourceMap": true,
14 |     "declaration": false,
15 |     "downlevelIteration": true,
16 |     "experimentalDecorators": true,
17 |     "moduleResolution": "node",
18 |     "importHelpers": true,
19 |     "target": "ES2022",
20 |     "module": "ES2022",
21 |     "useDefineForClassFields": false,
22 |     "lib": [
23 |       "ES2022",
24 |       "dom"
25 |     ]
26 |   },
27 |   "angularCompilerOptions": {
28 |     "enableI18nLegacyMessageIdFormat": false,
29 |     "strictInjectionParameters": true,
30 |     "strictInputAccessModifiers": true,
31 |     "strictTemplates": true
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/web/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "include": [
11 |     "src/**/*.spec.ts",
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------