diff --git a/src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx b/src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx index bc648f39b30..4bf8a00a71c 100644 --- a/src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx +++ b/src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx @@ -137,11 +137,16 @@ Amplify.configure(amplifyconfig); export class AppModule {} ``` -Next, import the default theme inside __styles.css__: - -```css -@import '~@aws-amplify/ui-angular/theme.css'; -```` +Next, import the default theme inside __angular.json__: + +```json title="angular.json" +... + "styles": [ + "node_modules/@aws-amplify/ui-angular/theme.css", + "src/styles.css" + ], +... +``` Next, open __app.component.html__ and add the `amplify-authenticator` component. diff --git a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx index 26542619284..09325ce4b44 100644 --- a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx @@ -129,7 +129,7 @@ npm add aws-amplify ``` - + In your app's entry point, typically **main.tsx** for React apps created using Vite, make the following edits: @@ -142,6 +142,15 @@ Amplify.configure(outputs); + +In your app's entry point, typically **main.ts** or **app.component.ts** for Angular apps created using Vite, make the following edits: +```tsx title="src/main.ts" +import { Amplify } from 'aws-amplify'; +import outputs from '../amplify_outputs.json'; +Amplify.configure(outputs); +``` + + In your app's entry point, typically **main.ts** for Vue apps created using Vite, make the following edits: diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index 1255ad7d8b6..92c28539744 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -1111,7 +1111,7 @@ import { TodosComponent } from './todos/todos.component'; import { Amplify } from 'aws-amplify'; import outputs from '../../amplify_outputs.json'; // highlight-next-line -import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular'; +import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular'; Amplify.configure(outputs); @@ -1125,11 +1125,9 @@ Amplify.configure(outputs); }) export class AppComponent { title = 'amplify-angular-template'; - // highlight-start - constructor(public authenticator: AuthenticatorService) { - Amplify.configure(outputs); - } - // highlight-end + + constructor() {} + } ``` Update the application UI and include styles.