NewAngular

This project was generated with Angular CLI version 18.1.1.

Development server

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.

Code scaffolding

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.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

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.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

I made this project with the purpose of learning and collecting data. I used these items in my project

Angular 18 (app.config, app.routs)

Reactive Forms (app-dynamic-form, app-dynamic-form-question)

**https://angular.dev/guide/forms/reactive-forms

SSR (for use ssr : npm run build:ssr, npm run serve:ssr:newAngular)

in architct build options, in the angular.json file: for use ssr we should write this:

, "scripts": [], "server": "src/main.server.ts", "prerender": true, "ssr": { "entry": "server.ts" }

** SSR (Server-Side Rendering) in Angular allows your Angular application to render pages on the server instead of the client. This can improve performance, especially for users on slow networks, and enhance SEO (Search Engine Optimization) because search engines can index the content more easily. With SSR, the server sends a fully rendered page to the client, and then Angular takes over for any subsequent interactions.

** https://angular.dev/guide/ssr

Nginx

I test serving app with nginx,

Serving an Angular application using NGINX is different from using Server-Side Rendering (SSR) in several key ways. Here's a breakdown of the differences:

1. Nature of Rendering

• NGINX Serving Static Angular Application:

  • Client-Side Rendering (CSR): When you build your Angular application and serve it using NGINX, you're deploying a client-side rendered (CSR) application. The browser downloads the HTML, CSS, and JavaScript files, and then Angular takes over to render the application on the client side.
  • Static Files: NGINX serves pre-built static files (like index.html, JavaScript, and CSS files) directly to the user's browser. The actual rendering happens on the client side, meaning that the browser interprets and displays the application.

• SSR with Angular Universal:

  • Server-Side Rendering: With SSR, the Angular application is rendered on the server before being sent to the client. This means that the initial HTML that is sent to the browser is fully rendered, which can be displayed immediately.
  • Dynamic HTML: The server generates the HTML dynamically for each request, which means the content is already populated before it reaches the client. This improves load times and SEO because search engines can index the fully rendered page.

2. Performance

• NGINX Static Serving:

  • Initial Load: The initial load might be slower on CSR applications because the browser needs to download all JavaScript files and render the content.
  • Subsequent Navigations: After the initial load, the application might be faster because Angular only needs to load new data and update the DOM dynamically without reloading the whole page.

• SSR:

  • Initial Load: The initial load time is generally faster because the HTML content is already rendered on the server and ready to be displayed. Users can see the content faster, even if the JavaScript hasn’t fully loaded.
  • Subsequent Navigations: Once the Angular app takes over (after the initial load), it behaves like a CSR app. Navigation between pages is handled by Angular on the client side.

3. SEO and Accessibility

• NGINX Static Serving:

  • SEO: CSR can sometimes pose challenges for SEO because search engines may struggle to index the content properly if it's not rendered in the initial HTML response. Modern search engines like Google are better at indexing CSR pages, but SSR still has an advantage.
  • Accessibility: Users might see a blank page until the JavaScript is fully loaded and executed, which can be a problem for slow networks or older devices.

• SSR:

  • SEO: SSR is better for SEO because the full content is available in the HTML response. Search engines can crawl and index the page content more easily.
  • Accessibility: Users get a fully rendered page immediately, improving accessibility on slower connections or less powerful devices.

4. Complexity

• NGINX Static Serving:

  • Simplicity: Serving an Angular app with NGINX is simpler to set up. You just need to build the Angular app, configure NGINX to serve the static files, and you're done.
  • Maintenance: Easier to maintain because you’re only dealing with static files and a basic web server configuration.

• SSR:

  • Complexity: SSR requires additional setup and maintenance. You need to configure Angular Universal, manage a Node.js server, and handle potential issues like state management and caching on the server.
  • Deployment: Deploying an SSR application requires a server environment that can run Node.js, adding an extra layer of complexity compared to serving static files.

Conclusion

