Asked  4 Months ago    Answers:  5   Viewed   367 times

I am trying to migrate from 5 to 6 using ng update and I get an error

Uncaught ReferenceError: Buffer is not defined
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/helpers.js (helpers.js:2)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/md5.js (md5.js:10)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/create-hash.js (create-hash.js:3)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/index.js (index.js:12)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js (vendor.js:47207)
    at __webpack_require__ (bootstrap:81)

Local environment works well for creating the new angular project. I don't use Buffer. It is something behind the scenes

Any ideas?


I was trying to update @types/node npm install --save-dev @types/node

+ @types/node@8.9.5
updated 1 package in 12.031s
[!] 26 vulnerabilities found [36141 packages audited]
    Severity: 11 Low | 13 Moderate | 2 High
    Run `npm audit` for more detail

if I run npm audit

npm ERR! code ENOAUDIT
npm ERR! audit Your configured registry ( does not support audit requests.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myname/.npm/_logs/2018-05-16T13_45_17_410Z-debug.log



Ok, after an hour I finally managed to have cognito working on my Angular app (just after upgrading to 6.0).

About the message global is not defined (or something close can't remember). Add the following into index.html:

<!doctype html>
<html lang="en">

    var global = global || window;

Then, you'll probably get an error saying that Buffer is not defined.

Install the buffer package using npm or yarn. And add the following into polyfills.ts ():

global.Buffer = global.Buffer || require('buffer').Buffer;

Stackoverflow answers/github issues that helped me in case it's not fixed for you after that:

Upgrading to angular-6.x gives "Uncaught ReferenceError: global is not defined"

Friday, July 2, 2021
answered 4 Months ago


problem is with directives: ''

as its an array it should be directives: [ ]

Update: In RC6 OR later version, you have @NgModule. In RC6 OR later version, you have to declare pipes and directives that you are gonna use within @NgModule as shown...

import { PeopleListComponent } from './people-list/people-list.component';

  imports:      [ BrowserModule],
  declarations: [ AppComponent,PeopleListComponent ],  //<<===here
  providers:    [],      
  bootstrap:    [ AppComponent ]

You can remove directives:'' from @Component of AppComponent

Thursday, July 29, 2021
answered 3 Months ago

This is a Google bug. It also happens on Youtube's developer page.

The following bugs tracks this issue. (Still active -as of Jan 5h 2017)

Please up vote on this bug using the links below so that it gets their attention. They have been sitting on it since Sep 9, 2016!!.

Saturday, July 31, 2021
answered 3 Months ago

I had a similar problem few weeks ago, and I solve it when I change few setts in polyfills.ts now It look like:

 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 * Learn more in


/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera.
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
// (window as any).__Zone_enable_cross_context_check = true;

 * Zone JS is required by default for Angular itself.
import 'zone.js/dist/zone';  // Included with Angular CLI.


(window as any)['global'] = window;

Try with this setts and let me know.

Look also in your app.module.ts - did you import Dragula in good way?

    declarations: [
    imports: [
    exports: [
    providers: [
       ...    ],
    bootstrap: [AppComponent]

Please note that this should be a main app.module.ts for your app, not any child or lazy loaded module.

Tuesday, August 3, 2021
answered 3 Months ago

This is caused by the UpgradeModule downgraded service that you are using here:

import { UpgradeModule } from '@angular/upgrade/static';

You are using it because you want the UpgradeModule to downgrade an Angular 2 component to angular JS.

If you dig into the code of the UpgradeModule you can find that this module defines a new angular module named $$UpgradeModule.

This module registers a value provider named $$angularInjector (the one in the error above) - this $$angularInjector thing is responsible for injecting Angular modules into angular JS.

The solution is to import the module in the imports statement so that angular JS will have access to its services.

You forgot to import the UpgradeModule. Here is the answer from the official documentation:

  declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
  providers: [
    // Register an Angular provider whose value is the "upgraded" AngularJS service
    {provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}
  // All components that are to be "downgraded" must be declared as `entryComponents`
  entryComponents: [Ng2HeroesComponent],
  // We must import `UpgradeModule` to get access to the AngularJS core services
  imports: [BrowserModule, UpgradeModule]
class Ng2AppModule {
  ngDoBootstrap() { /* this is a placeholder to stop the boostrapper from complaining */

so first you need to change your code to:


import 'reflect-metadata';
import '@angular/core';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppComponent }  from './components/app/app.component.ts';

  imports:      [ BrowserModule, UpgradeModule ],
  declarations: [ AppComponent ],
  entryComponents: [ AppComponent ]
export class Ng2Module { 
   ngDoBootstrap() {}

Also in order to downgrade your component from ng2 to angular 1

You must create an AngularJS directive that will make this Angular component available inside AngularJS templates:

ng1AppModule.directive('Ng2Module', downgradeComponent({component: AppComponent}));

    function downgradeComponent(info: {   component: Type< This parameter is no longer used */   selectors?: string[]; }): any;

There is a very helpful post which explains in details how to create a hybrid angular application, and also the scenario when you have a v4 component and you want to use it in the v1 template.

Sunday, August 15, 2021
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :