Amplify-js: After upgrade to Angular 9 get error "ERROR in Cannot read property 'length' of undefined" when building aws-amplify-angular

[alexAlchemy]

Describe the bug
The application used aws-amplify and aws-amplify-angular. It was building as expected when on angular version 8 but after upgrade to angular version 9 the build process throws up the following error:

Tried uninstalling and installing the npm packages to makes sure its on latest but this didn't fix the issue.

It seems to be building the module as esm5 even though the target in tsconfig is set to es2015 which might be related but thats just a case.

Thanks in advance :-)

Update
I created a new angular 9 project and installed aws-amplify-angular and it built without error. The tsconfig.json was a little different so I copied it from the new project into my application but it didn't fix the error.

To Reproduce

package.json

{
  "name": "",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200 --ssl",
    "buildprod": "ng build --prod --configuration=production",
    "buildstaging": "ng build --prod --configuration=staging",
    "builddev": "ng build --prod --configuration=devdeploy",
    "stats": "ng build --stats-json",
    "analyze": "webpack-bundle-analyzer dist/stats.json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.7",
    "@angular/animations": "^9.0.0-rc.7",
    "@angular/cdk": "^9.0.0-rc.6",
    "@angular/common": "9.0.0-rc.7",
    "@angular/compiler": "9.0.0-rc.7",
    "@angular/core": "9.0.0-rc.7",
    "@angular/forms": "9.0.0-rc.7",
    "@angular/http": "7.2.15",
    "@angular/material": "^9.0.0-rc.6",
    "@angular/platform-browser": "9.0.0-rc.7",
    "@angular/platform-browser-dynamic": "9.0.0-rc.7",
    "@angular/router": "9.0.0-rc.7",
    "@aws-amplify/auth": "^2.1.2",
    "@aws-amplify/core": "^2.2.1",
    "@egjs/hammerjs": "^2.0.17",
    "@types/vis": "^4.21.19",
    "angular-file-uploader": "^5.0.2",
    "angular-webstorage-service": "^1.0.2",
    "aws-amplify-angular": "^4.1.2",
    "core-js": "^3.6.2",
    "jquery": "^3.4.1",
    "keycharm": "^0.3.1",
    "ngx-color-picker": "^8.2.0",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.4",
    "tslib": "^1.10.0",
    "vis-data": "^6.3.1",
    "vis-network": "^6.5.0",
    "vis-util": "^2.0.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular/cli": "^9.0.0-rc.7",
    "@angular/compiler-cli": "9.0.0-rc.7",
    "@angular/language-service": "9.0.0-rc.7",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "^5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.6.4",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.10"
  },
  "description": "sadf",
  "main": "index.js"
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "types": ["node"],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "module": "esnext",
    "baseUrl": "./",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true

  }
}

Environment

VS Code
Angular CLI: 9.0.0-rc.7
Node: 10.16.3
OS: win32 x64
Angular: 9.0.0-rc.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

[hfahlbusch]

@alexAlchemy Have you switched your rendering engine to Ivy in Angular 9 or have you already opted for Ivy in your Angular 8 project?
At the moment there are issues with template checking and/or ivy renderer.
You could try switching off Ivy and disabling "fullTemplateTypeCheck" in your angularCompilerOptions in tsconfig.json

[ericclemmons]

@hfahlbusch Those issues are specific to Amplify, or is there a broader issue thread or PR for fullTemplateTypeCheck?

[ericclemmons]

I'm looking into this, but we do have a note in our docs regarding Ivy support:

Please also note that the AWS Amplify Angular components do not yet support Ivy.
– https://aws-amplify.github.io/docs/js/angular#angular-6-support

[ericclemmons]

@alexAlchemy Can you confirm if you've opted out of ivy (per @hfahlbusch's suggestion) and are still experiencing issues?

If so, then this would be a bug for us to reproduce & address. Otherwise, we can mark this as a feature request to go into #3279 for Ivy support with Angular 9.

[alexAlchemy]

I did not have ivy on angular 8 and when I switched to 9 it was enabled by default.

I can confirm that by opting out of Ivy the build passed.

[hfahlbusch]

@ericclemmons The template check is root cause of multiple issues. For example this issue => https://github.com/aws-amplify/amplify-js/issues/3620

Sadly there is already a PR pending since a few month, that could prevent these additional issues.
https://github.com/aws-amplify/amplify-js/pull/3793

[ericclemmons]

@hfahlbusch Thanks for cross-linking these issues/PRs! The error from @alexAlchemy is different from #3620, but given the same solution, I think the best course of action is to validate #3793 against this issue as well and finally get it merged.

Thanks again for your help on this!

[ericclemmons]

(Calling this a bug, because it seems to be more of a compatibility issue than a feature request.)

[LosD]

I'm pretty sure that's not an issue with the template checker.

