parse5 & xhr2 (@angular\platform-server) on main.server and temporary-aspnetcore-engine problem after npm packages update

[ghost]

Hi I'm really a fun of this advanced starter but after npm packages update I found the problems with @angular\platform-server dependencies.

When I'm trying to build now the on dev mode so npm run build:dev I'm getting the following errors:

ERROR in ./Client/polyfills/server.polyfills.ts
    Module not found: Error: Can't resolve 'reflect-metadata' in .\Client\polyfills'
     @ ./Client/polyfills/server.polyfills.ts 2:0-26
     @ ./Client/main.server.ts

    ERROR in ./node_modules/@angular/platform-server/@angular/platform-server.es5.js
    Module not found: Error: Can't resolve 'parse5' in .\node_modules\@angular\platform-server\@angular'
     @ ./node_modules/@angular/platform-server/@angular/platform-server.es5.js 28:13-30 470:15-32 2313:15-32
     @ ./Client/polyfills/temporary-aspnetcore-engine.ts
     @ ./Client/main.server.ts

    ERROR in ./node_modules/@angular/platform-server/@angular/platform-server.es5.js
    Module not found: Error: Can't resolve 'xhr2' in .\node_modules\@angular\platform-server\@angular'
     @ ./node_modules/@angular/platform-server/@angular/platform-server.es5.js 69:11-26
     @ ./Client/polyfills/temporary-aspnetcore-engine.ts
     @ ./Client/main.server.ts

My package.json file is:

{
  "name": "angular4-aspnetcore-universal",
  "version": "1.0.0-rc3",
  "scripts": {
    "test": "jest",
    "test:watch": "npm run test -- --watch",
    "test:ci": "npm run test -- --runInBand",
    "test:coverage": "npm run test -- --coverage",
    "build:dev": "webpack --progress --color ",
    "build:dev:watch": "webpack --progress --color --watch ",
    "build:aot": "webpack --env.aot --env.client & webpack --env.aot --env.server"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "./Client/test/setupJest.ts",
    "globals": {
      "__TS_CONFIG__": "Client/tsconfig.spec.json",
      "__TRANSFORM_HTML__": true
    },
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "<rootDir>/Client/test/.*.ts"
    ],
    "coverageDirectory": "coverage"
  },
  "dependencies": {
    "@angular/animations": "^4.3.3",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.3.3",
    "@angular/compiler": "^4.3.3",
    "@angular/compiler-cli": "^4.3.3",
    "@angular/core": "^4.3.3",
    "@angular/forms": "^4.3.3",
    "@angular/http": "^4.3.3",
    "@angular/platform-browser": "^4.3.3",
    "@angular/platform-browser-dynamic": "^4.3.3",
    "@angular/platform-server": "^4.3.3",
    "@angular/router": "^4.3.3",
    "@ngx-translate/core": "^7.1.0",
    "@ngx-translate/http-loader": "1.0.1",
    "@types/node": "^8.0.19",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.2.2",
    "core-js": "^2.4.1",
    "enhanced-resolve": "^3.4.1",
    "event-source-polyfill": "^0.0.9",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.2.1",
    "json-loader": "^0.5.7",
    "node-sass": "^4.5.3",
    "preboot": "^5.0.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "rxjs": "^5.4.2",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1",
    "webpack-hot-middleware": "^2.18.2",
    "webpack-merge": "^4.1.0",
    "zone.js": "^0.8.16"
  },
  "devDependencies": {
    "@ngtools/webpack": "^1.5.5",
    "@types/chai": "^4.0.2",
    "@types/jasmine": "^2.5.53",
    "@types/jest": "^20.0.6",
    "chai": "^4.1.1",
    "codelyzer": "^3.1.2",
    "copy-webpack-plugin": "^4.0.1",
    "css": "^2.2.1",
    "css-loader": "^0.28.4",
    "jasmine-core": "^2.7.0",
    "jest": "^20.0.4",
    "jest-preset-angular": "^2.0.5",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "tslint": "^5.5.0",
    "typescript": "^2.4.2"
  }
}

I'm using: Node: 8.2.1 npm: 5.2.0 OS: Windows 7

I tried: 1) packages installation 2) totally node_modules deletion

without success :(

Could you please give me a hint how to fix the above errors?

Thx in advance

[ghost]

I found the workaround:

I installed parse5 andd xhr2 as the separated project dependencies and I added the import * as xhr2 from 'xhr2'; import * as parse5 from 'parse5'

to main.server.ts

and commented the import 'reflect-metadata'; from browser.polyfills.ts and server.polyfills.ts file.

I don't know why it isn't working the standard way but still it is working with this workaround :)

[pjmagee]

Just fyi you can now pull in @nguniversal/aspnetcore-engine and remove the temporary engine file.

It's currently on version '1.0.0-beta.2'

[MarkPieszak]

Did you have any issues with AoT or otherwise when using the engine, I saw problems with InjectionToken but didn't have time to fix them yet. @pjmagee

[pjmagee]

I'll check next Wednesday.

[MarkPieszak]

Closing as we're using nguniversal/aspnet-engine & Domino (instead of parse5) now. Hope that's ok!