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

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

I’m having the same issue. Disabling Ivy does get the build to succeed but i still can’t get the <amplify-authenticator></amplify-authenticator> 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)

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. 🙏

@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!

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),
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

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

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

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? 👶 🍼

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.

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 }

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 !!!

@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.

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

@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?

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.

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

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.

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

@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

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

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

@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