Cannot read property 'getDOM' of undefined

Question

I'm migrating angular-2.0 app to angular-4.0.

side Note : I have added animations library as suggested.

systemjs.config.js

 '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // added animations for 4.0 

      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',


      // other libraries
      'rxjs': 'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

It is said in this thread that we need to add

import { ɵgetDOM as getDOM } from '@angular/platform-browser';

but after adding it, it says,

Module '"../node_modules/@angular/platform-browser/platform-browser"' has no exported member 'ɵgetDOM'.

package.json

"@angular/common": "~4.0.1",
"@angular/compiler": "~4.0.1",
"@angular/core": "~4.0.1",
"@angular/forms": "~4.0.1",
"@angular/http": "~4.0.1",
"@angular/animations": "~4.0.1",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-browser": "~4.0.1",
"@angular/platform-browser-dynamic": "~4.0.1",
"@angular/router": "~3.3.0",
 ...

Answer 1

NOTE: This answer doesn't resolve Cannot read property 'getDOM' of undefined error but now I'm at least able to run the app with Angular4.x and I have no error while running the app.

I don't know if this is the right answer or not.

But somewhere in angular2 path/progress a file called systemjs-angular-loader.js was introduced and unfortunately it was not there in my project.

So, I added it and performed following steps,

1) added systemjs-angular-loader.js to project.

2) updated app section in systemjs.config.js as follow,

2.1)

previously,

packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        ...
      },
      ...   
    }

Now,

packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
       ...
      },
      ...
    }

2.2)

In my case, somehow the latest version of router library (calling from node_modules folder) giving me some error.

'@angular/router': 'npm:@angular/router/bundles/router.umd.js',

so replaced with unpkg.com network (cdn) reference (as of now)

'@angular/router': 'https://unpkg.com/@angular/router@next/bundles/router.umd.js',

Now it has started working.

Answer 2

I had a similar error after upgrading to 4.0.0, but mine was with @angular/http.

Turns out that I didn't have @angular/http in my package.json, but I had a copy of the js file existing in my final output directory (http.umd.js).

Because of this, the version of http that was out there was still old. So make sure that you aren't missing one of the required libraries from your package.json.

My first clue was that @angular.http was the wrong version under Dependencies/npm in Visual Studio and had "extraneous" next to it.

Answer 3

I am using Angular 4 + material UI . i have added follwoing to systemjs.config.js, Its working for me .

'@angular/material': 'npm:@angular/material/bundles/material.umd.js', '@angular/animations':'node_modules/@angular/animations/bundles/animations.umd.min.js', '@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',

'@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js',