It seems to be an issue with the module using the spread operator and how it is pre-compiled (apparently it's targeted for old JS?), which makes the compiled module be a function instead of an array:

amplify-angular-module.ts:

@NgModule({
    imports: [CommonModule, FormsModule],
    declarations: [DynamicComponentDirective, ...components],
    entryComponents: [...components],
    providers: [],
    exports: [...components],
})
export class AmplifyAngularModule {}

Precompiled aws-amplify-angular.module.js:

var AmplifyAngularModule = /** @class */ (function () {
    function AmplifyAngularModule() {
    }
    AmplifyAngularModule.decorators = [
        { type: NgModule, args: [{
                    imports: [CommonModule, FormsModule],
                    declarations: __spreadArrays([DynamicComponentDirective], components),
                    entryComponents: __spreadArrays(components),
                    providers: [],
                    exports: __spreadArrays(components),
                },] },
    ];
    return AmplifyAngularModule;
}());
export { AmplifyAngularModule };
//# sourceMappingURL=aws-amplify-angular.module.js.map

[mpgo13]

Upgraded to angular 9, opting out of Ivy works for me, but would love to see Ivy support soon!

ERROR in Failed to compile entry-point aws-amplify-angular (module as esm5) due to compilation errors:
node_modules/aws-amplify-angular/dist/src/aws-amplify-angular.module.js:93:35 - error NG1010: Expected array when reading the NgModule.declarations of AmplifyAngularModule

93                     declarations: __spreadArrays([DynamicComponentDirective], components),
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/aws-amplify-angular/dist/src/aws-amplify-ionic-module.js:67:35 - error NG1010: Expected array when reading the NgModule.declarations of AmplifyIonicModule

67                     declarations: __spreadArrays(components),
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

[ddotx]

ERROR TypeError: Cannot read property 'viewContainerRef' of undefined

at PhotoPickerComponent.push../node_modules/aws-amplify-angular/dist/src/components/storage/photo-picker-component/photo-picker.factory.js.PhotoPickerComponent.loadComponent (photo-picker.factory.js:45)
at PhotoPickerComponent.push../node_modules/aws-amplify-angular/dist/src/components/storage/photo-picker-component/photo-picker.factory.js.PhotoPickerComponent.ngOnInit (photo-picker.factory.js:28)

[KingDarBoja]

Updating to Angular 9 trigger these warning and error logs:

WARNING in Entry point 'aws-amplify-angular' contains deep imports into 'D:/Programming/pluriza_projects/website/node_modules/rxjs/Subject', 'D:/Programming/pluriza_projects/website/node_modules/rxjs/Observable'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

ERROR in Failed to compile entry-point aws-amplify-angular (module as esm5) due to compilation errors:
node_modules/aws-amplify-angular/dist/src/aws-amplify-angular.module.js:93:35 - error NG1010: Expected array when reading the NgModule.declarations of AmplifyAngularModule

93                     declarations: __spreadArrays([DynamicComponentDirective], components),
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/aws-amplify-angular/dist/src/aws-amplify-ionic-module.js:67:35 - error NG1010: Expected array when reading the NgModule.declarations of AmplifyIonicModule

67                     declarations: __spreadArrays(components),

Waiting for some release in the meantime.

[rodrigorellana]

hi guys! I have the same error
so, we have to wait for a new amplify release ??

[damogallagher]

I am experiencing the same issue after upgrading to Angular 9. Wondering if anyone is aware of an ETA on the fix for this?

[Temkit]

Experiencing the same issue here after upgrading to Angular 9 !
I disabled the IVY compiler to successfully build !

in tsconfig.app.json :

"angularCompilerOptions": { "enableIvy": false }

[rodrigorellana]

Experiencing the same issue here after upgrading to Angular 9 !
I disabled the IVY compiler to successfully build !

in tsconfig.app.json :

"angularCompilerOptions": { "enableIvy": false }

it works, but I guess using Ivy is the main feature of angular new change/release

[rodrigorellana]

I tried that Temkit says, but now I have this lol

[mjkelley354]

I'm having the same issue. Disabling Ivy does get the build to succeed but i still can't get the ui component to work.

Throws the following in the browser:
auth.component.html:1 ERROR TypeError: Cannot read property 'viewContainerRef' of undefined
at AuthenticatorComponent.push../node_modules/aws-amplify-angular/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.loadComponent (authenticator.factory.js:43)
at AuthenticatorComponent.push../node_modules/aws-amplify-angular/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.ngOnInit (authenticator.factory.js:27)
at checkAndUpdateDirectiveInline (core.js:32822)
at checkAndUpdateNodeInline (core.js:45557)
at checkAndUpdateNode (core.js:45496)
at debugCheckAndUpdateNode (core.js:46519)
at debugCheckDirectivesFn (core.js:46462)
at Object.updateDirectives (auth.component.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:46450)
at checkAndUpdateView (core.js:45461)

[divinealpine]

Experiencing the same issue here after upgrading to Angular 9 !
I disabled the IVY compiler to successfully build !

in tsconfig.app.json :

"angularCompilerOptions": { "enableIvy": false }

Tried this but now getting a new error:

ERROR in node_modules/@types/node/index.d.ts:73:11 - error TS2300: Duplicate identifier 'IteratorResult'.

73 interface IteratorResult<T> { }
             ~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6
    41 type IteratorResult<T, TReturn = any> = IteratorYieldResult<T> | IteratorReturnResult<TReturn>;
            ~~~~~~~~~~~~~~
    'IteratorResult' was also declared here.
node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6 - error TS2300: Duplicate identifier 'IteratorResult'.

41 type IteratorResult<T, TReturn = any> = IteratorYieldResult<T> | IteratorReturnResult<TReturn>;
        ~~~~~~~~~~~~~~

  node_modules/@types/node/index.d.ts:73:11
    73 interface IteratorResult<T> { }
                 ~~~~~~~~~~~~~~
    'IteratorResult' was also declared here.
src/app/app-routing.module.ts:22:7 - error TS2343: This syntax requires an imported helper named '__spreadArrays' which does not exist in 'tslib'. Consider upgrading your version of 'tslib'.

22       ...homeRoutes,
         ~~~~~~~~~~~~~

upgrading types/node node did NOT help: npm install --save-dev @types/node
upgrading tslib did NOT help: npm i tslib

[rodrigorellana]

we are f*cked guys lol
let's wait for angular 10

[ericclemmons]

We're getting some underlying changes out the door, then we'll get back to checking out the latest v9 stuff, thanks to #4883!

[arkhedr]

Hello, guys any update on that. I am still stuck :)

[KingDarBoja]

Just found out the issue regarding aws-amplify-angular:

The library does use the spread syntax (operator ...) on ngModule declarations like as amplify-ionic-module.ts, but looks like the new Angular version broke it.

There is a Angular issue about that, in this case: ngcc: libraries using spread operator in object literals cannot be processed.

[LosD]

@KingDarBoja That issue seems to have been fixed, and included as far back as rc.11: https://github.com/angular/angular/compare/9.0.0-rc.11...master

Rebroken, maybe?

[KingDarBoja]

@LosD Good catch! If that's the case, someone should submit a ticket on the Angular repository.

EDIT 1
Nevermind, someone already submitted a issue and there is a PR waiting to get reviewed regarding this. error NG1010: Expected array when reading the NgModule.declarations of ExtendedModule

EDIT 2
To test the fix before getting merge, please replace the following devDependency on your package.json file:

