[Bug] Angular 5.x with Kendo Inputs: Build fails

[prabh-62]

I'm submitting a...

• Regression report

Current behavior

• Angular CLI build script errors out with some kendo packages

Expected behavior

• Angular CLI build should not error out with Kendo packages

Minimal reproduction of the problem with instructions

> ng new rome -si -sg --minimal
> npm install @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-angular-l10n

In package.json, amend the build script

"build": "ng build --target production --aot true --build-optimizer true"

In app.module.ts, replace code with this snippet

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NumericTextBoxModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In app.component.ts, add this code (Copied from official docs)

@Component({
  selector: 'my-app',
  template: `
    <<div class="example-config">
          <input id="ac" type="checkbox" [(ngModel)]="autoCorrect">
          <label for="ac">Auto-correct value to be between min and max</label>
        </div>
        <kendo-numerictextbox
            [value]="value" [min]="0" [max]="100" [autoCorrect]="autoCorrect">
        </kendo-numerictextbox>
  `
})
class AppComponent {
    public autoCorrect: boolean = false;
    public value: number = 5;
}

Now run the build script

> npm run build

ERROR in Error: Error encountered resolving symbol values statically. Calling function 'OpaqueToken', function calls are not supported.

There are other error messages which will popup once this error is resolved,

Environment

Package versions:

+-- @angular/animations@5.0.0-beta.7
+-- @angular/cli@1.5.0-beta.0
+-- @angular/common@5.0.0-beta.7
+-- @angular/compiler@5.0.0-beta.7
+-- @angular/compiler-cli@5.0.0-beta.7
+-- @angular/core@5.0.0-beta.7
+-- @angular/forms@5.0.0-beta.7
+-- @angular/http@5.0.0-beta.7
+-- @angular/language-service@5.0.0-beta.7
+-- @angular/platform-browser@5.0.0-beta.7
+-- @angular/platform-browser-dynamic@5.0.0-beta.7
+-- @angular/router@5.0.0-beta.7
+-- @progress/kendo-angular-inputs@1.3.0
+-- @progress/kendo-angular-intl@1.2.2
+-- @progress/kendo-angular-l10n@1.0.3
+-- core-js@2.5.1
+-- rxjs@5.4.3
+-- typescript@2.5.2
+-- zone.js@0.8.17

Browser:

• Chrome (desktop) version 60.0.3112.113

System:

• TypeScript version: 2.5.2
• Node version: 8.5.0 and NPM v5.4.1
• Platform: Windows 10

[rusev]

It seems that you are using Angular version 5.0.0-beta.7 which removes the OpaqueToken in favor to InjectionToken.

Our components are not yet adapted to Angular version 5.x. We will release an update once 5.x becomes official.

[prabh-62]

Thank you for responding Alex.

OpaqueToken was already deprecated in Angular v4. See Link to Changelog

Why are we using beta version of Angular?

• During prod build using Angular CLI, the script produced an error (Uglify Error)

• Bumped the CLI version to 1.5.0-beta.0 to support ES2015 target to resolve the issue (Issue)

• Now, ng serve doesn't work but ng serve -aot does

• And also, Webpack dev server takes ~10secs on each file change for compilation(Vendor file is ~7MB)

• Updated Angular core to v5 beta to reduce vendor file size(~1MB) and and make webpack dev server quick to respond to file changes.

• The only issues left are with Kendo Inputs Module (Numeric Text Component and i10N), rest everything is working perfectly fine.

[prabh-62]

Even with latest Angular 4.x, there are few warnings with compilation which needs to be resolved otherwise dist(produced after npm run build) files print a lot of console errors.

@NgModule({ ... imports: [ InputsModule, ...] ...)}

WARNING in ./node_modules/@progress/kendo-angular-inputs/dist/es/maskedtextbox/parsing/parsers.js 32:36-46 "export 'ResultType' was not found in './result'

Package Versions:

+-- @angular/animations@4.4.3
+-- @angular/cli@1.5.0-beta.0
+-- @angular/common@4.4.3
+-- @angular/compiler@4.4.3
+-- @angular/compiler-cli@4.4.3
+-- @angular/core@4.4.3
+-- @angular/forms@4.4.3
+-- @angular/http@4.4.3
+-- @angular/language-service@4.4.3
+-- @angular/platform-browser@4.4.3
+-- @angular/platform-browser-dynamic@4.4.3
+-- @angular/router@4.4.3
+-- @progress/kendo-angular-inputs@1.3.0
+-- @progress/kendo-angular-intl@1.2.2
+-- @progress/kendo-angular-l10n@1.0.3
+-- core-js@2.5.1
+-- rxjs@5.4.3
+-- ts-node@3.3.0
+-- tslint@5.7.0
+-- typescript@2.5.2
+-- zone.js@0.8.17

[ilianiv]

@prabh-62, same warning here

WARNING in ./node_modules/@progress/kendo-angular-inputs/dist/es/maskedtextbox/parsing/parsers.js
32:36-46 "export 'ResultType' was not found in './result'

using angular 4.4

The warning appears only in a combination with AOT build and --build-optimizer=true flag I think.

[prabh-62]

Yes, you are right. Should I open a new issue for it or is it being tracked internally?

[ilianiv]

I've noticed another issue about --build-optimizer.

My app throws cannot read property 'PrevView' of undefined
somewhere in kendo-angular-dateinputs/dist/es/calendar/models/navigation-action.enum.

