Angular 6 AOT build fails on Kendo UI Angular modules

[Drew]

I just upgraded my app to Angular 6, and upgraded the Kendo Angular packages to their latest releases. When I build the app in AOT mode in the dev server, I get errors like this:

ERROR in ./src/app/foo/bar/bar.component.ngfactory.js
Module not found: Error: Can't resolve '@package-author/package.ngfactory' in 'C:\dev\myProject\src\app\foo\bar'
resolve '@package-author/package.ngfactory' in 'C:\dev\myProject\src\app\foo\bar'
  Parsed request is a module
  using description file: C:\dev\myProject\package.json (relative path: ./src/app/foo/bar)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in C:/dev/myProject
        using description file: C:\dev\myProject\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\dev\myProject\package.json (relative path: ./@package-author/package.ngfactory)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\@progress\kendo-angular-grid.ngfactory doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\@progress\kendo-angular-grid.ngfactory.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\@progress\kendo-angular-grid.ngfactory.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\@progress\kendo-angular-grid.ngfactory.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\@progress\kendo-angular-grid.ngfactory.js doesn't exist
            as directory
              C:\dev\myProject\@progress\kendo-angular-grid.ngfactory doesn't exist
      C:\dev\myProject\src\app\foo\bar\node_modules doesn't exist or is not a directory
      C:\dev\myProject\src\app\foo\node_modules doesn't exist or is not a directory
      C:\dev\myProject\src\app\node_modules doesn't exist or is not a directory
      C:\dev\myProject\src\node_modules doesn't exist or is not a directory
      C:\dev\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\dev\myProject\node_modules
        using description file: C:\dev\myProject\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\dev\myProject\package.json (relative path: ./node_modules/@package-author/package.ngfactory)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory.js doesn't exist
            as directory
              C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory doesn't exist

 

These errors crop up for every one of my app's components that reference a Kendo Angular component. kendo-angular-grid, kendo-angular-chart, and kendo-angular-popup are the most common offenders.

If I build without AOT, it builds fine, but that is not an acceptable solution. Is there some configuration I need to do to make Kendo Angular components work with AOT compilation?

Steps to reproduce:

1. install Angular CLI v 6 globally: yarn global add @angular/cli@latest
2. generate a new Angular 6 test app: ng new TestApp
3. add Kendo Angular Grid: ng add @progress/kendo-angular-grid
4. create a component and add a Kendo Angular grid to it (the basic component from the docs works fine for this: https://www.telerik.com/kendo-angular-ui/components/grid/#toc-basic-usage)
5. edit angular.json, set projects.TestApp.architect.build.options.aot to true:
   

   {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
     "newProjectRoot": "projects",
     "projects": {
       "TestApp": {
         "root": "",
         "sourceRoot": "src",
         "projectType": "application",
         "prefix": "app",
         "schematics": {},
         "architect": {
           "build": {
             "builder": "@angular-devkit/build-angular:browser",
             "options": {
               "aot": true,
               "outputPath": "dist/TestApp",
               "index": "src/index.html",
               "main": "src/main.ts",
               "polyfills": "src/polyfills.ts",
               "tsConfig": "src/tsconfig.app.json",
               "assets": [
                 "src/favicon.ico",
                 "src/assets"
               ],
               "styles": [
                 {
                   "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
                 },
                 "src/styles.css"
               ],
               "scripts": []
             },
             "configurations": {
               "production": {
                 "fileReplacements": [
                   {
                     "replace": "src/environments/environment.ts",
                     "with": "src/environments/environment.prod.ts"
                   }
                 ],
                 "optimization": true,
                 "outputHashing": "all",
                 "sourceMap": false,
                 "extractCss": true,
                 "namedChunks": false,
                 "aot": true,
                 "extractLicenses": true,
                 "vendorChunk": false,
                 "buildOptimizer": true
               }
             }
           },
           "serve": {
             "builder": "@angular-devkit/build-angular:dev-server",
             "options": {
               "browserTarget": "TestApp:build"
             },
             "configurations": {
               "production": {
                 "browserTarget": "TestApp:build:production"
               }
             }
           },
           "extract-i18n": {
             "builder": "@angular-devkit/build-angular:extract-i18n",
             "options": {
               "browserTarget": "TestApp:build"
             }
           },
           "test": {
             "builder": "@angular-devkit/build-angular:karma",
             "options": {
               "main": "src/test.ts",
               "polyfills": "src/polyfills.ts",
               "tsConfig": "src/tsconfig.spec.json",
               "karmaConfig": "src/karma.conf.js",
               "styles": [
                 {
                   "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
                 },
                 "src/styles.css"
               ],
               "scripts": [],
               "assets": [
                 "src/favicon.ico",
                 "src/assets"
               ]
             }
           },
           "lint": {
             "builder": "@angular-devkit/build-angular:tslint",
             "options": {
               "tsConfig": [
                 "src/tsconfig.app.json",
                 "src/tsconfig.spec.json"
               ],
               "exclude": [
                 "**/node_modules/**"
               ]
             }
           }
         }
       },
       "TestApp-e2e": {
         "root": "e2e/",
         "projectType": "application",
         "architect": {
           "e2e": {
             "builder": "@angular-devkit/build-angular:protractor",
             "options": {
               "protractorConfig": "e2e/protractor.conf.js",
               "devServerTarget": "TestApp:serve"
             },
             "configurations": {
               "production": {
                 "devServerTarget": "TestApp:serve:production"
               }
             }
           },
           "lint": {
             "builder": "@angular-devkit/build-angular:tslint",
             "options": {
               "tsConfig": "e2e/tsconfig.e2e.json",
               "exclude": [
                 "**/node_modules/**"
               ]
             }
           }
         }
       }
     },
     "defaultProject": "TestApp"
   }

6. run: ng serve
7. let the build complete, open the app to verify that it is working
8. modify the component with the Kendo grid and save the file
9. observe that the build fails

[T. Tsonev]

Hi,

Thanks for reporting this problem. It appears to be caused by angular/angular-cli#11835.

The suggested workaround for the moment seems to be to downgrade to @angular/cli v6.1.1​​

Regards,
T. Tsonev
Progress Telerik

[Drew]

Thanks, that issue thread is quite helpful.

[Szymon]

Is there any other fix than downgrade CLI version ?

I am also facing some problems with --aot

 

Thanks,

Szymon

[T. Tsonev]

Hello,

The issue appears to be fixed in @angular/compiler v6.1.6
Please, revert the version in package.json to "^6.1.0" and updating your packages.

Best Regards,
T. Tsonev
Progress Telerik