"@angular/compiler-cli": "https://621158-24195339-gh.circle-artifacts.com/0/angular/compiler-cli-pr35191-b93c5372e9.tgz",

It does fix the issue!

[Temkit]

Error: Error on worker #2: Error: Failed to compile entry-point aws-amplify-angular (module as esm5) due to compilation errors:
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of AmplifyAngularModule, but could not be resolved to an NgModule class

115 export declare class CommonModule {
~~~~
node_modules/@angular/forms/forms.d.ts:2699:22 - error NG6002: Appears in the NgModule.imports of AmplifyAngularModule, but could not be resolved to an NgModule class

2699 export declare class FormsModule {
~~~
node_modules/@angular/common/common.d.ts:115:22 - error NG6002: Appears in the NgModule.imports of AmplifyIonicModule, but could not be resolved to an NgModule class

115 export declare class CommonModule {
~~~~
node_modules/@angular/forms/forms.d.ts:2699:22 - error NG6002: Appears in the NgModule.imports of AmplifyIonicModule, but could not be resolved to an NgModule class

2699 export declare class FormsModule {
~~~

at ClusterWorker.compile (/Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/@angular/compiler-cli/ngcc/src/main.js:177:27)
at Worker.<anonymous> (/Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/worker.js:44:42)
at Worker.emit (events.js:200:13)
at process.<anonymous> (internal/cluster/worker.js:30:12)
at process.emit (events.js:200:13)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:84:9)
at ClusterMaster.onWorkerMessage (/Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:158:27)
at /Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:46:95
at ClusterMaster.<anonymous> (/Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:238:57)
at step (/Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/tslib/tslib.js:136:27)
at Object.next (/Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/tslib/tslib.js:117:57)
at /Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/tslib/tslib.js:110:75
at new Promise (<anonymous>)
at Object.__awaiter (/Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/tslib/tslib.js:106:16)
at EventEmitter.<anonymous> (/Users/knewtone/yet/projects/WorkSpace/softwares/teste91/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:232:32)
at EventEmitter.emit (events.js:200:13)

still having look alike problem using the package from build artifacts !!!

[digthewells]

The above solution using the newer compiler does work to get past the first error. Now stuck on...

ERROR in node_modules/aws-amplify-angular/dist/src/aws-amplify-angular.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

I don't know what else to try.

[KingDarBoja]

@digthewells Which version of aws-amplify-angular do you have on your package.json?

[wickstargazer]

@KingDarBoja what version are you using? I am stuck with the same error as @Temkit

[Temkit]

@KingDarBoja

aws-amplify": "^2.2.2",
aws-amplify-angular": "^4.1.3",

[olivierto]

The solution for me was to disable Ivy and to set importHelpers:true in my tsconfig.

I hope amplify-js will be ivy compatible soon!

Le 21 févr. 2020 à 06:42, Temkit Sidali [e-mail] a écrit :


@KingDarBoja

aws-amplify": "^2.2.2",
aws-amplify-angular": "^4.1.3",
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

[wickstargazer]

@olivierto i did all the above, the ngcc builds fine now but it comes back to this error when trying to serve the web

property 'viewContainerRef' of undefined
    at AuthenticatorComponent.push.../../../node_modules/aws-amplify-angular/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.loadComponent (authenticator.factory.js:43)

[digthewells]

@KingDarBoja I was able to get past all errors and build successfully. Here are the steps I took...

1. Install latest of everything...npm and all dependencies.
2. Updated package.json to this as stated above and did an install...

"@angular/compiler-cli": "https://621158-24195339-gh.circle-artifacts.com/0/angular/compiler-cli-pr35191-b93c5372e9.tgz",

this did get past the error but got the error I posted above.

1. I changed back to "@angular/compiler-cli": "^9.0.2" in package.json
2. Disabled Ivy in tsconfig.app.json by adding this...

"angularCompilerOptions": {
"enableIvy": false
}

1. I then turned set "fullTemplateTypeCheck": false in tsconfig.json
2. I removed all references to "aws-amplify-angular" from my code. This was causing an error. "aws-amplify" seems to work, but seems like losing features of the angular library. I haven't even researched how to work around this. The reason I did this was you can do most everything without this library just using "aws-amplify"

The only catch I see right now is not having authStateChange$ which is the only thing I use from the angular library to know when a user is logged in or out. I'm going to research this more because it may be a deal breaker for now.

1. ran npm install
2. ran npm run build:ssr

After this Amplify is running in Angular 9. Here are by dependencies...

"dependencies": {
"@angular/animations": "^9.0.2",
"@angular/cdk": "^9.0.1",
"@angular/common": "^9.0.2",
"@angular/compiler": "^9.0.2",
"@angular/core": "^9.0.2",
"@angular/forms": "^9.0.2",
"@angular/material": "^9.0.1",
"@angular/platform-browser": "^9.0.2",
"@angular/platform-browser-dynamic": "^9.0.2",
"@angular/platform-server": "^9.0.2",
"@angular/router": "^9.0.2",
"@nguniversal/express-engine": "^9.0.0",
"aws-amplify": "^2.2.5",
"aws-amplify-angular": "^4.1.6",
"express": "^4.15.2",
"guid-typescript": "^1.0.9",
"moment": "^2.24.0",
"rxjs": "~6.5.4",
"rxjs-compat": "^6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.900.3",
"@angular/cli": "^9.0.3",
"@angular/compiler-cli": "^9.0.2",
"@angular/language-service": "^9.0.2",
"@nguniversal/builders": "^9.0.0",
"@types/express": "^4.17.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.12.28",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}

ng version...

@angular-devkit/architect 0.900.2
@angular-devkit/build-angular 0.900.3
@angular-devkit/build-optimizer 0.900.3
@angular-devkit/build-webpack 0.900.3
@angular-devkit/core 9.0.2
@angular-devkit/schematics 9.0.3
@angular/cdk 9.0.1
@angular/cli 9.0.3
@angular/material 9.0.1
@ngtools/webpack 9.0.3
@nguniversal/builders 9.0.0
@nguniversal/common 9.0.0
@nguniversal/express-engine 9.0.0
@schematics/angular 9.0.3
@schematics/update 0.900.3
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2

Another note...I used localStorage in my app init and got an error when browsing to the page.

"ERROR { ReferenceError: localStorage is not defined at AppComponent.ngOnInit"

I removed it and all worked so if you are using ssr you may run into ReferenceErrors like this. I'm new to it and just trying to work through things.

I hope I didn't miss any steps. I spent hours on this yesterday just trying different things and this thread helped a lot, but I couldn't find the right combination...it is very frustrating. I may end up rolling back until this is fixed.

[KingDarBoja]

I have these version on my package json file:

"@aws-amplify/auth": "^2.1.5",
"@aws-amplify/core": "^2.2.4",
"@aws-amplify/storage": "^2.2.0",
"aws-amplify-angular": "^4.1.5",

And this is my tsconfig file on root folder:

{
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2017", "dom"],
        "plugins": [
            {
                "name": "typescript-tslint-plugin",
                "configFile": "./tslint.json"
            }
        ]
    },
    "exclude": ["node_modules", "**/*.spec.ts"]
}

[wickstargazer]

Ok guys, Thankz a ton for the heads up on @angular/compiler-cli .. That has gotten me to the right path.

Also to be able to get pass the ngcc error i had to add importHelpers:true in the tsconfig.json file.

However I was still getting the ViewContainerRef error. It seems like the container is undefined when trying to load the dynamic view!

So I have gone through some digging and found out that the error

property 'viewContainerRef' of undefined
    at AuthenticatorComponent.push.../../../node_modules/aws-amplify-angular/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.loadComponent (authenticator.factory.js:43)

is coming from the DynamicComponentDirective while its being loaded inside several classes which uses it to render the Ionic and Core parts differently

ngOnInit() {
        this.loadComponent();
    }

const viewContainerRef = this.viewContainerRef;
        viewContainerRef.clear();
        const componentRef = viewContainerRef.createComponent(componentFactory);

Hence i am doing a pull request for this issue right now, and i think it will solve the issue of dynamic view not written to support Angular 9.

However, The correct implmentation for IVY still needs to be done. This is being done under the following tsconfig.json settings!

importHelpers:true
"angularCompilerOptions": {
   "enableIvy": false
  },

Baby Steps Right? 👶 🍼

[ericclemmons]

Thanks everyone for your tenacity & research on this! We're actively working on Angular 9 (Ivy) support, so your help in "unblocking" development is incredibly helpful and welcomed. 🙏

[patran]

Angular 9.0.3 has been released. Does this issue still exist?

The following Angular 9 issues would seem relevant and they have been closed.

https://github.com/angular/angular/pull/35191
https://github.com/angular/angular/issues/35388

[mpgo13]

Upgraded to angular 9, opting out of Ivy works for me, but would love to see Ivy support soon!

ERROR in Failed to compile entry-point aws-amplify-angular (module as esm5) due to compilation errors:
node_modules/aws-amplify-angular/dist/src/aws-amplify-angular.module.js:93:35 - error NG1010: Expected array when reading the NgModule.declarations of AmplifyAngularModule

93                     declarations: __spreadArrays([DynamicComponentDirective], components),
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/aws-amplify-angular/dist/src/aws-amplify-ionic-module.js:67:35 - error NG1010: Expected array when reading the NgModule.declarations of AmplifyIonicModule

67                     declarations: __spreadArrays(components),
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

@patran my issues disappeared with Angular 9.0.3 :)

[ShahoG]

I can confirm the same, all the issues was resolved with this new update and I can also use Ivy :)

