Temkit
commented
4 years ago Don't close the issue, this is no more than a workaround, thank you @wickstargazer for what you've done !
Closed alexAlchemy closed 3 years ago
Temkit
commented
4 years ago Don't close the issue, this is no more than a workaround, thank you @wickstargazer for what you've done !
wickstargazer
commented
4 years ago Hey guys, thankz for the response, i opened a PR for this and waiting for them to officially
For now, anyone has a hurry or urgent need like us, please use the ‘@flowaccount/awns-amplify-angular’ :)
Regards, Wick
cedvdb
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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/nodeupgrading tslib did NOT help:npm i tslib
Or we can just set the aot to false in angular.json file.
singhrawatbipin
commented
4 years ago 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
commented
4 years ago 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/xrHad to install aws-amplify in order to get rid of this.
wickstargazer
commented
4 years ago So version 5.0.7 is working now?
djoyrocks
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago @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
commented
4 years ago Hey guys, thankz for the response, i opened a PR for this and waiting for them to officially
- Update yarn version to support ivy
- Review the code and confirm the tests
- 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
commented
4 years ago I've had enough. aws-amplify does not work with (our) Angular 9.
ericclemmons
commented
4 years ago @kleky We've refactored the UI components to support Angular 9:
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
commented
4 years ago 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
commented
4 years ago 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
commented
3 years ago 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
commented
3 years ago 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
commented
3 years ago 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
commented
3 years ago 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
commented
3 years ago 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! 🙏
github-actions[bot]
commented
2 years ago 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 *-help channels or Discussions for those types of questions.
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: Yes