Amplify-js: doesn't work with angular 8

[henrysachs]

Describe the bug
develop your application run ng build and see the error below. It only fails when compiling. I migrated from angular 7 to 8.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
Angular 8

Additional context
Add any other context about the problem here.

:8080/vendor-es2015.js:180795 Uncaught ReferenceError: process is not defined
    at Object../node_modules/aws-sdk/lib/browser_loader.js (:8080/vendor-es2015.js:180795)
    at __webpack_require__ (:8080/runtime-es2015.js:79)
    at Object../node_modules/aws-sdk/browser.js (:8080/vendor-es2015.js:179691)
    at __webpack_require__ (:8080/runtime-es2015.js:79)
    at Object../node_modules/@aws-amplify/core/lib/Facet.js (:8080/vendor-es2015.js:160462)
    at __webpack_require__ (:8080/runtime-es2015.js:79)
    at Object../node_modules/@aws-amplify/core/lib/index.js (:8080/vendor-es2015.js:162463)
    at __webpack_require__ (:8080/runtime-es2015.js:79)
    at Object../node_modules/@aws-amplify/auth/lib/Auth.js (:8080/vendor-es2015.js:156332)
    at __webpack_require__ (:8080/runtime-es2015.js:79)

[henrysachs]

this seems to be somehow related to the build target in the tsconfig.json.

[henrysachs]

any update on this?

[dssantana]

same issue here, any updates?

[gerrytsui]

I have no problem upgrading my project to Angular 8.0.0 ( released yesterday) . No problem with ng [ serve | test | e2e | build --prod --aot]
with enableIvy set to false.
Applied the patch to Auth.js ( the JS.isEmpty of this._config.storage)

My project uses { Auth, API, Analytics, ServiceWorker, Logger, Hub} from 'aws-amplify';
Here is my tsconfig.json:

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
//"angularCompilerOptions": {
// "enableIvy": true
//},
"files": [
"src/aws-exports.ts"
]
}

[dssantana]

@gerrytsui have you published your build and opened it in a browser? There are no problems serving or building, the problem is using the build

[dssantana]

@hernysachs I can build with the version released yesterday but I can’t use the build when published.

[pl4yradam]

@dssantana I have also been investigating this, you will see online there are things to do (window process). All this does is masks the error. im the same, dev does not work with angular 8 and amplify js.

My project uses { Auth, API, Analytics, ServiceWorker, Logger, Hub} from 'aws-amplify';

Do you think its worth getting a simple repo implemented showcasing the failure? NG Serve works fine, its to do with when it compiles the js through es and es2015 and by the looks of things how it uses 2015.

I wouldn't expect AWS to be behind with this

To add to this, the deciding factor to this working or not is if IVY is enabled.