[damogallagher]

I am getting the following errors after updating to version 9.0.3 of Angular

node_modules/@angular/forms/forms.d.ts:2699:22 - error NG6002: Appears in the NgModule.imports of AmplifyIonicModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/forms) which declares FormsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

[ShahoG]

@damogallagher Here is what I did:

1. Upgraded Angular to 9.0.3
2. Removed the node_modules
3. npm i
4. Changed all targets in tsconfigs to _es6_

Then it required me to update another unrelated package, which I did and BAM it worked, Ivy and all

[damogallagher]

That is interesting. I performed the same steps, my target in tsconfig.json was es2015 and I am still getting the error. Details from my project are below
tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    },
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "incremental": true,
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": false,
    "strictInjectionParameters": true    
  }
}

tsconfig.app.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "outDir": "./out-tsc/app",
      "types": ["node"]
    },
    "files": [
      "src/main.ts",
      "src/polyfills.ts"
    ],
    "include": [
      "src/**/*.d.ts"
    ],
    "exclude": [
      "src/test.ts",
      "src/**/*.spec.ts"
    ]
  }

package.json

{
  "name": "MyApp",
  "version": "0.0.0",
  "license": "MIT",
 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "~1.1.0",
    "@angular/animations": "~9.0.3",
    "@angular/cdk": "~9.1.0",
    "@angular/common": "~9.0.3",
    "@angular/compiler": "~9.0.3",
    "@angular/core": "~9.0.3",
    "@angular/flex-layout": "~9.0.0-beta.29",
    "@angular/forms": "~9.0.3",
    "@angular/material": "~9.1.0",
    "@angular/platform-browser": "~9.0.3",
    "@angular/platform-browser-dynamic": "~9.0.3",
    "@angular/router": "~9.0.3",
    "@aws-amplify/api": "~2.1.5",
    "@aws-amplify/auth": "~2.1.5",
    "@aws-amplify/storage": "~2.2.0",
    "aws-amplify-angular": "~4.1.6",
    "@kolkov/angular-editor": "~1.1.1",
    "angular-google-charts": "~0.1.6",
    "angular2-chartjs": "~0.5.1",
    "change-case": "~4.1.1",
    "guid-typescript": "~1.0.9",
    "lodash": "~4.17.15",
    "ng-recaptcha": "~5.0.0",
    "ngx-cookie-service": "~2.4.0",
    "ngx-lightbox": "~2.1.2",
    "ngx-mat-select-search": "~2.1.1",
    "ngx-material-file-input": "~2.1.0",
    "polylabel": "~1.0.2",
    "rxjs": "~6.5.4",
    "tslib": "~1.11.0",
    "world-countries": "~3.0.0",
    "xlsx": "~0.15.5",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.3",
    "@angular/cli": "~9.0.3",
    "@angular/compiler-cli": "~9.0.3",
    "@angular/language-service": "~9.0.3",
    "@types/jasmine": "~3.5.7",
    "@types/jasminewd2": "~2.0.8",
    "@types/lodash": "~4.14.149",
    "@types/node": "~13.7.6",
    "codelyzer": "~5.2.1",
    "copyfiles": "~2.2.0",
    "cross-os": "~1.3.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "~1.5.2",
    "node-sass": "~4.13.1",
    "protractor": "~5.4.3",
    "sonar-scanner": "~3.1.0",
    "source-map-explorer": "~2.3.1",
    "ts-node": "~8.6.2",
    "tslint": "~6.0.0",
    "tslint-sonarts": "~1.9.0",
    "typescript": "~3.7.5"
  }
}

