search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.38k stars 2.1k forks source link

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

Closed alexAlchemy closed 3 years ago

alexAlchemy 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:

image

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 commented 4 years ago

@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 commented 4 years ago

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

ericclemmons commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

LosD commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

image

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

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

Temkit 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 }

rodrigorellana 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 }

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

rodrigorellana commented 4 years ago

image

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

mjkelley354 commented 4 years ago

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 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/node upgrading tslib did NOT help: npm i tslib

rodrigorellana commented 4 years ago

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

ericclemmons commented 4 years ago

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 commented 4 years ago

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

KingDarBoja commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

wickstargazer commented 4 years ago

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

Temkit commented 4 years ago

@KingDarBoja 

aws-amplify": "^2.2.2",
aws-amplify-angular": "^4.1.3",
olivierto commented 4 years ago

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 notifications@github.com 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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

damogallagher commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

Capture

DeniseJames commented 4 years ago

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