Styling missing for amplify-authenticator (Angular 6)

[mattgogerly]

Describe the bug
When using the component in an Angular app the view appears, but has no styling at all.

To Reproduce
Steps to reproduce the behavior:
$ amplify init
$ amplify add auth

Add following to main.ts

import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);

and import the AmplifyAngularModule/AmplifyService into the module. Then try to use the component in the app.

Expected behavior
The login etc. views should display with styling.

Screenshots
https://gyazo.com/94915aa87612a6acd60391cebe36c7be

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome/Firefox
• Version: Latest

[mattgogerly]

Figured out I need to install @aws-amplify/ui separately. However, country flags seem to be missing and the forms don't fit in their container.. any suggestions?

[nickypeh]

I also got the same problem and i even had to import the theme at my own style.css in my angular apps.

@import "~@aws-amplify/ui/src/Theme.css"; @import "~@aws-amplify/ui/src/Angular.css";

After import the styling also seems to be off.
Moreover, the documentation for the amplify-angular is not very clear. Need help on how to import the CSS default styling .

[nisarahmedah]

I had the same issue. Installed aws-amplify/ui as per the comment of @mattgogerly:
npm i @aws-amplify/ui

The documentation for Angular is not up to mark. I see there is lots for React!

[shawnlauzon]

I copied the files from @aws-amplify/ui into my assets directory, and then in app.scss:

@import "../assets/Theme.css";
@import "../assets/Angular.css";

Which is a hack, but it works for now

[jordanranz]

Hey @mattgogerly,

The documentation for adding styling to the angular UI components needs to be updated. We will get this documentation added asap.

You should be able to simply add:
@import '~aws-amplify-angular/theme.css';

As for the country flags missing, we will investigate why this is happening.

[raoulsigne]

Hi @jordanranz

I have been able to integrate correctly the css as you suggested into your response but I'm still wondering how to solve the country flag which is not apprearing into the form

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.