[naticaceres]

@damogallagher which error are you still getting?
I have followed this thread through and through in an angular 9 project I just created from scratch, using aws-amplify-angular only for subscribing to authStateChange$ in AmplifyService.
I noticed that same as the comments above by @wickstargazer I keep getting an error in the browser console

core.js:5873 ERROR TypeError: Cannot read property 'viewContainerRef' of undefined
at AuthenticatorComponent.push../node_modules/aws-amplify-angular/__ivy_ngcc__/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.loadComponent (authenticator.factory.js:47)
at AuthenticatorComponent.push../node_modules/aws-amplify-angular/__ivy_ngcc__/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.ngOnInit (authenticator.factory.js:31)
at callHook (core.js:3937)
at callHooks (core.js:3901)
at executeInitAndCheckHooks (core.js:3842)
at refreshView (core.js:11795)
at refreshDynamicEmbeddedViews (core.js:13142)
at refreshView (core.js:11800)
at refreshComponent (core.js:13217)
at refreshChildComponents (core.js:11508)

The error is slightly different with Ivy off.

It changes nothing turning on or off the fullTemplateTypeCheck.

Has anyone been able to solve this?
the people who posted that everything was fixed with the last angular version are using any component of aws-amplify-angular?

this is my package.json

{
"name": "myproject",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.3",
"@angular/cdk": "^9.1.0",
"@angular/common": "~9.0.3",
"@angular/compiler": "~9.0.3",
"@angular/core": "~9.0.3",
"@angular/forms": "~9.0.3",
"@angular/material": "^9.1.0",
"@angular/platform-browser": "~9.0.3",
"@angular/platform-browser-dynamic": "~9.0.3",
"@angular/router": "~9.0.3",
"@aws-amplify/auth": "^2.1.6",
"@aws-amplify/core": "^2.2.5",
"@aws-amplify/ui": "^1.1.5",
"aws-amplify": "^2.2.6",
"aws-amplify-angular": "^4.1.7",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.4",
"@angular/cli": "~9.0.4",
"@angular/compiler-cli": "~9.0.3",
"@angular/language-service": "~9.0.3",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}

[wickstargazer]

Hi guys, Some of you is working out probably because you are not using the Authentication module of the amplify-js library?

For those who find the same error, like @naticaceres its because Angular 9 renders ComponentHost differently and the way the dynamic component loads is not valid anymore especially in the Authentication Module

Hence i made the fix, tested it and created a PR for it.

Linking the investigation to this issue #4744 Comment

[damogallagher]

Hi

Just wondering if anyone has any fix for this item as of yet?
Are folks not using IVY until there is a fix so we can use the Authentication Module with Ivy?

Thanks
Damien

[wickstargazer]

Hi guys, i have published @flowaccoun/aws-amplify-angular version 4.2.11

@flowaccount/aws-amplify-angular

Its working with angular 9 now, the issue with the PR here is the auto-build isn't working because of yarn version and I changed the way its packaged, so it will take time for them to publish

We need to use it now, so I took the liberty :)

Cheers

[DeniseJames]

@wickstargazer I am using amplify-angular for the second time, first time with Ivy. I am getting this error after installing "@flowaccount/aws-amplify-angular'. do not know how to verify the version but it installed. Here is my error in the brower:

core.js:5882 ERROR TypeError: Cannot read property 'viewContainerRef' of undefined at AuthenticatorComponent.push../node_modules/aws-amplify-angular/__ivy_ngcc__/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.loadComponent (authenticator.factory.js:47) at AuthenticatorComponent.push../node_modules/aws-amplify-angular/__ivy_ngcc__/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.ngOnInit (authenticator.factory.js:31) at callHook (core.js:3941) at callHooks (core.js:3905) at executeInitAndCheckHooks (core.js:3846) at selectIndexInternal (core.js:9609) at Module.ɵɵadvance (core.js:9570) at AuthComponent_Template (auth.component.html:7) at executeTemplate (core.js:11937) at refreshView (core.js:11784)

I do not get the graphic to login in the browser. Any recommendations to get rid of this error?

[wickstargazer]

Hi @DeniseJames it seems like you are still importing import 'aws-amplify-angular'
you have to change it to import '@flowaccount/aws-amplify-angular' and it shall work :)

Because there is no more code in the ngOnInit() as well! 😄

[DeniseJames]

@wickstargazer It works! Thanks. I no longer have the styling, nor the button to create a new account. There is a link to go to the new account area. What is missing now? I know I may be off topic now and this probably can be closed.

[DeniseJames]

@wickstargazer I found out I was not using the css styleing,

npm i --save @aws-amplify/ui

Also include these imports to the top of styles.css

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

I nominate closing this issue. (Ignore the strike outs, not sure how to elminate them)

[Temkit]

Don't close the issue, this is no more than a workaround, thank you @wickstargazer for what you've done !

[wickstargazer]

Hey guys, thankz for the response, i opened a PR for this and waiting for them to officially

1. Update yarn version to support ivy
2. Review the code and confirm the tests
3. Merge the Pull Request and we can move back to the official package!

For now, anyone has a hurry or urgent need like us, please use the ‘@flowaccount/awns-amplify-angular’ :)

