添加自定义类装饰器时，Angular Injected失败

Question

According to this tutorial I try to implement custom decorator the allow us restrict access to the component class base on user role. otherwise redirect to other component (I know it has other strategies to archive this but it not suit our use case).

It works as I aspect , but only when I run in local machine not on deploy server . Error is like it cannot injected any service or class in constructor of every component the use this decorator ???

role-required.decorator.ts

export function RoleRequired(roles: string[], redirectUrl = '/forbidden') {

    return function<T extends {new(...args:any[]):{}}> (constructor:T) {

        // save a reference to the original constructor
        const original = constructor;

        // a utility function to generate instances of a class
        function construct(constructor, args) {
            const c : any = function () {
                return constructor.apply(this, args);
            };
            c.prototype = constructor.prototype;
            return new c();
        }

        // the new constructor behaviour
        const f : any = function(router: Router, ...args) {
            console.log("Class: " + original.name);
            this.__verifyRole = JSON.parse(localStorage.getItem("roles")) || [];

            const that = this;
            const isGrant = roles.every((item, index) => {
                return that.__verifyRole.indexOf(item) != -1
            });

            if (!isGrant) {
                router.navigate([redirectUrl]);
            }

            return construct(original, args);
        };

        // copy prototype so intanceof operator still works
        f.prototype = original.prototype;

        // copy metadata to new constructor
        let metadatakeys = Reflect.getMetadataKeys(constructor);
        metadatakeys.forEach(function (key) {
            Reflect.defineMetadata(key, Reflect.getOwnMetadata(key, constructor), f)
        });

        // read dependencies list from 'cls', add our own dependency, and write list to 'newCls'
        let dependencies = Reflect.getOwnMetadata('design:paramtypes', constructor);
        dependencies = [Router].concat(dependencies);
        Reflect.defineMetadata('design:paramtypes', dependencies, f);

        // return new constructor (will override original)
        return f;
    }
}

PREREQUISITE

import this class at app.module.ts import 'reflect-metadata';

USAGE

@RoleRequired(['role.user.chat'])
export class ChatRoomComponent {}

error message is all property of injected class when start component.

ERROR TypeError: Cannot read property 'informSoundSettingChange' of undefined

package.json

{
  "name": "alpha-love-chat-ng",
  "version": "1.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve --deploy / --proxy-config proxy.conf.json",
    "build": "ng build --prod --aot output-hashing none --deploy /",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.6",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.2.6",
    "@angular/compiler": "^4.2.6",
    "@angular/core": "^4.2.6",
    "@angular/forms": "^4.2.6",
    "@angular/http": "^4.2.6",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.2.6",
    "@angular/platform-browser-dynamic": "^4.2.6",
    "@angular/router": "^4.2.6",
    "angular-datatables": "^4.1.1",
    "angular2-notifications": "^0.7.4",
    "angular2-uuid": "^1.1.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "datatables.net": "^1.10.15",
    "datatables.net-dt": "^1.10.15",
    "howler": "^2.0.4",
    "jquery": "^3.2.1",
    "lz-string": "^1.4.4",
    "malihu-custom-scrollbar-plugin": "^3.1.5",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "ng2-modal": "0.0.25",
    "ngx-facebook": "^2.4.0",
    "ngx-infinite-scroll": "^0.5.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.2",
    "rxjs-extra": "^0.1.1",
    "signalr": "^2.2.2",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.0",
    "@angular/compiler-cli": "^4.2.6",
    "@angular/language-service": "^4.2.6",
    "@types/bootstrap": "^3.3.34",
    "@types/datatables.net": "^1.10.4",
    "@types/howler": "^2.0.2",
    "@types/jasmine": "2.5.45",
    "@types/jquery": "^3.2.6",
    "@types/lz-string": "^1.3.32",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.2.34",
    "@types/node": "^6.0.80",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Answer 1

According to @n00dl3 suggest in comment..

Seriously I fear this is an AOT limitation... I guess it creates the injection logic at build time so you can't use your decorator with AOT enabled..

However, I try and it's not work at first because..

"ng build --prod --aot output-hashing none --deploy /"

I just remove --aot , but I still have this flag --prod left and by default it will enable --aot true so I fix by --aot false github.com/angular/angular-cli/wiki/build

Final version

"ng build --prod --aot false output-hashing none --deploy /"

instead of

"ng build --prod output-hashing none --deploy /"

In conclusion remove --aot flag is solved my problem prevent it remove my custom decorator.