Contributing

May 5, 2023 · View on GitHub

Development Structure

@aws-amplify/ui-angular utilizes a monorepo structure to manage devDependencies and the actual packages separately.

This directory (packages/angular) contains base dependencies for developing angular packages. The actual code for @aws-amplify/ui-angular is located in projects/ui-angular directory.

packages/angular/
├── projects/ui-angular/ # where the actual `@aws-amplify/ui-angular` library lives
│   ├── src/ # contains src files for UI library code.
│   └── package.json # contains dependencies that library needs (e.g. xstate)
│
├── dist/ui-angular/ # this is auto-generated on build. Deployments will only happen from this folder.
│   └── esm2015/
│   └── fesm2015/
│   └── lib/
│   └── package.json # same as the above, but defines extra fields like
│                    # main, module, esm2015, typings, sideEffects.
│
└── package.json # contains base dependencies for developing angular packages.
                 # This is only for infrastructure purpose! Shouldn't be
                 # published or be referenced by other dependencies.

Getting Started

  1. Navigate to the root of your local clone of aws-amplify/amplify-ui
  2. Run yarn setup
  3. Run yarn angular dev

This will start building @aws-amplify/ui-angular in watch mode. To test your changes, you can utilize examples/angular to run examples on Angular. Please see examples README and e2e README to get started.

Depenencies

@aws-amplify/ui-react depends on @aws-amplify/ui for theming, state management, and translation logic. If you're looking for change in these, please refer to @aws-amplify/ui README.

Testing for Production

After you tested your change, you can run yarn angular build and yarn angular-example build from monorepo to run build for production.

Troubleshooting

If you're cross developing angular and angular-example, make sure you're running the same type of commands -- either run yarn angular dev and yarn angular-example dev together, or run yarn angular build and yarn angular-example build together. Not doing so will result in IVY compiler conflict.