Regards,
Wick

[cedvdb]

I'm getting this and we are not even using Ionic.

node_modules/@angular/forms/forms.d.ts:2699:22 - error NG6002: Appears in the NgModule.imports of AmplifyIonicModule, but could not be resolved to an NgModule class.

[singhrawatbipin]

Describe the bug
The application used aws-amplify and aws-amplify-angular. It was building as expected when on angular version 8 but after upgrade to angular version 9 the build process throws up the following error:

Tried uninstalling and installing the npm packages to makes sure its on latest but this didn't fix the issue.

It seems to be building the module as esm5 even though the target in tsconfig is set to es2015 which might be related but thats just a case.

Thanks in advance :-)

Update
I created a new angular 9 project and installed aws-amplify-angular and it built without error. The tsconfig.json was a little different so I copied it from the new project into my application but it didn't fix the error.

To Reproduce

package.json

{
  "name": "",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200 --ssl",
    "buildprod": "ng build --prod --configuration=production",
    "buildstaging": "ng build --prod --configuration=staging",
    "builddev": "ng build --prod --configuration=devdeploy",
    "stats": "ng build --stats-json",
    "analyze": "webpack-bundle-analyzer dist/stats.json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.7",
    "@angular/animations": "^9.0.0-rc.7",
    "@angular/cdk": "^9.0.0-rc.6",
    "@angular/common": "9.0.0-rc.7",
    "@angular/compiler": "9.0.0-rc.7",
    "@angular/core": "9.0.0-rc.7",
    "@angular/forms": "9.0.0-rc.7",
    "@angular/http": "7.2.15",
    "@angular/material": "^9.0.0-rc.6",
    "@angular/platform-browser": "9.0.0-rc.7",
    "@angular/platform-browser-dynamic": "9.0.0-rc.7",
    "@angular/router": "9.0.0-rc.7",
    "@aws-amplify/auth": "^2.1.2",
    "@aws-amplify/core": "^2.2.1",
    "@egjs/hammerjs": "^2.0.17",
    "@types/vis": "^4.21.19",
    "angular-file-uploader": "^5.0.2",
    "angular-webstorage-service": "^1.0.2",
    "aws-amplify-angular": "^4.1.2",
    "core-js": "^3.6.2",
    "jquery": "^3.4.1",
    "keycharm": "^0.3.1",
    "ngx-color-picker": "^8.2.0",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.4",
    "tslib": "^1.10.0",
    "vis-data": "^6.3.1",
    "vis-network": "^6.5.0",
    "vis-util": "^2.0.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular/cli": "^9.0.0-rc.7",
    "@angular/compiler-cli": "9.0.0-rc.7",
    "@angular/language-service": "9.0.0-rc.7",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "^5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.6.4",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.10"
  },
  "description": "sadf",
  "main": "index.js"
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "types": ["node"],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "module": "esnext",
    "baseUrl": "./",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true

  }
}

Environment

Describe the bug
The application used aws-amplify and aws-amplify-angular. It was building as expected when on angular version 8 but after upgrade to angular version 9 the build process throws up the following error:

Tried uninstalling and installing the npm packages to makes sure its on latest but this didn't fix the issue.

It seems to be building the module as esm5 even though the target in tsconfig is set to es2015 which might be related but thats just a case.

Thanks in advance :-)

Update
I created a new angular 9 project and installed aws-amplify-angular and it built without error. The tsconfig.json was a little different so I copied it from the new project into my application but it didn't fix the error.

To Reproduce

package.json

{
  "name": "",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200 --ssl",
    "buildprod": "ng build --prod --configuration=production",
    "buildstaging": "ng build --prod --configuration=staging",
    "builddev": "ng build --prod --configuration=devdeploy",
    "stats": "ng build --stats-json",
    "analyze": "webpack-bundle-analyzer dist/stats.json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.7",
    "@angular/animations": "^9.0.0-rc.7",
    "@angular/cdk": "^9.0.0-rc.6",
    "@angular/common": "9.0.0-rc.7",
    "@angular/compiler": "9.0.0-rc.7",
    "@angular/core": "9.0.0-rc.7",
    "@angular/forms": "9.0.0-rc.7",
    "@angular/http": "7.2.15",
    "@angular/material": "^9.0.0-rc.6",
    "@angular/platform-browser": "9.0.0-rc.7",
    "@angular/platform-browser-dynamic": "9.0.0-rc.7",
    "@angular/router": "9.0.0-rc.7",
    "@aws-amplify/auth": "^2.1.2",
    "@aws-amplify/core": "^2.2.1",
    "@egjs/hammerjs": "^2.0.17",
    "@types/vis": "^4.21.19",
    "angular-file-uploader": "^5.0.2",
    "angular-webstorage-service": "^1.0.2",
    "aws-amplify-angular": "^4.1.2",
    "core-js": "^3.6.2",
    "jquery": "^3.4.1",
    "keycharm": "^0.3.1",
    "ngx-color-picker": "^8.2.0",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.4",
    "tslib": "^1.10.0",
    "vis-data": "^6.3.1",
    "vis-network": "^6.5.0",
    "vis-util": "^2.0.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular/cli": "^9.0.0-rc.7",
    "@angular/compiler-cli": "9.0.0-rc.7",
    "@angular/language-service": "9.0.0-rc.7",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "^5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.6.4",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.10"
  },
  "description": "sadf",
  "main": "index.js"
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "types": ["node"],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "module": "esnext",
    "baseUrl": "./",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true

  }
}

Environment

I had the similar issue and this is how I resolved it.
Go to the angular.json file then search for aot and if the value of aot is true then replace it with false.

[singhrawatbipin]

I am experiencing the same issue after upgrading to Angular 9. Wondering if anyone is aware of an ETA on the fix for this?

I had the similar issue and this is how I resolved it.
Go to the angular.json file then search for aot and if the value of aot is true then replace it with false.

[wickstargazer]

I'm getting this and we are not even using Ionic.

node_modules/@angular/forms/forms.d.ts:2699:22 - error NG6002: Appears in the NgModule.imports of AmplifyIonicModule, but could not be resolved to an NgModule class.

