Angular workspaces are a game-changer when it comes to managing multiple projects. Trust me, I’ve been there – juggling various apps and libraries can be a real headache. But fear not! I’m here to share some pro tips that’ll make your life a whole lot easier.

First things first, let’s talk about why you’d want to use a workspace. Imagine you’re building a suite of related apps or maintaining a collection of reusable libraries. Instead of having separate repos for each, you can keep everything under one roof. It’s like having all your favorite tools in one toolbox – super convenient!

To get started, you’ll want to create a new workspace. Fire up your terminal and run:

ng new my-awesome-workspace --create-application false

This command sets up a workspace without creating an initial application. Now, you’re ready to add projects to your heart’s content!

Adding a new application is as easy as pie:

ng generate application my-cool-app

And for libraries:

ng generate library my-shared-lib

Now, here’s where the magic happens. With everything in one workspace, sharing code between projects becomes a breeze. Let’s say you’ve got a utility function in your shared library that you want to use in your main app. Just import it like you would any other module:

import { myAwesomeFunction } from 'my-shared-lib';

No need for complicated npm links or publishing packages. It just works!

But wait, there’s more! One of the coolest things about workspaces is the ability to use TypeScript path mappings. This feature lets you create shortcuts for imports, making your code cleaner and more maintainable. In your tsconfig.json, you can set up path mappings like this:

{
  "compilerOptions": {
    "paths": {
      "@shared/*": ["projects/my-shared-lib/src/*"]
    }
  }
}

Now, instead of long, convoluted import paths, you can do something like:

import { myAwesomeFunction } from '@shared/utils';

Much cleaner, right?

When it comes to running and building your projects, the Angular CLI has got your back. To serve a specific application, just use:

ng serve my-cool-app

And for building:

ng build my-cool-app

But what if you want to build everything at once? No problem! You can create a custom builder in your angular.json file:

{
  "architect": {
    "build-all": {
      "builder": "@angular-devkit/architect:multi",
      "options": {
        "targets": [
          "my-cool-app:build",
          "my-other-app:build",
          "my-shared-lib:build"
        ]
      }
    }
  }
}

Now, you can build all your projects with a single command:

ng run build-all

Pretty neat, huh?

Let’s talk about dependency management. One of the biggest advantages of using a workspace is that you have a single package.json file for all your projects. This means you can easily keep your dependencies in sync across all your apps and libraries. No more version mismatches or conflicting packages!

But with great power comes great responsibility. It’s crucial to keep your dependencies up to date. I like to set aside some time each week to run:

ng update

This command checks for updates to your Angular packages and gives you the option to update them. It’s like giving your workspace a regular health check-up.

Now, let’s dive into some best practices. First off, keep your shared code in libraries. This promotes reusability and helps maintain a clean separation of concerns. I usually create libraries for things like UI components, services, and utility functions.

Another pro tip: use NgRx for state management if you’re working on complex applications. It might seem like overkill for smaller projects, but trust me, it’s a lifesaver when your apps start to grow. Here’s a quick example of how you might set up a simple NgRx store:

import { createAction, createReducer, on } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');

export const initialState = 0;

export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1)
);

This sets up a simple counter that can be incremented or decremented. You can then use this store across multiple applications in your workspace.

When it comes to styling, I’m a big fan of using a shared styles library. You can create a library specifically for your styles and then import it into each of your applications. This ensures consistency across your projects and makes it easy to maintain your design system.

Here’s how you might set up a styles library:

// projects/my-styles-lib/src/lib/_variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;

// projects/my-styles-lib/src/lib/_mixins.scss
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

// projects/my-styles-lib/src/lib/styles.scss
@import 'variables';
@import 'mixins';

.btn-primary {
  background-color: $primary-color;
  @include box-shadow(0, 2px, 5px, rgba(0,0,0,0.2));
}

Then in your application’s styles.scss:

@import 'my-styles-lib';

Testing is another area where workspaces shine. You can set up shared test utilities and mocks in a library, making it easy to maintain consistent testing practices across your projects. I like to create a ‘testing’ library that includes common test helpers and mock data.

For example, you might have a file like this in your testing library:

// projects/testing-lib/src/lib/test-helpers.ts
export function createMockUser(overrides = {}) {
  return {
    id: 1,
    name: 'John Doe',
    email: '[email protected]',
    ...overrides
  };
}

Then in your tests:

import { createMockUser } from 'testing-lib';

describe('UserComponent', () => {
  it('should display user name', () => {
    const user = createMockUser({ name: 'Jane Doe' });
    // ... rest of your test
  });
});

This approach ensures consistency in your test data and makes it easy to create complex mock objects.

One thing to keep in mind when working with Angular workspaces is that they can get pretty large, especially if you’re working on a lot of projects. To keep things running smoothly, I recommend using lazy loading for your application modules. This can significantly improve load times, especially for larger applications.

Here’s a quick example of how to set up lazy loading:

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'users',
    loadChildren: () => import('./users/users.module').then(m => m.UsersModule)
  }
];

This loads the UsersModule only when the user navigates to the ‘/users’ route, keeping your initial bundle size smaller.

Another pro tip: use Git tags to manage versions of your workspace. This is especially useful if you’re publishing libraries from your workspace. After making changes and updating your version numbers, you can create a Git tag like this:

git tag -a v1.2.3 -m "Release version 1.2.3"
git push origin v1.2.3

This makes it easy to track which code was published in each version of your libraries.

Remember, communication is key when working on a shared workspace, especially if you’re part of a team. Make sure everyone understands the structure of the workspace and follows agreed-upon conventions for things like naming, file organization, and commit messages.

Lastly, don’t forget about documentation! It’s easy to overlook, but good documentation can save you and your team countless hours of confusion and frustration. I like to use Compodoc for generating documentation for Angular projects. It’s easy to set up and produces beautiful, comprehensive docs.

To install Compodoc, run:

npm install -g @compodoc/compodoc

Then, to generate documentation for your project:

compodoc -p tsconfig.json

This will create a ‘documentation’ folder with a full HTML website documenting your project structure, components, services, and more.

In conclusion, Angular workspaces are a powerful tool for managing multiple related projects. They promote code reuse, simplify dependency management, and make it easier to maintain consistency across your projects. With the tips and tricks we’ve covered here, you’ll be well on your way to becoming a workspace pro. Happy coding!