Select control doesn't show when published in Azure - html

Question

I have got a weird situcation here. I have a select control on a web page with angular. It shows correctly in local environment.
However, when I published it to Azure, The select control does not show correctly.
This is local showing.
This is on Azure site showing.
This is inspect of select control on local site. Which looks good.
This is inspect of select control on Azure site. As it can be seen that, the select control is empty.
Here is the html for select control, I create a component for customize showing.
<div class="dynamic-field row" [formGroup]="group">
<label class="col-form-label" [ngClass]="'col-'+config.labelSize" *ngIf="config.labelSize!==0">{{ config.label }}</label>
<div [ngClass]="'col-'+ (12 - (config.labelSize||0))">
<div class="input-group input-group-sm">
<div class="input-group-prepend" *ngIf="config.prepend">
<span class="input-group-text" *ngIf="!config.prependConfig" [innerHTML]="config.prepend"></span>
<span class="input-group-text cursor-pointer" *ngIf="config.prependConfig" cspsDynamicFormModalLink [innerHTML]="config.prepend"
[config]="config.prependConfig"></span>
</div>
<select [formControlName]="config.name" class="form-control">
<option [ngValue]="undefined" *ngIf="config.placeholder">{{ config.placeholder }}</option>
<option [ngValue]="option.key" *ngFor="let option of options">
{{ option.value }}
</option>
</select>
<div class="input-group-append" *ngIf="config.append">
<span class="input-group-text" *ngIf="!config.appendConfig" [innerHTML]="config.append"></span>
<span class="input-group-text cursor-pointer" *ngIf="config.appendConfig" cspsDynamicFormModalLink [innerHTML]="config.append"
[config]="config.appendConfig"></span>
</div>
</div>
</div>
</div>
Here is the ts file:
#Component({
selector: 'form-select',
templateUrl: 'form-select.component.html',
styleUrls: ['form-select.component.css']
})
export class FormSelectComponent implements Field, OnInit {
config: FieldConfig;
group: FormGroup;
options: { key: any, value: string }[];
ngOnInit() {
const sorter = {
asc: (a: { value: string }, b: { value: string }) => { return a.value === b.value ? 0 : (a.value > b.value ? 1 : -1) },
desc: (a: { value: string }, b: { value: string }) => { return a.value === b.value ? 0 : (a.value < b.value ? 1 : -1) },
none: undefined
}
this.config.sortOptions = this.config.sortOptions || 'none';
if (this.config.options)
this.options = this.config.options.sort(sorter[this.config.sortOptions]);
else
this.options = [];
}
}
Could anyone give me some suggestions? Or tell me what's going on?
Thanks