After upgrade to Angular 9 get error "ERROR in Cannot read property 'length' of undefined" when building aws-amplify-angular #4681
Comments
alexAlchemy
added
the
to-be-reproduced
|
@alexAlchemy Have you switched your rendering engine to Ivy in Angular 9 or have you already opted for Ivy in your Angular 8 project? |
|
@hfahlbusch Those issues are specific to Amplify, or is there a broader issue thread or PR for |
|
I'm looking into this, but we do have a note in our docs regarding Ivy support:
|
|
@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. |
|
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. |
|
@ericclemmons The template check is root cause of multiple issues. For example this issue => #3620 Sadly there is already a PR pending since a few month, that could prevent these additional issues. |
|
@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
added
bug
|
(Calling this a bug, because it seems to be more of a compatibility issue than a feature request.) |
|
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:
@NgModule({
imports: [CommonModule, FormsModule],
declarations: [DynamicComponentDirective, ...components],
entryComponents: [...components],
providers: [],
exports: [...components],
})
export class AmplifyAngularModule {}Precompiled 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 |
|
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),
~~~~~~~~~~~~~~~~~~~~~~~~~~
|
ERROR TypeError: Cannot read property 'viewContainerRef' of undefined |
|
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. |
|
hi guys! I have the same error |
|
I am experiencing the same issue after upgrading to Angular 9. Wondering if anyone is aware of an ETA on the fix for this? |
|
Experiencing the same issue here after upgrading to Angular 9 ! in tsconfig.app.json :
|
it works, but I guess using Ivy is the main feature of angular new change/release |
|
I tried that Temkit says, but now I have this lol |
|
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: |
Tried this but now getting a new error: upgrading types/node node did NOT help: |
|
we are f*cked guys lol |
|
We're getting some underlying changes out the door, then we'll get back to checking out the latest v9 stuff, thanks to #4883! |
|
Hello, guys any update on that. I am still stuck :) |
|
Just found out the issue regarding The library does use the spread syntax (operator There is a Angular issue about that, in this case: ngcc: libraries using spread operator in object literals cannot be processed. |
|
@KingDarBoja That issue seems to have been fixed, and included as far back as rc.11: angular/angular@9.0.0-rc.11...master Rebroken, maybe? |
|
I'm getting this and we are not even using Ionic.
|
I had the similar issue and this is how I resolved it. |
I had the similar issue and this is how I resolved it. |
Did u use the package I published? |
Or we can just set the aot to false in angular.json file. |
No, I have been using default. |
|
I just tried again by updating to the latest version of 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/xrHad to install |
|
So version 5.0.7 is working now? |
|
Hi, I have faced the same issue with Angular 9.0.1. "dependencies": { Now I am getting content security policy error while loading aws-lex-audio.js |
|
Hi After tackling CSP error again getting an error
|
|
Hi I'm using my Any ideas? |
|
So the version of |
|
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 |
|
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. |
|
@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 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. |
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? |
|
I've had enough. aws-amplify does not work with (our) Angular 9. |
|
@kleky We've refactored the UI components to support Angular 9: Migration should only require a few lines to update:
Let us know if that resolves things for you! |
|
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. 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? |
|
same issue is happening in a non Angular project, my build is using vue.js this is the error coming up: |
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. |
|
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? |
|
Hi, i think i took this repo to be the one pulled as |
|
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:
(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:
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! 🙏 |
|
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 |
and others
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
tsconfig.json
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: YesThe text was updated successfully, but these errors were encountered: