Compile Problem with angular 11.2.8 and Ivy enabled

[ekombrza]

Hello, All is OK when I'm in dev mode and i "ionic build" or "ionic serve". But when I 'ionic build --prod', I've the followed error :

ng run app:build:production ✔ Browser application bundle generation complete.

Error: src/app/tab1/tab1.page.html:11:4 - error TS2322: Type 'string' is not assignable to type 'CalendarMode'.

11 [calendarMode]="calendar.mode"

  src/app/tab1/tab1.page.ts:7:16
    7   templateUrl: 'tab1.page.html',

Error occurs in the template of component Tab1Page.

Error: src/app/tab1/tab1.page.html:17:3 - error TS2322: Type '"30"' is not assignable to type 'Step'.

17 step="30">

  src/app/tab1/tab1.page.ts:7:16
    7   templateUrl: 'tab1.page.html',

Error occurs in the template of component Tab1Page.

When I add "enableIvy": true in tsconfig.json, the build is OK.

My calendar html infos : <calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate" (onCurrentDateChanged)="onCurrentDateChanged($event)" (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)" (onTimeSelected)="onTimeSelected($event)" step="30">

My ts infos : Same as the stackblitz example : https://stackblitz.com/edit/ionic-qfrkfz

---

My package.json :

{ "name": "myApp", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "~11.2.0", "@angular/core": "~11.2.0", "@angular/forms": "~11.2.0", "@angular/platform-browser": "~11.2.0", "@angular/platform-browser-dynamic": "~11.2.0", "@angular/router": "~11.2.0", "@capacitor/core": "2.4.7", "@ionic/angular": "^5.5.2", "ionic2-calendar": "^0.6.7", "rxjs": "~6.6.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1102.4", "@angular-eslint/builder": "2.0.2", "@angular-eslint/eslint-plugin": "2.0.2", "@angular-eslint/eslint-plugin-template": "2.0.2", "@angular-eslint/template-parser": "2.0.2", "@angular/cli": "~11.2.4", "@angular/compiler": "~11.2.0", "@angular/compiler-cli": "~11.2.0", "@angular/language-service": "~11.2.0", "@capacitor/cli": "2.4.7", "@ionic/angular-toolkit": "^3.1.1", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "4.16.1", "@typescript-eslint/parser": "4.16.1", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.2.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "~4.0.2" }, "description": "An Ionic project" }

---

ionic version 6.13.1

ng version

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | ' \ / | | | | |/ _ | '| | | | | | | / _ | | | | (| | || | | (| | | | || |_ | | // __| ||_, |_,||_,|| __|__|| |/

Angular CLI: 11.2.8 Node: 12.19.0 OS: darwin x64

Angular: 11.2.9 ... common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1102.8 @angular-devkit/build-angular 0.1102.8 @angular-devkit/core 11.2.8 @angular-devkit/schematics 11.2.8 @angular/cli 11.2.8 @schematics/angular 11.2.8 @schematics/update 0.1102.8 rxjs 6.6.7 typescript 4.0.7

[twinssbc]

@ekombrza it seems the prod build mode requires more strict type conversion. You could change like this

HTML

  <calendar [eventSource]="eventSource"
            [calendarMode]="calendar.mode"
            [currentDate]="calendar.currentDate"
            (onCurrentDateChanged)="onCurrentDateChanged($event)"
            (onEventSelected)="onEventSelected($event)"
            (onTitleChanged)="onViewTitleChanged($event)"
            (onTimeSelected)="onTimeSelected($event)"
            [step]="calendar.step"></calendar>

TS

import {CalendarMode, Step} from 'ionic2-calendar/calendar';

  calendar = {
    mode: 'week' as CalendarMode,
    step: 60 as Step,
   ...
};

[ekombrza]

Yes !! Thank you @twinssbc. It works perfectly.