Angular 5 upgrade: upgrade dependencies - AoT build broken

package.json

@@ -8,7 +8,7 @@
   },
   "license": "BSD-2-Clause",
   "engines": {
-    "node": ">=5.0.0"
+    "node": ">=6.0.0"
   },
   "scripts": {
     "global": "npm install -g @angular/cli marked node-gyp nodemon node-nightly npm-check-updates npm-run-all rimraf typescript ts-node typedoc webpack webpack-bundle-analyzer pm2 rollup",
@@ -69,135 +69,135 @@
     "coverage": "http-server -c-1 -o -p 9875 ./coverage"
   },
   "dependencies": {
-    "@angular/animations": "4.4.5",
-    "@angular/common": "4.4.5",
-    "@angular/core": "4.4.5",
-    "@angular/forms": "4.4.5",
-    "@angular/http": "4.4.5",
-    "@angular/platform-browser": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.4.5",
-    "@angular/platform-server": "4.4.5",
-    "@angular/router": "4.4.5",
+    "@angular/animations": "5.2.1",
+    "@angular/common": "5.2.1",
+    "@angular/core": "5.2.1",
+    "@angular/forms": "5.2.1",
+    "@angular/http": "5.2.1",
+    "@angular/platform-browser": "5.2.1",
+    "@angular/platform-browser-dynamic": "5.2.1",
+    "@angular/platform-server": "5.2.1",
+    "@angular/router": "5.2.1",
     "@angularclass/bootloader": "1.0.1",
-    "@angularclass/idle-preload": "1.0.4",
-    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
-    "@ngrx/effects": "4.0.5",
-    "@ngrx/router-store": "4.0.4",
-    "@ngrx/store": "4.0.3",
-    "@nguniversal/express-engine": "1.0.0-beta.3",
-    "@ngx-translate/core": "8.0.0",
-    "@ngx-translate/http-loader": "2.0.0",
+    "@angularclass/idle-preload": "2.0.1",
+    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
+    "@ngrx/effects": "4.1.1",
+    "@ngrx/router-store": "4.1.1",
+    "@ngrx/store": "4.1.1",
+    "@nguniversal/express-engine": "5.0.0-beta.5",
+    "@ngx-translate/core": "9.1.1",
+    "@ngx-translate/http-loader": "2.0.1",
     "body-parser": "1.18.2",
-    "bootstrap": "v4.0.0-beta",
+    "bootstrap": "4.0.0-beta",
     "cerialize": "0.1.18",
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",
-    "core-js": "2.5.1",
+    "core-js": "2.5.3",
     "express": "4.16.2",
     "express-session": "1.15.6",
     "font-awesome": "4.7.0",
-    "http-server": "0.10.0",
+    "http-server": "0.11.1",
     "https": "1.0.0",
     "js.clone": "0.0.3",
-    "jsonschema": "1.2.0",
+    "jsonschema": "1.2.2",
     "methods": "1.1.2",
     "morgan": "1.9.0",
-    "ngx-pagination": "3.0.1",
+    "ngx-pagination": "3.0.3",
     "pem": "1.12.3",
-    "reflect-metadata": "0.1.10",
-    "rxjs": "5.4.3",
-    "ts-md5": "1.2.2",
-    "uuid": "^3.1.0",
+    "reflect-metadata": "0.1.12",
+    "rxjs": "5.5.6",
+    "ts-md5": "1.2.3",
+    "uuid": "^3.2.1",
     "webfontloader": "1.6.28",
-    "zone.js": "0.8.18"
+    "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/compiler": "4.4.5",
-    "@angular/compiler-cli": "4.4.5",
-    "@ngrx/store-devtools": "4.0.0",
-    "@ngtools/webpack": "1.7.4",
+    "@angular/compiler": "^5.2.1",
+    "@angular/compiler-cli": "^5.2.1",
+    "@ngrx/store-devtools": "4.1.1",
+    "@ngtools/webpack": "1.9.5",
     "@types/cookie-parser": "1.4.1",
     "@types/deep-freeze": "0.1.1",
-    "@types/express": "4.0.37",
-    "@types/express-serve-static-core": "4.0.53",
+    "@types/express": "4.11.0",
+    "@types/express-serve-static-core": "4.11.1",
     "@types/hammerjs": "2.0.35",
-    "@types/jasmine": "2.6.0",
-    "@types/memory-cache": "0.0.31",
+    "@types/jasmine": "2.8.4",
+    "@types/memory-cache": "0.2.0",
     "@types/mime": "2.0.0",
-    "@types/node": "8.0.34",
-    "@types/serve-static": "1.7.32",
-    "@types/source-map": "0.5.1",
+    "@types/node": "^9.3.0",
+    "@types/serve-static": "1.13.1",
     "@types/uuid": "^3.4.3",
     "@types/webfontloader": "1.6.29",
-    "ajv": "5.2.3",
-    "ajv-keywords": "2.1.0",
+    "ajv": "6.0.1",
+    "ajv-keywords": "3.0.0",
     "angular2-template-loader": "0.6.2",
-    "autoprefixer": "7.1.5",
-    "awesome-typescript-loader": "3.2.3",
-    "caniuse-lite": "1.0.30000746",
-    "codelyzer": "3.2.1",
-    "compression-webpack-plugin": "1.0.1",
-    "copy-webpack-plugin": "4.1.1",
+    "autoprefixer": "7.2.5",
+    "awesome-typescript-loader": "3.4.1",
+    "caniuse-lite": "1.0.30000792",
+    "codelyzer": "^4.1.0",
+    "compression-webpack-plugin": "1.1.3",
+    "copy-webpack-plugin": "4.3.1",
     "coveralls": "3.0.0",
-    "css-loader": "0.28.7",
+    "css-loader": "0.28.9",
     "deep-freeze": "0.0.1",
     "exports-loader": "0.6.4",
     "html-webpack-plugin": "2.30.1",
     "imports-loader": "0.7.1",
     "istanbul-instrumenter-loader": "3.0.0",
-    "jasmine-core": "2.8.0",
+    "jasmine-core": "2.9.1",
     "jasmine-marbles": "0.2.0",
     "jasmine-spec-reporter": "4.2.1",
     "json-loader": "0.5.7",
-    "karma": "1.7.1",
+    "karma": "2.0.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
     "karma-coverage": "1.1.1",
     "karma-istanbul-preprocessor": "0.0.2",
-    "karma-jasmine": "1.1.0",
-    "karma-mocha-reporter": "2.2.4",
+    "karma-jasmine": "1.1.1",
+    "karma-mocha-reporter": "2.2.5",
     "karma-phantomjs-launcher": "1.0.4",
     "karma-remap-coverage": "0.1.4",
     "karma-remap-istanbul": "0.6.0",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webdriver-launcher": "1.0.5",
-    "karma-webpack": "2.0.5",
+    "karma-webpack": "2.0.9",
     "ngrx-store-freeze": "0.2.0",
-    "node-sass": "4.5.3",
-    "nodemon": "1.12.1",
-    "npm-run-all": "4.1.1",
-    "postcss": "6.0.13",
+    "node-sass": "4.7.2",
+    "nodemon": "1.14.11",
+    "npm-run-all": "4.1.2",
+    "postcss": "6.0.16",
     "postcss-apply": "0.8.0",
     "postcss-cli": "4.1.1",
-    "postcss-cssnext": "3.0.2",
-    "postcss-loader": "2.0.7",
+    "postcss-cssnext": "3.1.0",
+    "postcss-loader": "2.0.10",
     "postcss-responsive-type": "1.0.0",
-    "postcss-smart-import": "0.7.5",
-    "protractor": "5.1.2",
+    "postcss-smart-import": "0.7.6",
+    "protractor": "5.2.2",
     "protractor-istanbul-plugin": "2.0.0",
     "raw-loader": "0.5.1",
-    "resolve-url-loader": "2.1.1",
+    "resolve-url-loader": "2.2.1",
     "rimraf": "2.6.2",
-    "rollup": "0.50.0",
-    "rollup-plugin-commonjs": "8.2.1",
+    "rollup": "0.54.1",
+    "rollup-plugin-commonjs": "8.2.6",
     "rollup-plugin-node-globals": "1.1.0",
-    "rollup-plugin-node-resolve": "3.0.0",
-    "rollup-plugin-uglify": "2.0.1",
+    "rollup-plugin-node-resolve": "3.0.2",
+    "rollup-plugin-uglify": "3.0.0",
     "sass-loader": "6.0.6",
-    "script-ext-html-webpack-plugin": "1.8.5",
-    "source-map-loader": "0.2.2",
+    "script-ext-html-webpack-plugin": "1.8.8",
+    "source-map": "0.6.1",
+    "source-map-loader": "0.2.3",
     "string-replace-loader": "1.3.0",
     "to-string-loader": "1.1.5",
     "ts-helpers": "1.1.2",
-    "ts-node": "3.3.0",
-    "tslint": "5.7.0",
+    "ts-node": "4.1.0",
+    "tslint": "5.9.1",
     "typedoc": "0.9.0",
-    "typescript": "2.5.3",
-    "webpack": "3.7.1",
-    "webpack-bundle-analyzer": "2.9.0",
-    "webpack-dev-middleware": "1.12.0",
-    "webpack-dev-server": "2.9.1",
-    "webpack-merge": "4.1.0",
+    "typescript": "2.6.2",
+    "webpack": "^3.10.0",
+    "webpack-bundle-analyzer": "2.9.2",
+    "webpack-dev-middleware": "2.0.4",
+    "webpack-dev-server": "2.11.1",
+    "webpack-merge": "4.1.1",
     "webpack-node-externals": "1.6.0"
   }
 }

