Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styling missing for amplify-authenticator (Angular 6)

See original GitHub issue

Describe the bug When using the <amplify-authenticator> 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 <amplify-authenticator> 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

Issue Analytics

State:
Created 5 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

5reactions

mattgogerlycommented, Oct 9, 2018

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?

3reactions

jordanranzcommented, Dec 3, 2018

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.