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.jsModule 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:
- install Angular CLI v 6 globally: yarn global add @angular/cli@latest
- generate a new Angular 6 test app: ng new TestApp
- add Kendo Angular Grid: ng add @progress/kendo-angular-grid
- 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)
- 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"} - run: ng serve
- let the build complete, open the app to verify that it is working
- modify the component with the Kendo grid and save the file
- observe that the build fails
4 Answers, 1 is accepted
0
Accepted
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
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Drew
Top achievements
Rank 1
Rank 1
answered on 15 Aug 2018, 06:08 PM
Thanks, that issue thread is quite helpful.
0
Szymon
Top achievements
Rank 1
Rank 1
answered on 14 Sep 2018, 08:00 AM
Is there any other fix than downgrade CLI version ?
I am also facing some problems with --aot
Thanks,
Szymon
0
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
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.