Did u use the package I published?

[singhrawatbipin]

Experiencing the same issue here after upgrading to Angular 9 !
I disabled the IVY compiler to successfully build !
in tsconfig.app.json :
"angularCompilerOptions": { "enableIvy": false }

Tried this but now getting a new error:

ERROR in node_modules/@types/node/index.d.ts:73:11 - error TS2300: Duplicate identifier 'IteratorResult'.

73 interface IteratorResult<T> { }
             ~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6
    41 type IteratorResult<T, TReturn = any> = IteratorYieldResult<T> | IteratorReturnResult<TReturn>;
            ~~~~~~~~~~~~~~
    'IteratorResult' was also declared here.
node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6 - error TS2300: Duplicate identifier 'IteratorResult'.

41 type IteratorResult<T, TReturn = any> = IteratorYieldResult<T> | IteratorReturnResult<TReturn>;
        ~~~~~~~~~~~~~~

  node_modules/@types/node/index.d.ts:73:11
    73 interface IteratorResult<T> { }
                 ~~~~~~~~~~~~~~
    'IteratorResult' was also declared here.
src/app/app-routing.module.ts:22:7 - error TS2343: This syntax requires an imported helper named '__spreadArrays' which does not exist in 'tslib'. Consider upgrading your version of 'tslib'.

22       ...homeRoutes,
         ~~~~~~~~~~~~~

upgrading types/node node did NOT help: npm install --save-dev @types/node
upgrading tslib did NOT help: npm i tslib

Or we can just set the aot to false in _angular.json_ file.

[singhrawatbipin]

I'm getting this and we are not even using Ionic.
node_modules/@angular/forms/forms.d.ts:2699:22 - error NG6002: Appears in the NgModule.imports of AmplifyIonicModule, but could not be resolved to an NgModule class.

Did u use the package I published?

No, I have been using default.

[KingDarBoja]

I just tried again by updating to the latest version of aws-amplify-angular (v5.0.7) and now getting a new error.

ERROR in The target entry-point "aws-amplify-angular" has missing dependencies:
 - @aws-amplify/analytics
 - @aws-amplify/api
 - @aws-amplify/pubsub
 - @aws-amplify/interactions
 - @aws-amplify/xr

Had to install aws-amplify in order to get rid of this.

[wickstargazer]

So version 5.0.7 is working now?

[djoyrocks]

Hi, I have faced the same issue with Angular 9.0.1.
I have upgraded to the latest angular version 9.1.1 and the project started to compile.

"dependencies": {
"@agm/core": "1.1.0",
"@angular/animations": "9.1.2",
"@angular/cdk": "9.0.0",
"@angular/common": "9.1.2",
"@angular/compiler": "9.1.2",
"@angular/core": "9.1.2",
"@angular/fire": "6.0.0",
"@angular/flex-layout": "9.0.0-beta.29",
"@angular/forms": "9.1.2",
"@angular/material": "9.0.0",
"@angular/material-moment-adapter": "9.0.0",
"@angular/platform-browser": "9.1.2",
"@angular/platform-browser-dynamic": "9.1.2",
"@angular/router": "9.1.2",
"@aws-amplify/ui-angular": "0.2.2",
"@ngrx/effects": "8.6.0",
"@ngrx/router-store": "8.6.0",
"@ngrx/store": "8.6.0",
"@ngrx/store-devtools": "8.6.0",
"@ngx-pwa/local-storage": "9.0.3",
"@ngx-translate/core": "12.1.1",
"@swimlane/dragula": "3.8.0",
"@swimlane/ngx-charts": "13.0.2",
"@swimlane/ngx-datatable": "16.0.3",
"@swimlane/ngx-dnd": "8.1.0",
"@types/moment": "2.13.0",
"@types/prismjs": "1.16.0",
"angular-calendar": "0.28.2",
"angular-gridster2": "9.0.1",
"angular-resize-event": "1.2.1",
"aws-amplify": "3.0.6",
"aws-amplify-angular": "5.0.6",
"chart.js": "2.9.3",
"classlist.js": "1.1.20150312",
"core-js": "3.6.4",
"d3": "5.15.0",
"date-fns": "2.9.0",
"firebase": "7.14.1",
"g": "2.0.1",
"guid-typescript": "1.0.9",
"hammerjs": "2.0.8",
"jquery": "3.4.1",
"lakmus": "0.3.0",
"lodash": "4.17.15",
"moment": "2.24.0",
"ng-appversion": "1.3.0",
"ng-dynamic-component": "6.0.0",
"ng2-charts": "2.3.0",
"ngx-color-picker": "9.0.0",
"ngx-cookie-service": "2.3.0",
"ngx-moment": "3.5.0",
"ngx-widget-grid": "8.0.0-patch1",
"npm": "6.13.7",
"perfect-scrollbar": "1.5.0",
"primeicons": "2.0.0",
"primeng": "9.0.5",
"prismjs": "1.19.0",
"rxjs": "6.5.4",
"rxjs-compat": "6.5.4",
"screenfull": "5.0.2",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/architect": "~0.900",
"@angular-devkit/build-angular": "~0.900.2",
"@angular-devkit/build-ng-packagr": "~0.900.2",
"@angular/cli": "9.1.1",
"@angular/compiler-cli": "9.1.2",
"@angular/language-service": "9.1.2",
"@angularclass/hmr": "2.1.3",
"@types/jasmine": "3.5.5",
"@types/jasminewd2": "2.0.8",
"@types/lodash": "4.14.149",
"@types/node": "^12.11.1",
"browser-sync": "2.26.7",
"codelyzer": "^5.1.2",
"firebase-tools": "^8.0.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.4.1",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "3.1.1",
"karma-jasmine-html-reporter": "1.5.2",
"ng-packagr": "^9.0.0",
"protractor": "5.4.3",
"ts-node": "8.6.2",
"tslint": "6.0.0",
"typescript": "3.7.5",
"webpack-bundle-analyzer": "3.6.0"
}

Now I am getting content security policy error while loading aws-lex-audio.js

[djoyrocks]

