Angular Authenticator Setup

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.
 

src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx

@@ -129,7 +129,7 @@ npm add aws-amplify
 ```
 </InlineFilter>
 
-<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "javascript", "nextjs", "react-native"]}>
 
 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);
 
 </InlineFilter>
 
+<InlineFilter filters={["angular"]}>
+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);
+```
+</InlineFilter>
+
 <InlineFilter filters={["vue"]}>
 
 In your app's entry point, typically **main.ts** for Vue apps created using Vite, make the following edits:

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.