@rusev, are you going to investigate warnings and exceptions in AOT build with --build-optimizer turned on? Should we open a separate issue about it?

[tsvetomir]

I'm reopening this issue until we have full compatibility with Angular 5.x

[ilianiv]

WARNING in ./node_modules/@progress/kendo-angular-inputs/dist/es/maskedtextbox/parsing/parsers.js 32:36-46 "export 'ResultType' was not found in './result'

during build

and

cannot read property 'PrevView' of undefined

when running

exist in Angular 4.4 AOT with --build-optimizer build

I think this is more build-optimizer issue rather than angular 5

[tsvetomir]

@prabh-62: pushed a fix for this error in @progress/kendo-angular-l10n v1.0.4

With that error resolved I've got onto the next one in my test project:

ERROR in /home/tsonev/tmp/ng5-test1/src/$$_gendir/node_modules/@progress/kendo-angular-inputs/dist/es/slider/slider.component.ngfactory.ts (19,22): Cannot find module '../../../../kendo-angular-resize-sensor/dist/es/resize-sensor.component.ngfactory'.
ERROR in /home/tsonev/tmp/ng5-test1/src/$$_gendir/node_modules/@progress/kendo-angular-inputs/dist/es/switch/switch.component.ngfactory.ts (15,21): Cannot find module '../../../../kendo-angular-resize-sensor/dist/es/resize-sensor.component.ngfactory'.

This is solved by importing the ResizeSensorModule in our project. Looks like a bug in the Angular Compiler as we're not even referencing it in our NgModule. It should normally be dropped during tree shaking.

@ilianiv I can't reproduce this error in my Angular 4.4 test branch. Can you please compare package versions? Specifically Typescript and Angular.

[tsvetomir]

Filed angular/angular#19478

[ilianiv]

@tsvetomir,

My angular/cli was a bit outdated - 1.4.2 and my angular-devkit/build-optimizer was at version 0.0.20. Yours are cli - 1.4.4 and build-optimizer - 0.0.23. Updating cli to 1.4.4 updated build optimizer to 0.0.23 and fixed the problem so it was build optimizer issue that is fixed now. I have no warnings during build and no error when running.

Thanks.

[prabh-62]

Thanks tsvetomir

I am currently blocked by angular/angular-cli#7799 (Related to InjectionToken class's constructor)

I have to use Angular cli >= 1.5.0 for ES2015 build (can't go around)

[tsvetomir]

It looks like we need to use @angular/cli v1.5.0-beta.2 and later.

We'll continue testing, but all looks good with the new version of the CLI.

[prabh-62]

Looks like, with Angular 4.4.4, I am able to use build-optimizer and reduce my app's bundle size. Thank you very much for the changes in kendo-angular packages.

+-- @angular/animations@4.4.4
+-- @angular/cli@1.5.0-beta.4
+-- @angular/common@4.4.4
+-- @angular/compiler@4.4.4
+-- @angular/compiler-cli@4.4.4
+-- @angular/core@4.4.4
+-- @angular/forms@4.4.4
+-- @angular/http@4.4.4
+-- @angular/language-service@4.4.4
+-- @angular/platform-browser@4.4.4
+-- @angular/platform-browser-dynamic@4.4.4
+-- @angular/router@4.4.4
+-- @compodoc/compodoc@1.0.1
+-- @progress/kendo-angular-buttons@1.1.0
+-- @progress/kendo-angular-dateinputs@1.2.1
+-- @progress/kendo-angular-dropdowns@1.2.2
+-- @progress/kendo-angular-excel-export@1.0.4
+-- @progress/kendo-angular-grid@1.4.2
+-- @progress/kendo-angular-inputs@1.3.1
+-- @progress/kendo-angular-intl@1.2.2
+-- @progress/kendo-angular-l10n@1.0.4
+-- @progress/kendo-angular-layout@1.0.7
+-- @progress/kendo-angular-resize-sensor@1.0.4
+-- @progress/kendo-angular-ripple@0.1.1
+-- @progress/kendo-angular-scrollview@1.0.5
+-- @progress/kendo-data-query@1.0.7
+-- @progress/kendo-drawing@1.4.0
+-- @progress/kendo-theme-default@2.42.2
+-- @progress/kendo-theme-material@0.2.2
+-- @types/jasmine@2.6.0
+-- @types/jasminewd2@2.0.3
+-- @types/node@8.0.32
+-- @types/pdfjs-dist@0.1.0
+-- codelyzer@3.2.1
+-- core-js@2.5.1
+-- font-awesome@4.7.0
+-- husky@0.14.3
+-- jasmine-core@2.8.0
+-- jasmine-spec-reporter@4.2.1
+-- karma@1.7.1
+-- karma-chrome-launcher@2.2.0
+-- karma-cli@1.0.1
+-- karma-coverage-istanbul-reporter@1.3.0
+-- karma-jasmine@1.1.0
+-- karma-jasmine-html-reporter@0.2.2
+-- lint-staged@4.2.3
+-- moment@2.18.1
+-- ngx-toastr@6.3.0
+-- pdfjs-dist@1.9.628
+-- prettier@1.7.4
+-- protractor@5.1.2
+-- raven-js@3.18.1
+-- rxjs@5.4.3
+-- sweetalert2@6.10.1
+-- tiff.js@1.0.0
+-- ts-node@3.3.0
+-- tslint@5.7.0
+-- typescript@2.5.3
+-- zone.js@0.8.18