Default angular practices

build specific variables

To make variables you can only see when you run it local, or only in production. Follow these steps.

• go into your src/ folder and make a new folder. i always call this environment/
• inside this folder make 2 files: environment.ts and environment.prod.ts
• paste the following into these files:

  export const environment = {
      production: false
  }

  and set production to true in the environment.prod.ts
• go to the angular.json
• find "architect": { "build": {
• inside "build" go to "configurations" and then "production"
• paste the following json in this dict:

  "fileReplacements": [
      {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
      }
  ],

  If you chose a different path or name, then use your corresponding paths.

Now you should be able to import environment in every typescript file, and use the variables in there.

When you run it locally, it will use the variables from "src/environments/environment.ts". And when you build this script (using 1 of the 2 builders), it will use the variables from "src/environments/environment.prod.ts",

standalone component generation

On default ng generate component myComponent will make it a standalone component. This is good for when you plan on making it exportable, but otherwise not so much.

You can change it so that it doesn’t make it standalone when you use ng generate component myComponent

You can either use ng generate component --standalone false myComponent, this will generate this one with your preferred standalone settings.

But if you want to change it as default mode, go to Angular.json and define the default behaviour:

"projects": {
    "my-angular17-project": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": false
        }
      },
    }
}

The reason why you would want it to be standalone is for creating a component you want to export to other applications. But if you don’t need that, I’d advise to mkae it not be standalone.

Prevent issues by setting it to default in the init generation command: ng new --no-standalone appName

a comment that explains this on stackoverflow

SSR on Angular creation

when I generate an angular app, I get the following question: Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? I answer N on default, but I should investigate what it does.

Server-side rendering (SSR) is a process that involves rendering pages on the server, resulting in initial HTML content which contains initial page state. Once the HTML content is delivered to a browser, Angular initializes the application and utilizes the data contained within the HTML.

This page explains that it is not the best. And this page talks about problems with it when you combine it with Angular Material.

It is quite new at the moment that I am writing this (31st of January). That it is so new means that it probably still has a lot of bugs. I’d probably look at it again in angular 18 or 19+.

To create a new application with SSR, run:

ng new --ssr

To add SSR to an existing project, use the Angular CLI ng add command.

ng add @angular/ssr