Angular based Zendesk App

Asuming you have zat and npm installed on your system a new app can be created by running these commands:

zat new 

Enter your iFrame URI or leave it blank to use a default local template page:
 (assets/iframe.html) index.html 

sudo npm install -g @angular/cli 

ng new <app-name>

Create build and deploy scripts in the package.json:

{
"build": "ng build --deleteOutputPath --prod --base-href . --aot --source-map",
"deploy": "npm run build && cp manifest.json dist/ && cp -r translations dist/ && cp node_modules/@zendeskgarden/svg-icons/dist/index.svg dist/assets && mv dist/assets/assets/* dist/assets && cp dev.zat dist/.zat; cd dist; zat update; cd ..",
}

Because of the file size limits from Zendesk adding npm modules is not a viable solution since that would include the modules directly in the Zendesk app. Instead it is required to include the 3rd party components you depend on through script tags. Example of including access to required libraries in the index.html file:

<script src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js" type="text/javascript"></script>
<script crossorigin="anonymous" integrity="sha256-27lOq325r4MQT9M9GG3pS3ts5iRaSqw+h9fHpW16NLw=" src="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-variables@5.2.0/dist/index.js"></script>
<script crossorigin="anonymous" integrity="sha256-59IZ5dbLyByZgSsRE3Z0TjDuX7e1AiqW5bZ8Bg50dsU=" src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.js"></script>
<link href="https://cdn.jsdelivr.net/combine/npm/@zendeskgarden/css-buttons@6,npm/@zendeskgarden/css-bedrock@7,npm/@zendeskgarden/css-forms@6,npm/@zendeskgarden/css-utilities@3,npm/@zendeskgarden/css-menus@8,npm/@zendeskgarden/css-tables@3,npm/@zendeskgarden/css-grid@0.1.15,npm/@zendeskgarden/css-callouts@3" rel="stylesheet" type="text/css"></link>

Remove the vertical scrollbar with this css:

html { overflow-y: hidden; }