Dialog is not a constructor ui5 - sapui5

Question

I get an error while using an reusing a dialog in sapui5:
Dialog is not a constructor
I want to create a dialog fragment. dialog.js contains all functions and after that make it global in the component.js
sap.ui.define([
"sap/ui/base/Object"
], function (Object) {
"use strict";
return Object.extend("tmp.Zprojetyousra.controller.Dialog", {
constructor : function (oView) {
this._oView = oView;
},
open : function () {
var oView = this._oView;
var oDialog = oView.byId("dialog");
// create dialog lazily
if (!oDialog) {
var oFragmentController = {
onCloseDialog : function () {
oDialog.close();
}
};
// create dialog via fragment factory
oDialog = sap.ui.xmlfragment(oView.getId(), "tmp.Zprojetyousra.view.Dialog", oFragmentController);
// connect dialog to the root view of this component (models, lifecycle)
oView.addDependent(oDialog);
}
oDialog.open();
}
});
});
HTML:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Dialog
id="dialog"
title="Hello dialogs}">
<content>
<core:Icon
src="sap-icon://hello-world"
size="8rem"
class="sapUiMediumMargin"/>
</content>
<beginButton>
<Button
text="{i18n>dialogCloseButtonText}"
press="onCloseDialog"/>
</beginButton>
</Dialog>
</core:FragmentDefinition>
JS:
sap.ui.define([
"sap/ui/core/UIComponent",
/* "tmp/Zprojetyoussra/model/models", peut influencer sur le code */
"sap/ui/model/json/JSONModel",
"tmp/Zprojetyoussra/controller/Dialog" ,
"sap/ui/Device"
/// device toujours doit etre a la fin des dependecies
], function (UIComponent, JSONModel, Device, Dialog) {
"use strict";
return UIComponent.extend("tmp.Zprojetyoussra.Component", {
metadata: {
// rootView: "tmp.Zprojetyoussra.view.tesstview"
manifest: "json"
},
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient : {
name : "World"
}
};
// without this.getview
var oModel = new sap.ui.model.json.JSONModel(oData);
this.setModel(oModel);
// set i18n model
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleName : "tmp.Zprojetyoussra.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
/* eslint-disable no-alert */
// debug code to show an alert for missing destination or CORS issues in the tutorial (see step 26 for details)
this.getModel("invoice").attachEventOnce("metadataFailed", function(oEvent) {
alert("Request to the OData remote service failed.\nRead the Walkthrough Tutorial Step 26 to understand why you don't see any data here.");
});
// set device model
var oDeviceModel = new JSONModel(Device);
oDeviceModel.setDefaultBindingMode("OneWay");
this.setModel(oDeviceModel, "device");
this._dialog= new Dialog();
// create the views based on the url/hash
this.getRouter().initialize();
}
});
});
Error:

Answer 1

You have a wrong order of your imports in the controller define section. In the array you have:
UIComponent, JSONModel, Dialog, Device
but in the function definition below you have:
UIComponent, JSONModel, Device, Dialog
So the Dialog variable holds Device namespace which doesn't have a controller.

Answer 2

As #vasek said put your import in the right order use this syntax in your js file :
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"tmp/Zprojetyoussra/controller/Dialog" ,
"sap/ui/Device"
], function (UIComponent, JSONModel, Dialog, Device) {
"use strict";
return UIComponent.extend("tmp.Zprojetyoussra.Component", {
metadata: {
// rootView: "tmp.Zprojetyoussra.view.tesstview"
manifest: "json"
},