Angular 2 - Meteor (Socially tutorial) Step 18 (Angular Material - TypeError!)


#1

Hi,

So I am working with the Socially Tutorial using Angular 2. I am on Step 18 where I need to integrate it with Angular materials (ng2- material).

The moment I declare MATERIAL_DIRECTIVES under directives in my app.ts I get the following error on the Browser Web Console:

TypeError: overlay_1.createOverlayContainer is not a function
require<.node_modules[“ng2-material”][“index.js”]<()
modules.js:117498
fileEvaluate()
modules-runtime.js:180
require()
modules-runtime.js:109
require<.client[“app.ts”]<()
app.js:391
fileEvaluate()
modules-runtime.js:180
require()
modules-runtime.js:109


My app.ts looks like this:

import ‘reflect-metadata’;
import { Component, provide } from ‘@angular/core’;
import { bootstrap } from ‘angular2-meteor-auto-bootstrap’;
import { Parties } from ‘…/collections/parties’;
import { Mongo } from ‘meteor/mongo’;
import { PartiesForm } from ‘./imports/parties-form/parties-form’;
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from ‘@angular/router-deprecated’;
import { APP_BASE_HREF } from ‘@angular/common’;
import { PartiesList } from ‘./imports/parties-list/parties-list.ts’;
import { PartyDetails } from ‘./imports/party-details/party-details.ts’;
import {BrowserDomAdapter} from ‘@angular/platform-browser/src/browser/browser_adapter’;
import ‘…/collections/methods.ts’;
import {GOOGLE_MAPS_PROVIDERS, GOOGLE_MAPS_DIRECTIVES} from ‘angular2-google-maps/core’;
import {LoginButtons} from ‘angular2-meteor-accounts-ui’;
import {MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES} from ‘ng2-material’;

@Component({
selector: ‘app’,
templateUrl: ‘/client/app.html’,
directives: [ROUTER_DIRECTIVES, LoginButtons, MATERIAL_DIRECTIVES]
})
@RouteConfig([
{ path: ‘/’, as: ‘PartiesList’, component: PartiesList },
{ path: ‘/party/:partyId’, as: ‘PartyDetails’, component: PartyDetails }
])

class Socially {}
BrowserDomAdapter.makeCurrent();
bootstrap(Socially, [MATERIAL_PROVIDERS, GOOGLE_MAPS_PROVIDERS, ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: ‘/’ })]);


My package.json looks like this

{
“name”: “sociallyagain”,
“private”: true,
“scripts”: {
“start”: “meteor run”
},
“dependencies”: {
"@angular/common": “2.0.0-rc.1”,
"@angular/compiler": “2.0.0-rc.1”,
"@angular/core": “2.0.0-rc.1”,
"@angular/forms": “^0.2.0”,
"@angular/platform-browser": “^2.0.0-rc.1”,
"@angular/platform-browser-dynamic": “^2.0.0-rc.1”,
"@angular/router-deprecated": “2.0.0-rc.1”,
"@angular2-material/checkbox": “^2.0.0-alpha.6”,
"@angular2-material/core": “^2.0.0-alpha.6”,
"@angular2-material/input": “^2.0.0-alpha.6”,
"@angular2-material/toolbar": “^2.0.0-alpha.6”,
“angular2-google-maps”: “^0.12.0”,
“angular2-meteor”: “^0.5.5”,
“angular2-meteor-accounts-ui”: “^0.5.0”,
“angular2-meteor-auto-bootstrap”: “^0.5.5”,
“angular2-meteor-polyfills”: “^0.1.1”,
“angular2-pagination”: “^0.2.1”,
“es6-shim”: “^0.35.1”,
“meteor-node-stubs”: “~0.2.0”,
“ng2-material”: “^0.5.0”,
“reflect-metadata”: “^0.1.3”,
“rxjs”: “^5.0.0-beta.9”,
“zone.js”: “^0.6.12”
}
}

Appreciate it if someone can point me to the source of the problem.

Thanks


#2

try downgrading the ng2-material to alpha.5-2 as suggested here
it resolved the promblem for me but now the root app component is not loading without any error.


#3
  1. npm install ng2-material --save
  2. npm remove @angular2-material
    #1 installs, @angular2-material/core@2.0.0-alpha.6", which has bugs
  3. npm install @angular2-material/core@2.0.0-alpha.5-2 --save
    – replaces the removed one
  4. npm install --save @angular2-material/checkbox
    – defaults ng2-material needs this, you get errors and it does not install
  5. Installed all the downgraded components first. All need to be installed, then the overlay error disappears:
    npm install --save @angular2-material/core@2.0.0-alpha.5-2
    npm install --save @angular2-material/progress-bar@2.0.0-alpha.5-2
    npm install --save @angular2-material/progress-circle@2.0.0-alpha.5-2
    npm install --save @angular2-material/radio@.0.0-alpha.5-2
    npm install --save @angular2-material/sidenav@2.0.0-alpha.5-2
    npm install --save @angular2-material/toolbar@2.0.0-alpha.5-2