TS in Angular

• We will use TypeScript (TS) as programming language to create/write Angular applications
• TS is already configured for us when a new Angular project is created

Configuration files

• There are three TS config files in an Angular application:
  • tsconfig.json = general configuration
  • tsconfig.app.json = application specific configuration
  • tsconfig.spec.json = testing specific configuration
• Check out the Typescript configuration from the official Angular website for more information

tsconfig.json

• Look for the tsconfig.json file in the root of project
• This file contains all the configuration for the TS compiler

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

tsconfig.app.json

• Extends from the tsconfig.json file, so all base settings are adopted
• Some application specific settings are added

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.spec.json

• Extends from the tsconfig.json file, so all base settings are adopted
• Some testing specific settings are added

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

Serving the Angular application

• Executing the ng serve or npm start command eventually launches the application
• Before the launch, all TS files are compiled to JS based on the TS settings from the configuration files
• After the compilation everything is bundled into five JS files and 1 CSS file
• Output:

> my-news@0.0.0 start
> ng serve -o --port 5878

Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  90.23 kB |
main.js             | main          |  22.69 kB |
styles.css          | styles        |  95 bytes |

                    | Initial total | 113.02 kB

Application bundle generation complete. [1.969 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:5878/
  ➜  press h + enter to show help

main.js/vendor.js

• main.js will contain all the code we write ourselves (Angular components, services, directives, pipes, ...)
• polyfills.js contains JavaScript scripts or modules to ensure compatibility with older browsers
• styles.css will contain all the CSS rules