Compiling without IVY works,
Compiling with IVY will not work. I think the aggressive treeshaking destroys amplify due to it not being strictly typed correctly. (I've found a few auth methods that cause strict type checking to fail.)

[gerrytsui]

OK. I have problem with the build too getting something about process in the console.
This fixes it: Change from es2015 to es5
//"target": "es2015",
"target": "es5",

and yes the app is public facing but requires credentials and I can't share the WIP works yet.

[dssantana]

This fixes it: Change from es2015 to es5
//"target": "es2015",
"target": "es5",

Not really, it's a workaround but you missed using es2015, one of the big changes in angular 8.

[pl4yradam]

Guys to help best assist the situation:

• Put down your package versions for amplify
• Send the tsconfig
• If you are using ivy or not

[dssantana]

"aws-amplify": "1.1.28", "aws-amplify-angular": "3.0.3",

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

I'm not using Ivy

[gerrytsui]

The "uncaught ReferenceError: process is not defined" is similar to the "global" we got back when we upgraded to angular 6. If you recall we were instructed per Amplify angular doc to add the following into the polyfills.ts

(window as any).global = window;

As a test I also inserted the following

(window as any).process = {
env: { DEBUG: undefined },
};

and it is fine now with target: es2015

My custom service_worker.js is still working.. I have to research further.

"aws-amplify": "^1.1.28",
"aws-amplify-angular": "^3.0.3",

angular-cli 8.0.1
all other NPM are up-to-date except Typescript is 3.4.5 ( not 3.5.x)

[gerrytsui]

By defined a dummy "process" my webapp works 100% excepts the Pinout/Analytics recording calls are failing.

Ideally amplify/analytics should be upgraded to use the new Angular 8 Web Worker.

In the mean time I will be using target es5. Angular 8 is just a preview/transition to Ivy/Angular 9 ( in Oct/Nov)

[gerrytsui]

OK. I found a way to properly Polyfill the "process is not defined"

npm install -S process

the add the following to your polyfills.ts

import * as process from 'process';
window['process'] = process;

and set tsconfig.json

"target": "es2015",

[pl4yradam]

I am not sold yet on putting the process flag in as it seems like a bandage
rather than something more solid. I can understand the window global though.

On Fri, 31 May 2019, 14:45 Gerry Tsui, [e-mail] wrote:

The "uncaught ReferenceError: process is not defined" is similar to the
"global" we got back when we upgraded to angular 6. If you recall we were
instructed per Amplify angular doc to add the following into the
polyfills.ts

(window as any).global = window;

As a test I also inserted the following

(window as any).process = {
env: { DEBUG: undefined },
};

and it is fine now with target: es2015

My customer service_worker.js is still working.. I have to research
further.

"aws-amplify": "^1.1.28",
"aws-amplify-angular": "^3.0.3",

angular-cli 8.0.1
all other NPM are up-to-date except Typescript is 3.4.5 ( not 3.5.x)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/aws-amplify/amplify-js/issues/3193?email_source=notifications&email_token=AFL4VWW2YP427JN5CGQ6NILPYETXFA5CNFSM4HJFSQO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWVIHBI#issuecomment-497714053,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFL4VWTEQSLYIRHDFS5K4UTPYETXFANCNFSM4HJFSQOQ
.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[henrysachs]

i agree with @pl4yradam and just commenting to not mark this as stale.

[cfarfan]

I'm having this issue too, solved using process polyfill (thanks @gerrytsui ) but I'm not sure if this approach is the best.

[miiihi]

Solved with adding following to polyfills.ts

// window.process needed by aws-amplify
(window as any).process = { browser: true };

as this is the same definition as aws browser loader tries to apply but fails because of undefined process.
see aws-sdk/lib/browser_loader.js:L35

if (typeof process === 'undefined') {
  process = {
    browser: true
  };
}

[anhnguyen72]

"angularCompilerOptions": {
"enableIvy": false
}
Set enableIvy=false at tsconfig.app.json. This work for me

[serekgrecki]

my solution, it works for me with angular 8:

1. yarn add process, yarn add @types/node
2. in polyfills.ts add:
   import * as process from 'process';
window['process'] = process;
   
   
   
   1. in tsconfig.app.json add:
      
      "compilerOptions": {

...

"types": ["node"]

}
   
   
   2. tsconfig.json
      
      "target": "es2015"
   
   

[sammartinez]

We do call this out in our documentation that we let people know to use polyfills in order to resolve this issue. The Compiler Options are also called out in the next section of the link, Setup. Resolving issue as the above links as well as the above solutions is what we would do as well.

[henrysachs]

Then add it to your documentation for angular 8 support.

[fishermr]

This solution worked for my AWS Angular project written up in the current Amplify doc:
Angular 8.0.1
Amplify 1.1.29
polyfills:
import 'zone.js/dist/zone'; // Included with Angular CLI.
(window as any).global = window;
(window as any).process = {
env: { DEBUG: undefined },
};

[Crisp3333]

@fishermr thanks a lot! Problem solved.

[brandon-twitty]

This is garbage two times I have followed this to the T https://docs.amplify.aws/start/q/integration/angular and it doesnt work . Ive tried every single one of these suggestions too.. This is Amazon this seems simple but apparently not, my errors:

node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:73:38 - error TS2304: Cannot find name 'Omit'.

73 function getJSType(scalar: keyof Omit): 'string' | 'number' | 'boolean';
~~~~
node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:83:69 - error TS2304: Cannot find name 'Omit'.

83 export declare function isGraphQLScalarType(obj: any): obj is keyof Omit;
~~~~
node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:98:17 - error TS2304: Cannot find name 'Omit'.

98 type: keyof Omit | ModelFieldType | NonModelFieldType | EnumFieldType;
~~~~
node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:115:36 - error TS2304: Cannot find name 'Omit'.

115 export declare type ModelInit = Omit;
~~~~
node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:119:39 - error TS2304: Cannot find name 'Omit'.

119 export declare type MutableModel = Omit, 'id'>;

I dont understand this has been a lot of time wasted about ot just go back to spring security