Migrating my newly built Portfolio to Angular 19 🎉

Ensuring your Angular application stays up-to-date provides access to the latest features, improved performance, essential security patches, and bug fixes. Below is a detailed write-up I maintained while upgrading my in-progress portfolio site, originally built with Angular 18.2, to Angular 19. Angular 19 introduces several exciting advancements, such as Standalone Components by Default, Incremental Hydration, TypeScript 5.6 Support, Signal-Based Input/Output, Material Theming Updates, and more. This guide reflects my experience and insights during the upgrade process.

1. Angular Update Guide

By following this guide, you can effortlessly upgrade your Angular application to v19.0 and leverage its latest advancements.

Angular

The web development framework for building modern apps.

angular.dev

Update Angular Core and CLI

Open your terminal and navigate to your Angular project’s root directory.
Run the following command to update Angular Core and CLI to v19.0:

ng update @angular/core@19 @angular/cli@19

This command will update your project dependencies and apply necessary migrations.

Handle Standalone Components, Directives, and Pipes

Angular v19.0 makes components, directives, and pipes standalone by default.

@Component({
  selector: 'app-example',
  standalone: false, // Remove this line
  template: `...`
})
export class ExampleComponent {}

If you have declarations that are still part of an NgModule, you need to explicitly set standalone: false in their decorators.

@Component({
  selector: 'app-example',
  standalone: false, // Add this line
  template: `...`
})
export class ExampleComponent {}

The Angular CLI will automatically update your code to reflect this change during the migration.

Replace BrowserModule.withServerTransition()

If your application uses BrowserModule.withServerTransition(), replace it with the APP_ID token injection.

// Before
import { BrowserModule } from '@angular/platform-browser';
BrowserModule.withServerTransition({ appId: 'your-app-id' });

// After
import { APP_ID } from '@angular/core';
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: APP_ID, useValue: 'your-app-id' },
    provideClientHydration(),
    ...
  ]
};

Upgrade TypeScript

Angular v19.0 requires TypeScript 5.5 or later.
Update your TypeScript version by running:

npm install typescript@5.5 --save-dev

Ensure your tsconfig.json file is compatible with the new TypeScript version.

Migrate Router Error Handling

Replace Router.errorHandler with withNavigationErrorHandler (for provideRouter) or errorHandler (for RouterModule.forRoot).

// Before
import { Router } from '@angular/router';
constructor(private router: Router) {
  this.router.errorHandler = (error) => {
    console.error('Navigation error:', error);
  };
}

// After (using provideRouter)
import { provideRouter, withNavigationErrorHandler } from '@angular/router';
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withNavigationErrorHandler((error) => {
      console.error('Navigation error:', error);
    }))
  ]
});

// After (using RouterModule.forRoot)
import { RouterModule } from '@angular/router';
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      errorHandler: (error) => {
        console.error('Navigation error:', error);
      }
    })
  ]
})
export class AppModule {}

Migration to signal inputs

This step explains how to migrate from the traditional @Input decorator to the new signal based input() function introduced in Angular v19.0.

ng generate @angular/core:signal-input-migration

Before Migration

Here’s the original code using @Input:

import { Component, Input } from '@angular/core';

@Component({
  template: `Recipe: {{ recipe?? '' }}`
})
export class MyComponent {
  @Input() recipe: string | undefined = undefined;
  ...
}

After Migration

Here’s the updated code using the input() function:

import { Component, input } from '@angular/core';

@Component({
  template: `Name: {{ name() ?? '' }}`
})
export class MyComponent {
  readonly name = input<string>();
  ...
}

Sass Deprecation Warnings — Angular v.19

If you’re upgrading one of your Angular applications to the Angular v19 release candidate using the CLI command, you might see a large number of deprecation warnings from the Sass compiler during the build or serve process.

The output from the compiler could resemble something like this:

To fix this, add the following configuration to your angular.json file (or project.json if you're working within an Nx monorepo):

"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "sass": {
          "silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
        }
      }
    }
  }
}

This update should effectively remove all the newly added deprecation warnings.

🚨‘imports’ is only valid on a component that is standalone.

The error message indicates that the imports property is being used in a component that is not marked as standalone. In Angular v19, standalone flag is removed by default every component is standalone, and error seems like import: []array is only valid for components that have the standalone: true flag enabled, but this isn’t the case!

Here’s how you can resolve the issue:

• Reinstall and Refresh the Angular Language Service extension in VSCode.

Update Third-Party Dependencies

Some third-party packages may not yet be compatible with Angular 19. To check for outdated dependencies in your project, run the following command:

npm outdated

Make sure to test your application thoroughly after updating packages to ensure compatibility with Angular 19. If any issues arise, consider checking the package’s documentation or GitHub repository for updates or workarounds.

Clean up unused imports

As of Angular 19, the framework now detects and reports when a component’s imports array includes symbols that are not used in its template. This helps keep your code clean and efficient.

ng generate @angular/core:cleanup-unused-imports

Github PR for v.19 Migration

Migrate/v19 #4

muhammadawaisshaikh posted on Feb 09, 2025

• Migration to v.19 done: (@angular/core@19, @angular/cli@19)
• Signal Input Migration: @angular/core:signal-input-migration
• Sass Deprecation Warnings - fixed
• Remove unused imports: (@angular/core:cleanup-unused-imports)

View on GitHub

Conclusion

Upgrading to Angular 19 unlocks significant benefits, including enhanced performance, improved server-side rendering (SSR) hydration, and support for TypeScript 5.6. By following this step-by-step guide, you can ensure a seamless migration while taking full advantage of the latest features and optimizations. 🚀