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