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

Created on 18 Sep 2017 · 14Comments · Source: telerik/kendo-angular

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/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

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

Bug inputs

Source

prabh-62

Most helpful comment

@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.

ilianiv on 29 Sep 2017

👍2

All 14 comments

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.

rusev on 19 Sep 2017

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 on 19 Sep 2017

👍1

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/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

prabh-62 on 20 Sep 2017

👍1

@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.

ilianiv on 27 Sep 2017

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

prabh-62 on 27 Sep 2017

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?

ilianiv on 28 Sep 2017

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

tsvetomir on 28 Sep 2017

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

ilianiv on 28 Sep 2017

@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 on 29 Sep 2017

Filed angular/angular#19478

tsvetomir on 29 Sep 2017

@tsvetomir,

Thanks.

ilianiv on 29 Sep 2017

👍2

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)

prabh-62 on 29 Sep 2017

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.

tsvetomir on 2 Oct 2017

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/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @compodoc/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]