fix

libs/core/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@angular-react/core",
-  "version": "3.0.0",
+  "version": "11.0.0",
   "ngPackage": {
     "deleteDestPath": true,
     "whitelistedNonPeerDependencies": [
@@ -50,10 +50,10 @@
   "private": false,
   "sideEffects": false,
   "peerDependencies": {
-    "@angular/compiler": "^10.2.5",
-    "@angular/core": "^10.2.5",
-    "@angular/platform-browser-dynamic": "^10.2.5",
-    "@angular/platform-browser": "^10.2.5",
+    "@angular/compiler": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/platform-browser": "^11.2.14",
     "rxjs": "^6.5.2",
     "react-dom": "~16.8.6",
     "react": "~16.8.6"

libs/fabric/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@angular-react/fabric",
-  "version": "3.2.6",
+  "version": "11.0.0",
   "ngPackage": {
     "lib": {
       "entryFile": "public-api.ts",
@@ -47,11 +47,11 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular-react/core": "^1.0.0",
-    "@angular/common": "^10.2.5",
-    "@angular/core": "^10.2.5",
-    "@angular/platform-browser-dynamic": "^10.2.5",
-    "@angular/platform-browser": "^10.2.5",
+    "@angular-react/core": "^11.0.0",
+    "@angular/common": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/platform-browser": "^11.2.14",
     "@fluentui/react": "^8.47.3",
     "react-dom": "~16.8.6",
     "react": "^16.8.6"

libs/semantic-ui/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@angular-react/semantic-ui",
-  "version": "0.3.0-alpha1",
+  "version": "11.0.0",
   "ngPackage": {
     "lib": {
       "entryFile": "public-api.ts",
@@ -36,11 +36,11 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular-react/core": "^0.3.0-alpha1",
-    "@angular/common": "^10.2.5",
-    "@angular/core": "^10.2.5",
-    "@angular/platform-browser-dynamic": "^10.2.5",
-    "@angular/platform-browser": "^10.2.5",
+    "@angular-react/core": "^11.0.0",
+    "@angular/common": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/platform-browser": "^11.2.14",
     "semantic-ui-react": "^0.79.1",
     "react-dom": "^16.4.1",
     "react": "^16.4.1"

libs/toolkit/core/shared/changeable-item.directive.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EventEmitter, Input, OnInit, Output, Directive } from '@angular/core';
 
 import { OnChanges } from '../../declarations/angular/typed-changes';
 import { ItemChangedPayload, ItemChanges } from '../declarative/item-changed.payload';
@@ -10,6 +10,7 @@ import { ChangeableItemHelper } from './changeable-helper';
 /**
  * Parent class for wrapper directive for single item with OnChanges
  */
+@Directive()
 export abstract class ChangeableItemDirective<TItem> implements OnChanges<ChangeableItemDirective<TItem>>, OnInit {
   @Input() key: string;
 

libs/toolkit/core/shared/changeable-items.directive.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { AfterContentInit, ContentChildren, EventEmitter, OnDestroy, Output, QueryList } from '@angular/core';
+import { AfterContentInit, ContentChildren, EventEmitter, OnDestroy, Output, QueryList, Directive } from '@angular/core';
 
 import { ItemChangedPayload } from '../declarative/item-changed.payload';
 import { ChangeableItemsHelper, IChangeableItemsContainer } from './changeable-helper';
@@ -10,6 +10,7 @@ import { ChangeableItemDirective } from './changeable-item.directive';
 /**
  * Parent class for wrapper directive for multiple ChangeableItemDirectives
  */
+@Directive()
 export abstract class ChangeableItemsDirective<TItem>
   implements AfterContentInit, IChangeableItemsContainer<TItem>, OnDestroy {
   @ContentChildren(ChangeableItemDirective) readonly directiveItems: QueryList<ChangeableItemDirective<TItem>>;

libs/toolkit/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "angular-react-toolkit",
-  "version": "1.1.1",
+  "version": "11.0.0",
   "ngPackage": {
     "lib": {
       "entryFile": "public-api.ts",
@@ -34,11 +34,11 @@
   "private": false,
   "sideEffects": false,
   "peerDependencies": {
-    "@angular-react/core": "^1.0.1",
-    "@angular/common": "^10.2.5",
-    "@angular/core": "^10.2.5",
-    "@angular/platform-browser-dynamic": "^10.2.5",
-    "@angular/platform-browser": "^10.2.5",
+    "@angular-react/core": "^11.0.0",
+    "@angular/common": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/platform-browser": "^11.2.14",
     "@fluentui/react": "^8.47.3",
     "react-dom": "~16.8.6",
     "react": "^16.8.6"

libs/toolkit/plugins/styles-plugin.ts

@@ -1,6 +1,3 @@
-import { OnInit } from "@angular/core";
-import { IStyleFunctionOrObject } from "@fluentui/react";
-
 const proxyHandlerMap = new Map<string, {
   beforeNgInit: () => void
 }>()
@@ -12,19 +9,17 @@ interface IConstructor {
 }
 export function Styled<T extends IConstructor>() {
   return function (constructor: any) {
-    class Wrapper extends constructor implements OnInit {
-      styles: IStyleFunctionOrObject<any, any>;
-      ngOnInit() {
-        const handler = proxyHandlerMap.get(constructor.name);
-        if (handler && handler.beforeNgInit) {
-          handler.beforeNgInit.apply(this);
-        }
-        if (super.ngOnInit) {
-          super.ngOnInit();
-        }
+    const ngOnInit = constructor.prototype.ngOnInit;
+    constructor.prototype.ngOnInit = function () {
+      const handler = proxyHandlerMap.get(constructor.name);
+      if (handler && handler.beforeNgInit) {
+        handler.beforeNgInit.apply(this);
+      }
+      if (ngOnInit) {
+        ngOnInit.apply(this);
       }
     }
-    return Wrapper as any;
+    return constructor as any;
   }
 }
 

package.json

@@ -21,7 +21,7 @@
     "postbuild:libs:core": "copyfiles README.md ./@angular-react/core",
     "build:libs:fabric": "ts-node --project tsconfig.node.json libs/fabric/build.ts",
     "build:libs:semantic-ui": "ts-node --project tsconfig.node.json libs/semantic-ui/build.ts",
-    "build:libs:toolkit": "ts-node libs/toolkit/build.ts",
+    "build:libs:toolkit": "ts-node --project tsconfig.node.json libs/toolkit/build.ts",
     "affected:apps": "./node_modules/.bin/nx affected:apps",
     "affected:build": "./node_modules/.bin/nx affected:build",
     "affected:e2e": "./node_modules/.bin/nx affected:e2e",
@@ -68,10 +68,10 @@
     "@angular/platform-browser-dynamic": "~11.2.14",
     "@angular/router": "~11.2.14",
     "@fluentui/react": "^8.47.3",
-    "@ngrx/effects": "~10.1.2",
-    "@ngrx/router-store": "~10.1.2",
-    "@ngrx/store": "~10.1.2",
-    "@ngrx/store-devtools": "~10.1.2",
+    "@ngrx/effects": "~11.1.1",
+    "@ngrx/router-store": "~11.1.1",
+    "@ngrx/store": "~11.1.1",
+    "@ngrx/store-devtools": "~11.1.1",
     "@uifabric/example-data": "^7.1.5",
     "core-js": "^2.5.4",
     "ngrx-store-freeze": "^0.2.4",
@@ -90,7 +90,7 @@
     "@angular/cli": "~11.2.17",
     "@angular/compiler-cli": "~11.2.14",
     "@angular/language-service": "~11.2.14",
-    "@ngrx/schematics": "~10.1.2",
+    "@ngrx/schematics": "~11.1.1",
     "@nrwl/nx": "^7.8.7",
     "@nrwl/schematics": "^8.1.2",
     "@types/classnames": "^2.2.6",
@@ -113,7 +113,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^11.2.4",
+    "ng-packagr": "^9.1.5",
     "prettier": "1.15.3",
     "protractor": "~7.0.0",
     "rimraf": "^2.6.2",
@@ -121,5 +121,8 @@
     "ts-node": "~10.4.0",
     "tslint": "~6.1.0",
     "typescript": "~4.0.8"
+  },
+  "resolutions": {
+    "webpack": "^5.0.0"
   }
 }