Add Support for Angular 11.1+

[mattpenner]

Description
The ng add @ngx-formly/schematics command no longer works. It now throws the error:
An unhandled exception occurred: Cannot find module '@schematics/angular/utility/config'

Minimal Reproduction

1. Use Angular 11.1 or higher.
2. Create a new project
3. Run ng add @ngx-formly/schematics

• Angular version: 11.1.4
• Formly version: 5.10.13

Additional context
As of Angular CLI 11.1 they have removed schematics/angular/utility/config.

[aitboudad]

This issue has been fixed and released as part of v5.10.14 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!

[mburger81]

@aitboudad do you intend v5.10.14 and not v5.5.14

We are still running into this issue, there is no verbose output

Skipping installation: Package already installed
Cannot read property 'kind' of undefined

@angular-devkit/architect       0.1101.4
@angular-devkit/build-angular   0.1101.4
@angular-devkit/core            11.1.4
@angular-devkit/schematics      11.1.4
@angular/cli                    11.1.4
@schematics/angular             11.1.4
@schematics/update              0.1101.4
rxjs                            6.6.3
typescript                      4.0.7

[aitboudad]

@mburger81 the version is v5.10.14, tested with 11.1.4 and 11.2.0 without getting any issues 🤔.

[AshMcConnell]

I'm getting the Cannot read property 'kind' of undefined on Angular 10 too. With version 5.10.14

@angular-devkit/architect          0.1001.6
@angular-devkit/build-angular      0.1001.6
@angular-devkit/core               10.1.6
@angular-devkit/schematics         10.1.6
@angular/cdk                       10.2.4
@angular/cli                       10.1.6
@angular/flex-layout               10.0.0-beta.32
@angular/material                  10.2.4
@angular/material-moment-adapter   10.2.4
@schematics/angular                10.1.6
@schematics/update                 0.1001.6
rxjs                               6.6.3
typescript                         4.0.3

[mattpenner]

Confirmed this has fixed what I originally posted. I have been able to successfully install ngx-formly now on Angular 11.1.4 with the following command:
ng add @ngx-formly/schematics --ui-theme=primeng

[vitale232]

Is this issue still considered closed?

I'm having "Cannot read property 'kind' of undefined" issues with the ng add command. FWIW, I'm working in an nx workspace on Windows 10 - WSL2 running Ubuntu 20.04

$ nx add @ngx-formly/schematics --ui-theme=material
ℹ Using package manager: npm
✔ Found compatible package version: @ngx-formly/schematics@5.10.14.
✔ Package information loaded.
✔ Package successfully installed.
Cannot read property 'kind' of undefined

Only @ngx-formly/schematics was added to my package.json. Manually installing @ngx-formly/core and @ngx-formly/material got me going.

Here are my dependencies:

{
    "dependencies": {
        "@angular/animations": "11.2.3",
        "@angular/cdk": "11.1.1",
        "@angular/common": "11.2.3",
        "@angular/compiler": "11.2.3",
        "@angular/core": "11.2.3",
        "@angular/forms": "11.2.3",
        "@angular/material": "11.1.1",
        "@angular/platform-browser": "11.2.3",
        "@angular/platform-browser-dynamic": "11.2.3",
        "@angular/router": "11.2.3",
        "@ngrx/component": "^11.0.1",
        "@ngrx/component-store": "11.0.0",
        "@nrwl/angular": "11.4.0",
        "@vhb/vhb-map": "^2.1.1",
        "@vhb/vhb-pdf": "^0.1.2",
        "ag-grid-angular": "^25.1.0",
        "ag-grid-community": "^25.1.0",
        "angular-split": "^5.0.0",
        "lodash": "^4.17.21",
        "rxjs": "^6.6.6",
        "tslib": "^2.0.0",
        "zone.js": "^0.10.2"
    }
}

[kgathi2]

Getting the same issue with Angular 11.2.4 using yarn v1.22.5 and formly 5.10.14

