Amplify-js: Many files in Angular production build with Amplify

[jrrewers]

Do you want to request a feature or report a bug?
_Bug_

What is the current behavior?
_Using AmplifyService and Authetication component makes production build consist of 102 files_

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.
1. Create new project:

ng new someName
cd someName
npm install
npm install aws-amplify-angular --save
npm install aws-amplify --save

2. Create config file

export const gatewayUrl = 'https://sdssdsfsf.execute-api.eu-west-1.amazonaws.com/sdsdsdsdsd/'
export const myEndopint = {
  name: 'myEndopint',
  endpoint: `${gatewayUrl}myEndopint`,
  region: 'eu-west-1'
}
export const awsConfig = {
  Auth: {
    identityPoolId: 'pool_id',
    region: 'eu-west-1',
    userPoolId: 'pool_id',
    userPoolWebClientId: 'webclientid',
  },
  API: {
    endpoints: [myEndopint]
  }
}

3.Initialize Amplify in main.ts

import Amplify from 'aws-amplify';
import {awsConfig} from './aws-config'
Amplify.configure(awsConfig);

4.Modify app.module.ts

import {AmplifyAngularModule, AmplifyService} from 'aws-amplify-angular';
...

@NgModule({
 ...
  imports: [
    ...
    AmplifyAngularModule,
  ],
  providers: [
    ...,
    AmplifyService
  ],
})

5. Modify tsconfig.app.json

...
"compilerOptions": {
 ...,
 "types": ["node"]
}

6. Modify polyfills.ts

...
(window as any).global = window;

6. Create prod build

ng build --prod
4 files, about 1.2 MB size are created in dist/

7. Add amplify service to app.component.ts

import {AmplifyService} from 'aws-amplify-angular';
...

constructor(private amplify: AmplifyService) {}

8. Add amplify-authenticator in app.component.html

...
<amplify-authenticator></amplify-authenticator>

9. Create prod build once again
102 files, about 3 MB size

Adding service to constructor and using amplify-authenticator causes prod build to create lot of files in prod build and significantly increases build time
Repository with issue reproduction (add your credentials in src/aws-config.ts)

What is the expected behavior?
_Production build consists of 4 files_

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?
_Windows 10, node 8.11.3, Angular Compiler CLI 6.0.3, Angular CLI 6.0.8, Amplify 1.0.4, Amplify-angular 1.0.2_

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[haverchuck]

@jrrewers Thanks for reporting this. We are taking a look.

[d2kx]

Can confirm. I also noticed that AmplifyService is already in the providers array in the AmplifyAngularModule, making it unnecessary to provide it ourselves, and AmplifyService should probably become a tree-shakeable provider (new with Angular 6) in the future: https://coryrylan.com/blog/tree-shakeable-providers-and-services-in-angular

I also noticed that that AmplifyAngularModule lists all of the UI components in the entryComponents array, for which I don't see any reason as the components are already exported and which might be part of the problem.

[haverchuck]

@D2KX - Thanks - we are currently looking at restructuring the package to address these issues.

[HelloQingGuo]

I have the same issue here after using AmplifyService !!!
I checked those generated js chunks, they are ionic stuff which I did not use in the project.
I guess it did not remove ionic module when bundling.
Please help !

[plastikaweb]

I have managed to overcome the problem by installing subpackages instead of the angular support package. So for example, I only need support for cognito so I just add:

"@aws-amplify/api": "^1.0.5",
"@aws-amplify/auth": "^1.0.5",

My angular 6 build looks like this now:

In this way we don't have the amplifyService served by the aws-amplify-angular package to inject in the app, so I simply use Auth importing it:

import Auth from '@aws-amplify/auth';

[d2kx]

Well, yeah, as long as you don't inject AmplifyService you can also keep using the full aws-amplify package, but that is barely a workaround.

Fortunately, it seems they are working on it, as can be seen here: https://github.com/aws-amplify/amplify-js/pull/1441 - not sure yet if it fixes all of the Angular-related issues, as it isn't merged yet.

[haverchuck]

@D2KX @plastikaweb @HelloQingGuo @jrrewers
We are indeed working on this - the PR is in review, but you can try out the branch
here if you wish. Any feedback you have on it would be much appreciated.

The branch uses rollup to bundle the library and gets rid of the Ionic dependency.

[d2kx]

I can confirm the many-files issue is fixed with aws-amplify-angular 1.0.4-unstable.0.

The bundle size is slightly smaller, but still gigantic, because it still includes absolutely everything from aws-amplify even if you don't need it. But that is a different issue.

[haverchuck]

@D2KX Yes, the bundle is still larger than it needs to be. I am going to open a second issue for this.

https://github.com/aws-amplify/amplify-js/issues/1469

[jrrewers]

@haverchuck @D2KX I upgraded aws-amplify to 1.0.6 and aws-wmplify-angular 1.0.3 in package.json, deleted node_modules, run npm install and problem still occurs.
I also updated repository reproducing the problem.
Using aws-amplify-angular 1.0.4-unstable.0 doesn't help either.

[haverchuck]

@jrrewers I took a look at the repository and it looks like the package-lock.json file is still using the older aws-amplify-angular package? Does it help if you delete the package-lock.json and reinstall?

[jrrewers]

@haverchuck After upgrading to aws-amplify 1.0.10 and aws-ampliy-angular 2.0.2 problem disappeared and production build consist of 4 files.