Hi After tackling CSP error again getting an error
ERROR TypeError: Cannot read property 'viewContainerRef' of undefined
at ChatBotComponent.push../node_modules/aws-amplify-angular/__ivy_ngcc__/dist/src/components/interactions/chatbot/chatbot.factory.js.ChatBotComponent.loadComponent

[jpekeene]

Hi I'm using import { Auth, Amplify } from 'aws-amplify'; to import amplify for authentication. Have just moved to Angular 9.1.4 and am getting the below:-
ERROR in ./node_modules/@aws-sdk/signature-v4/dist/es/cloneRequest.js 13:94-108 "export '__spreadArrays' was not found in 'tslib'

my tsconfig.json:-
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es6",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"@assets/": ["assets/"],
"@styles/": ["styles/"],
"@env/": ["environments/"]
}
}
}

Any ideas?

[jpekeene]

So the version of tslib that signature-v4 is using is old and doesn't have __spreadArrays so I tried just upgrading signature-v4 but then it seemed everything else in @aws-sdk was using the old tslib. So finally I did yarn upgrade @aws-sdk/* --save and that seems to have done the job, I can now load up the application.

[Bampho]

Also upgraded from Angular 8.3 to Angular 9 I gives me a compilation error: failed to find expected name of node (MatIconModule = /** @class */ (function () {
}

I recently moved from 1.x so I can't figure a lot of things as yet

[alexvdvalk]

AWS has released a new Amplify angular module for v9 and up, so I believe this current issue will not be resolved. I migrated to the new version and updated my app to v9 and it's quite different to this one, and the current documentation is limited.

This is the extent of the migration documentation so far.

[ericclemmons]

@alexvdvalk Can you click the feedback link on https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular#migration to open an issue in our https://github.com/aws-amplify/docs/ project so we can improve the migration flow?

Angular 9 became the latest release while @aws-amplify/ui-angular was in progress, so it got support by default.

Ideally, https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular#migration would be the easiest way to get things working in Angular 9, but if that's not the case, then we want to address that.

[alexvdvalk]

Hey guys, thankz for the response, i opened a PR for this and waiting for them to officially

1. Update yarn version to support ivy
2. Review the code and confirm the tests
3. Merge the Pull Request and we can move back to the official package!

For now, anyone has a hurry or urgent need like us, please use the ‘@flowaccount/awns-amplify-angular’ :)

Regards,
Wick

Thanks for sharing this. I've got it rendering on Angular 9 and Ivy, but the [hide] property on amplify-authenticator component the has stopped working for me. I'm trying to hide the signup link. any ideas or suggestions?

[kleky]

I've had enough. aws-amplify does not work with (our) Angular 9.

[ericclemmons]

@kleky We've refactored the UI components to support Angular 9:

https://docs.amplify.aws/ui/q/framework/angular

Migration should only require a few lines to update:

https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular#migration

Let us know if that resolves things for you!

[kleky]

Thanks, but there must be something weird in our app that's causing issues. I'm trying to move from using only amazon-cognito-identity-js, to using Amplify, but no matter what I do it won't build. I tried turning off aot and ivy, upgrading to latest ng v9, upgrading tslib and types/node, removing node_modules and re-installing and lots of other random installs in the hope of success.

ERROR in ./node_modules/@aws-amplify/datastore/lib-esm/datastore/datastore.js 277:10-19
"export 'immerable' was not found in 'immer'
ERROR in ./node_modules/@aws-amplify/datastore/lib-esm/datastore/datastore.js 291:10-19
"export 'immerable' was not found in 'immer'

I'll have to leave this for now, but maybe someone could let me know the state of amazon-cognito-identity-js, as this library is archived. Is it essentially deprecated?

[dvago]

same issue is happening in a non Angular project, my build is using vue.js

"aws-amplify": "^3.0.16",
"vue": "^2.6.11",
"vue-router": "^3.3.2",
"vuex": "^3.4.0"

this is the error coming up:

./node_modules/@aws-sdk/signature-v4/dist/es/cloneRequest.js
"export '__spreadArrays' was not found in 'tslib'

[sammartinez]

I'll have to leave this for now, but maybe someone could let me know the state of amazon-cognito-identity-js, as this library is archived. Is it essentially deprecated?

We do have amazon-cognito-identity-js within our packages, which package are you using?

[kleky]

I'll have to leave this for now, but maybe someone could let me know the state of amazon-cognito-identity-js, as this library is archived. Is it essentially deprecated?

We do have amazon-cognito-identity-js within our packages, which package are you using?

amazon-cognito-identity-js is the only library I'm using to use cognito on the front end. I looked at swapping it to use Amplify, but it simply would not build at all.

[sammartinez]

Understood @kleky but you mentioned that the package is archived, which it is not and is existing within our monorepo. Is this the package you are using or something else?

[kleky]

Hi, i think i took this repo to be the one pulled as npm i amazon-cognito-identity-js but looks like i was wrong - it actually pulls the package in the Amplify repo. My apologies.

[ericclemmons]

Hi everyone,

I've been reviewing this thread this morning, and I could use your help.

The original problem (and workaround) with Angular 9 prompted us to rewrite our UI components (starting with the Authenticator) to solve these issues:

https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular

_(The primary goal of this rewrite was to ensure Angular, React, and Vue versions stayed in sync with features & fixes.)_

But there are multiple similar, but different, issues as part of this thread that warrants their own research, debugging, and solutions.

So this is where I need your help:

• If you're using Angular 9, please migrate from aws-amplify-angular to @aws-amplify/ui-angular for first-class support.

  If anything doesn't meet your expectations, please open an issue with the specifics so we can address it there for you and all Angular/Vue/React users.

  (I just tested my Angular 9 app again with <amplify-authenticator> and it worked well!)

• If you're experiencing issues with aws-amplify and not aws-amplify-angular, please open a new issue.

• If you're experiencing something other problem, again, please open an issue.

Each of the problems you all are experiencing are important for us to resolve, which is why we've left this thread open for so long.

But, in the interest of tactically resolving these individual issues, we'll need to close this thread and move discussion to those instead.

Feel free to ping me (@ericclemmons) once you create an issue for tracking! 🙏