rollup.config.js

@@ -1,22 +1,22 @@
-import nodeResolve from 'rollup-plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs';
-import uglify from 'rollup-plugin-uglify'
-
-export default {
-  input: 'dist/client.js',
-  output: {
-   file: 'dist/client.js',
-   format: 'iife',
-  },
-  sourceMap: false,
-  plugins: [
-    nodeResolve({
-      jsnext: true,
-      module: true
-    }),
-    commonjs({
-      include: 'node_modules/rxjs/**'
-    }),
-    uglify()
-  ]
-}
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs';
+import uglify from 'rollup-plugin-uglify'
+
+export default {
+  input: 'dist/client.js',
+  output: {
+   file: 'dist/client.js',
+   format: 'iife',
+  },
+  sourcemap: false,
+  plugins: [
+    nodeResolve({
+      jsnext: true,
+      module: true
+    }),
+    commonjs({
+      include: 'node_modules/rxjs/**'
+    }),
+    uglify()
+  ]
+}

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { ViewMode } from '../../../+search-page/search-options.model';
 import { GenericConstructor } from '../../../core/shared/generic-constructor';
 import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
-import { ViewMode } from '../../../+search-page/search-options.model';
 
 @Component({
   selector: 'ds-wrapper-grid-element',
@@ -13,11 +13,14 @@ export class WrapperGridElementComponent implements OnInit {
   @Input() object: ListableObject;
   objectInjector: Injector;
 
-  constructor(private injector: Injector) {}
+  constructor(private injector: Injector) {
+  }
 
   ngOnInit(): void {
-    this.objectInjector = ReflectiveInjector.resolveAndCreate(
-      [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
+    this.objectInjector = Injector.create({
+      providers: [{ provide: 'objectElementProvider', useFactory: () => (this.object), deps:[] }],
+      parent: this.injector
+    });
 
   }
 

src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
-import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator'
-import { GenericConstructor } from '../../../core/shared/generic-constructor';
-import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { Component, Injector, Input, OnInit } from '@angular/core';
 import { ViewMode } from '../../../+search-page/search-options.model';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
+import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator'
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
 
 @Component({
   selector: 'ds-wrapper-list-element',
@@ -16,8 +16,10 @@ export class WrapperListElementComponent implements OnInit {
   constructor(private injector: Injector) {}
 
   ngOnInit(): void {
-    this.objectInjector = ReflectiveInjector.resolveAndCreate(
-      [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
+    this.objectInjector = Injector.create({
+        providers: [{ provide: 'objectElementProvider', useFactory: () => (this.object), deps:[] }],
+        parent: this.injector
+    });
   }
 
   getListElement(): string {

tsconfig.json

@@ -36,5 +36,9 @@
   "buildOnSave": false,
   "atom": {
     "rewriteTsconfig": false
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "preserveWhitespaces": false
   }
 }