I upgraded to Angular 5 around the time it was released and haven't had an problems with my code base, but was never able to upgrade Angular Material past beta.11... This is the error I am getting in node:
ERROR { TypeError: Invalid event target
at Function.FromEventObservable.setupSubscription (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/observable/FromEventObservable.js:189:19)
at FromEventObservable._subscribe (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/observable/FromEventObservable.js:211:29)
at FromEventObservable.Observable._trySubscribe (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/Observable.js:172:25)
at FromEventObservable.Observable.subscribe (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/Observable.js:160:65)
at Object.subscribeToResult (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/util/subscribeToResult.js:23:27)
at MergeMapSubscriber._innerSub (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/operators/mergeMap.js:132:38)
at MergeMapSubscriber._tryNext (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/operators/mergeMap.js:129:14)
at MergeMapSubscriber._next (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/operators/mergeMap.js:112:18)
at MergeMapSubscriber.Subscriber.next (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/Subscriber.js:89:18)
at ArrayObservable._subscribe (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/observable/ArrayObservable.js:114:28)
at ArrayObservable.Observable._trySubscribe (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/Observable.js:172:25)
at ArrayObservable.Observable.subscribe (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/Observable.js:160:65)
at MergeMapOperator.call (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/operators/mergeMap.js:87:23)
at Observable.subscribe (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/Observable.js:157:22)
at AuditOperator.call (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/operators/audit.js:62:23)
at Observable.subscribe (/Users/lsorensen/code/OneUnionV1/node_modules/rxjs/Observable.js:157:22)
ngDebugContext:
DebugContext_ {
view:
{ def: [Object],
parent: [Object],
viewContainerParent: null,
parentNodeDef: [Object],
context: [Object],
component: [Object],
nodes: [Array],
state: 13,
root: [Object],
renderer: [Object],
oldValues: [Array],
disposables: [Array] },
nodeIndex: 4,
nodeDef:
{ nodeIndex: 4,
parent: [Object],
renderParent: [Object],
bindingIndex: 0,
outputIndex: 1,
checkIndex: 4,
flags: 114688,
childFlags: 0,
directChildFlags: 0,
childMatchedQueries: 0,
matchedQueries: [Object],
matchedQueryIds: 4,
references: {},
ngContentIndex: -1,
childCount: 0,
bindings: [Array],
bindingFlags: 8,
outputs: [Array],
element: null,
provider: [Object],
text: null,
query: null,
ngContent: null },
elDef:
{ nodeIndex: 3,
parent: null,
renderParent: null,
bindingIndex: 0,
outputIndex: 0,
checkIndex: 3,
flags: 33554433,
childFlags: 114690,
directChildFlags: 114690,
childMatchedQueries: 4,
matchedQueries: {},
matchedQueryIds: 0,
references: {},
ngContentIndex: null,
childCount: 2,
bindings: [],
bindingFlags: 0,
outputs: [Array],
element: [Object],
provider: null,
text: null,
query: null,
ngContent: null },
elView:
{ def: [Object],
parent: [Object],
viewContainerParent: null,
parentNodeDef: [Object],
context: [Object],
component: [Object],
nodes: [Array],
state: 13,
root: [Object],
renderer: [Object],
oldValues: [Array],
disposables: [Array] } },
ngErrorLogger: [Function: bound ],
__zone_symbol__currentTask:
ZoneTask {
_zone:
Zone {
_properties: [Object],
_parent: [Object],
_name: 'angular',
_zoneDelegate: [Object] },
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: undefined,
scheduleFn: undefined,
cancelFn: null,
callback: [Function],
invoke: [Function] } }
ERROR CONTEXT DebugContext_ {
view:
{ def:
{ factory: [Object],
nodeFlags: 1061404723,
rootNodeFlags: 436207619,
nodeMatchedQueries: 6,
flags: 0,
nodes: [Array],
updateDirectives: [Function],
updateRenderer: [Function],
handleEvent: [Function: handleEvent],
bindingCount: 10,
outputCount: 5,
lastRenderRootNode: [Object] },
parent:
{ def: [Object],
parent: null,
viewContainerParent: null,
parentNodeDef: null,
context: {},
component: {},
nodes: [Array],
state: 13,
root: [Object],
renderer: [Object],
oldValues: [],
disposables: null },
viewContainerParent: null,
parentNodeDef:
{ nodeIndex: 1,
parent: [Object],
renderParent: [Object],
bindingIndex: 0,
outputIndex: 0,
checkIndex: 1,
flags: 114688,
childFlags: 0,
directChildFlags: 0,
childMatchedQueries: 0,
matchedQueries: {},
matchedQueryIds: 0,
references: {},
ngContentIndex: -1,
childCount: 0,
bindings: [],
bindingFlags: 0,
outputs: [],
element: null,
provider: [Object],
text: null,
query: null,
ngContent: null },
context:
AppComponent {
cache: [Object],
_dialogService: DialogService {},
_identityService: [Object],
_facebookService: FacebookService {},
_updateHeaderService: [Object],
router: [Object],
route: [Object],
loc: [Object],
loading: true,
isSidenavActive: false,
siteTitle: '1Union',
routeLabel: '1Union',
isLoggedIn: [Object] },
component:
AppComponent {
cache: [Object],
_dialogService: DialogService {},
_identityService: [Object],
_facebookService: FacebookService {},
_updateHeaderService: [Object],
router: [Object],
route: [Object],
loc: [Object],
loading: true,
isSidenavActive: false,
siteTitle: '1Union',
routeLabel: '1Union',
isLoggedIn: [Object] },
nodes: [ [Object], [Object], [Object], [Object], <57 empty items> ],
state: 13,
root:
{ ngModule: [Object],
injector: _NullInjector {},
projectableNodes: [],
selectorOrNode: 'ou-app',
sanitizer: [Object],
rendererFactory: [Object],
renderer: [Object],
errorHandler: [Object] },
renderer: DebugRenderer2 { delegate: [Object] },
oldValues: [ <10 empty items> ],
disposables: [ [Function], <4 empty items> ] },
nodeIndex: 4,
nodeDef:
{ nodeIndex: 4,
parent:
{ nodeIndex: 3,
parent: null,
renderParent: null,
bindingIndex: 0,
outputIndex: 0,
checkIndex: 3,
flags: 33554433,
childFlags: 114690,
directChildFlags: 114690,
childMatchedQueries: 4,
matchedQueries: {},
matchedQueryIds: 0,
references: {},
ngContentIndex: null,
childCount: 2,
bindings: [],
bindingFlags: 0,
outputs: [Array],
element: [Object],
provider: null,
text: null,
query: null,
ngContent: null },
renderParent:
{ nodeIndex: 3,
parent: null,
renderParent: null,
bindingIndex: 0,
outputIndex: 0,
checkIndex: 3,
flags: 33554433,
childFlags: 114690,
directChildFlags: 114690,
childMatchedQueries: 4,
matchedQueries: {},
matchedQueryIds: 0,
references: {},
ngContentIndex: null,
childCount: 2,
bindings: [],
bindingFlags: 0,
outputs: [Array],
element: [Object],
provider: null,
text: null,
query: null,
ngContent: null },
bindingIndex: 0,
outputIndex: 1,
checkIndex: 4,
flags: 114688,
childFlags: 0,
directChildFlags: 0,
childMatchedQueries: 0,
matchedQueries: { '2': 4 },
matchedQueryIds: 4,
references: {},
ngContentIndex: -1,
childCount: 0,
bindings: [ [Object] ],
bindingFlags: 8,
outputs: [ [Object] ],
element: null,
provider:
{ token: [Function: SidenavComponent],
value: [Function: SidenavComponent],
deps: [Array] },
text: null,
query: null,
ngContent: null },
elDef:
{ nodeIndex: 3,
parent: null,
renderParent: null,
bindingIndex: 0,
outputIndex: 0,
checkIndex: 3,
flags: 33554433,
childFlags: 114690,
directChildFlags: 114690,
childMatchedQueries: 4,
matchedQueries: {},
matchedQueryIds: 0,
references: {},
ngContentIndex: null,
childCount: 2,
bindings: [],
bindingFlags: 0,
outputs: [ [Object] ],
element:
{ ns: '',
name: 'sidenav',
attrs: [],
template: null,
componentProvider: [Object],
componentView: [Object],
componentRendererType: [Object],
publicProviders: [Object],
allProviders: [Object],
handleEvent: [Function] },
provider: null,
text: null,
query: null,
ngContent: null },
elView:
{ def:
{ factory: [Object],
nodeFlags: 1061404723,
rootNodeFlags: 436207619,
nodeMatchedQueries: 6,
flags: 0,
nodes: [Array],
updateDirectives: [Function],
updateRenderer: [Function],
handleEvent: [Function: handleEvent],
bindingCount: 10,
outputCount: 5,
lastRenderRootNode: [Object] },
parent:
{ def: [Object],
parent: null,
viewContainerParent: null,
parentNodeDef: null,
context: {},
component: {},
nodes: [Array],
state: 13,
root: [Object],
renderer: [Object],
oldValues: [],
disposables: null },
viewContainerParent: null,
parentNodeDef:
{ nodeIndex: 1,
parent: [Object],
renderParent: [Object],
bindingIndex: 0,
outputIndex: 0,
checkIndex: 1,
flags: 114688,
childFlags: 0,
directChildFlags: 0,
childMatchedQueries: 0,
matchedQueries: {},
matchedQueryIds: 0,
references: {},
ngContentIndex: -1,
childCount: 0,
bindings: [],
bindingFlags: 0,
outputs: [],
element: null,
provider: [Object],
text: null,
query: null,
ngContent: null },
context:
AppComponent {
cache: [Object],
_dialogService: DialogService {},
_identityService: [Object],
_facebookService: FacebookService {},
_updateHeaderService: [Object],
router: [Object],
route: [Object],
loc: [Object],
loading: true,
isSidenavActive: false,
siteTitle: '1Union',
routeLabel: '1Union',
isLoggedIn: [Object] },
component:
AppComponent {
cache: [Object],
_dialogService: DialogService {},
_identityService: [Object],
_facebookService: FacebookService {},
_updateHeaderService: [Object],
router: [Object],
route: [Object],
loc: [Object],
loading: true,
isSidenavActive: false,
siteTitle: '1Union',
routeLabel: '1Union',
isLoggedIn: [Object] },
nodes: [ [Object], [Object], [Object], [Object], <57 empty items> ],
state: 13,
root:
{ ngModule: [Object],
injector: _NullInjector {},
projectableNodes: [],
selectorOrNode: 'ou-app',
sanitizer: [Object],
rendererFactory: [Object],
renderer: [Object],
errorHandler: [Object] },
renderer: DebugRenderer2 { delegate: [Object] },
oldValues: [ <10 empty items> ],
disposables: [ [Function], <4 empty items> ] } }
Here is my package.json
{
"name": "TheOneUnion",
"version": "1.0.0",
"main": "index.js",
"repository": {},
"scripts": {
"start": "npm run build && npm run server",
"build": "webpack --progress --color",
"build:aot": "webpack --env.aot --env.client & webpack --env.aot --env.server",
"build:prod": "webpack --env.aot --env.client -p & webpack --env.aot --env.server",
"prebuild": "npm run clean",
"prebuild:aot": "npm run clean",
"prebuild:prod": "npm run clean",
"clean": "rimraf dist",
"server": "nodemon dist/server.js",
"watch": "webpack --watch",
"watch:dev": "npm run server & npm run watch",
"debug:server": "node-nightly --inspect --debug-brk dist/server.js & webpack --watch"
},
"engines": {
"node": ">=6.0.0"
},
"license": "MIT",
"dependencies": {
"@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.0.2",
"@angular/cdk": "5.2.4",
"@angular/common": "5.0.2",
"@angular/forms": "5.0.2",
"@angular/http": "5.0.2",
"@angular/material": "5.2.4",
"@angular/platform-browser": "5.0.2",
"@angular/platform-browser-dynamic": "5.0.2",
"@angular/platform-server": "5.0.2",
"@angular/router": "5.0.2",
"@nguniversal/express-engine": "5.0.0-beta.5",
"@types/mongodb": "2.2.15",
"angular2-jwt": "0.2.3",
"autoprefixer": "6.7.7",
"aws-sdk": "2.154.0",
"base64url": "2.0.0",
"bcrypt-nodejs": "0.0.3",
"bluebird": "3.5.1",
"body-parser": "1.18.2",
"bootstrap-sass": "3.3.7",
"compression": "1.7.1",
"crypto": "1.0.1",
"css-loader": "0.25.0",
"css-to-string-loader": "0.1.3",
"debug": "2.6.9",
"elasticsearch": "12.1.3",
"evaporate": "2.1.4",
"express": "4.16.2",
"express-engine": "1.0.1",
"extract-text-webpack-plugin": "2.1.2",
"global": "4.3.2",
"gm": "1.23.0",
"hammerjs": "2.0.8",
"html-metadata": "1.6.3",
"imports-loader": "0.7.1",
"js.clone": "0.0.3",
"jsonwebtoken": "7.4.3",
"lodash": "4.17.4",
"log4js": "1.1.1",
"methods": "1.1.2",
"minilog": "3.1.0",
"moment": "2.19.2",
"mongoose": "4.13.4",
"morgan": "1.9.0",
"ng2-facebook-sdk": "2.3.1",
"node-ffprobe": "1.2.2",
"node-sass": "4.7.2",
"nodemailer": "4.4.0",
"normalize.css": "7.0.0",
"postcss-loader": "1.3.3",
"preboot": "4.5.2",
"request": "2.83.0",
"rxjs": "5.5.6",
"sass-loader": "6.0.6",
"webfontloader": "1.6.28",
"xhr2": "0.1.4",
"zone.js": "0.8.18"
},
"devDependencies": {
"@angular/compiler": "5.0.2",
"@angular/compiler-cli": "5.0.2",
"@angular/core": "5.0.2",
"@ngtools/webpack": "1.8.3",
"@types/angular-material": "1.1.58",
"@types/aws-sdk": "0.0.42",
"@types/base64url": "2.0.3",
"@types/bluebird": "3.5.18",
"@types/body-parser": "0.0.34",
"@types/compression": "0.0.33",
"@types/cookie-parser": "1.4.1",
"@types/elasticsearch": "5.0.17",
"@types/evaporate": "0.0.18",
"@types/express": "4.0.39",
"@types/express-serve-static-core": "4.0.57",
"@types/gm": "1.17.33",
"@types/googlemaps": "3.30.0",
"@types/hammerjs": "2.0.35",
"@types/jasmine": "2.8.2",
"@types/jasminewd2": "2.0.3",
"@types/jsonwebtoken": "7.2.3",
"@types/lodash": "4.14.85",
"@types/mime": "0.0.29",
"@types/mongoose": "4.7.27",
"@types/morgan": "1.7.35",
"@types/node": "7.0.48",
"@types/nodemailer": "1.3.33",
"@types/request": "2.0.8",
"@types/serve-static": "1.13.1",
"@types/webfontloader": "1.6.29",
"html-webpack-plugin": "2.30.1",
"node-loader": "0.6.0",
"nodemon": "1.12.1",
"raw-loader": "0.5.1",
"rimraf": "2.6.2",
"script-ext-html-webpack-plugin": "1.8.8",
"typescript": "2.5.1",
"webpack": "3.8.1",
"webpack-merge": "4.1.1",
"webpack-node-externals": "1.6.0"
}
}
If anyone has any bit of an idea of where to start or look it would help me out a lot. let me know if you need more information.. thank you!