ng add @ngx-formly/schematics --ui-theme=bootstrap
ℹ Using package manager: yarn
✔ Found compatible package version: @ngx-formly/schematics@5.10.14.
✔ Package information loaded.
✔ Package successfully installed.
Cannot read property 'kind' of undefined

my depenencies

 "dependencies": {
    "@angular/animations": "~11.2.4",
    "@angular/common": "~11.2.4",
    "@angular/compiler": "~11.2.4",
    "@angular/core": "~11.2.4",
    "@angular/forms": "~11.2.4",
    "@angular/localize": "~11.2.4",
    "@angular/platform-browser": "~11.2.4",
    "@angular/platform-browser-dynamic": "~11.2.4",
    "@angular/router": "~11.2.4",
    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
    "@ng-select/ng-select": "^6.1.0",
    "@ngx-formly/schematics": "5.10.14",
    "@ngxs/form-plugin": "^3.7.1",
    "@ngxs/logger-plugin": "^3.7.1",
    "@ngxs/router-plugin": "^3.7.1",
    "@ngxs/store": "^3.7.1",
    "bootstrap": "^4.5.0",
    "rxjs": "~6.6.6",
    "ts-json-api": "^1.1.0",
    "ts-toolbelt": "^8.0.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  }

[aitboudad]

I think it occurs only on Windows as I can't reproduce it from my side

[aitboudad]

Could you please try the following version 5.10.0-dev.ffc0c1c6 and let me know if that fixes the issue from your side.

• Angular CLI

ng add @ngx-formly/schematics@5.10.0-dev.ffc0c1c6 --ui-theme=bootstrap

• NX

nx add @ngx-formly/schematics@5.10.0-dev.ffc0c1c6 --ui-theme=material

[vitale232]

That's always fun...

I'm still getting the same error:

$ nx add @ngx-formly/schematics@5.10.0-dev.6125bfe1 --ui-theme=material
ℹ Using package manager: npm
✔ Package information loaded.
✔ Package successfully installed.
Cannot read property 'kind' of undefined

Let me know if I can provide any other info to help.

[aitboudad]

Note: updated the version to 5.10.0-dev.ffc0c1c6

@vitale232 check with 5.10.0-dev.ffc0c1c6 instead.

[aitboudad]

in case it doesn't work do no waste your time and use npm install instead:

• Step 1: npm install:

npm install @ngx-formly/core @ngx-formly/material

• Step 2: Import FormlyModule:

import { AppComponent } from './app.component';
+ import { ReactiveFormsModule } from '@angular/forms';
+ import { FormlyModule } from '@ngx-formly/core';
+ import { FormlyMaterialModule } from '@ngx-formly/material';

@NgModule({
  imports: [
    BrowserModule
+   ReactiveFormsModule,
+   FormlyModule.forRoot(),
+   FormlyMaterialModule,
  ],
  ...
})
export class AppModule { }

[vitale232]

@aitboudad That build fixes it for me. The schematic added @ngx/formly @ngx-formly/material, imported the modules in my default project, and included the { extras: { lazyRender: true } } config in the forRoot call.

Thanks for all that you do.

[aitboudad]

Awesome, just pushed a stable release 5.10.15 which you could use instead (no need to specify the version).

ng add @ngx-formly/schematics --ui-theme=bootstrap

[kgathi2]

Looks good now, but when i run, the schematics are added to the dependencies as opposed to the devDependencies. Should this be the case?

[aitboudad]

@kgathi2 yes I think it makes sense to move it into the devDependencies, I'll fix that in the next release

[tanjunior]

Angular12
"SchematicsNgxFormlyShell" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
Cannot read property 'kind' of undefined

[OriolInvernonLlaneza]

I think it occurs only on Windows as I can't reproduce it from my side

The "Cannot read property 'kind' of undefined" is still happening to me in Ubuntu with Angular 11.2.14 installed.

[aitboudad]

could you please check if the issue occurs on https://github.com/ngx-formly/ngx-formly/releases/tag/v6.0.0-next.1

[OriolInvernonLlaneza]

It works but installs the schematics as dependencies, gets version ^5.0.0 of @ngx-formly/core and @ngx-formly/primeng and does not modify app.module.ts.