• Use NGINX Static Serving if you want a simple, straightforward deployment for an Angular application where SEO and the initial load time are not as critical.
• Use SSR if you need better performance for the initial load, improved SEO, or if your application has content that should be indexed by search engines immediately.

Each approach has its use cases, and the choice depends on the specific requirements of your application.

To use NGINX on Windows, you'll need to follow a few steps to install and configure it. While NGINX is primarily designed for Unix-like systems, it can still run on Windows. Here's how you can set it up:

1. Download NGINX for Windows

• Go to the official NGINX website.
• Download the latest stable version of NGINX for Windows (usually comes in a .zip file).

2. Extract the NGINX Files

• Extract the downloaded .zip file to a directory on your system, e.g., C:\nginx.

3. Start NGINX

• Open Command Prompt and navigate to the NGINX directory:

  cd C:\nginx

• Start NGINX by running the following command:

  start nginx

• This command will start the NGINX server on your local machine.

4. Configure NGINX

• The main configuration file for NGINX is located at C:\nginx\conf\nginx.conf.

• Open nginx.conf with a text editor (e.g., Notepad++ or Visual Studio Code).

• Modify the server block to point to your Angular application's dist folder. For example:

  server {
      listen       80;
      server_name  localhost;
  
      root   C:/path-to-your-angular-app/dist/your-app-name;
      index  index.html;
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  
      error_page 404 /index.html;
  }

• Replace C:/path-to-your-angular-app/dist/your-app-name with the actual path to your Angular app's build directory.

5. Restart NGINX

• To apply the changes, you need to restart NGINX. You can do this by stopping and then starting NGINX again:

  nginx -s stop
  start nginx

6. Access Your Angular Application

• Open a web browser and go to http://localhost. You should see your Angular application served by NGINX.

7. Running NGINX as a Windows Service (Optional)

• If you want NGINX to run automatically at startup, you can set it up as a Windows service using a tool like NSSM (Non-Sucking Service Manager).
• Download and install NSSM, then use it to install NGINX as a service.

Conclusion

Running NGINX on Windows allows you to serve your Angular application locally or on a Windows-based server. Although NGINX is more commonly used on Linux, these steps enable you to set it up on a Windows environment for development or deployment purposes.

For serve ssr app with nginx:

we should first npm run serve:ssr:newAngular,Start your Node.js server: This server will handle SSR then write this location in nginx.conf :

Start NGINX: This will route traffic to your Node.js server. server { listen 80; server_name localhost;

location / {
    proxy_pass http://localhost:4000; # Forward requests to the Node.js server
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

}

Dynamic components

https://v17.angular.io/guide/dynamic-component-loader

The NgComponentOutlet directive can be used to instantiate components and insert them into the current view. This directive allows you to provide a component class that should be rendered, as well as component inputs to be used during initialization.

SPA

A Single Page Application (SPA) is a type of web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. This results in faster transitions and a more fluid user experience, similar to that of a desktop application.

Angular is a popular framework for building SPAs. It allows developers to create rich, interactive applications with a smooth, responsive user interface.

Key Characteristics of SPAs Dynamic Loading: Only necessary content is loaded dynamically, reducing the amount of data transferred and improving speed. Client-Side Routing: Angular uses client-side routing to change views or components without reloading the page. This is achieved through Angular’s RouterModule. Enhanced User Experience: The application feels faster and more responsive because there’s no full-page reload. Separation of Concerns: Angular’s architecture promotes a clean separation between application logic, UI logic, and data handling.

Angular Call Function Every X Seconds Example

https://www.itsolutionstuff.com/post/angular-call-function-every-x-seconds-exampleexample.html

this.subscription = timer(0, 5000).pipe( switchMap(async () => this.API.displayNextAd()) ).subscribe(result => console.log(result) );

** isPlatformBrowser Check **: The isPlatformBrowser function checks whether the code is running in the browser environment. This prevents any DOM-related code from running on the server.

Conditional DOM Manipulation: The DOM-related operations (like resetScrollPosition and scrollBanner) and the scheduling of the ads are now only executed if the code is running in the browser.