Angular schematics to create Microsoft Teams applications
MIT License
Angular schematics to create Microsoft Teams applications.
ng new
This package provides a schematic that creates a new Angular app configured to be deployed as a Microsoft Teams app. The generated app includes:
To use this schematic, make sure you have @angular/cli
installed and run:
npm install -g teams-angular
ng new teams-app --collection teams-angular
Note: if you get an error like
An unhandled exception occurred: Collection "teams-angular" cannot be resolved.
, it may be related to your NPM installation. Here are a few commands that you can try to fix the issue:npm uninstall -g @angular/cli teams-angular npm cache clean --force npm install -g npm@latest npm install -g @angular/cli teams-angular
When you are ready to deploy your app to production, there are two main steps needed to make your app available to the public: first you need to deploy your web app on a server, and then you need to publish the app to your production tenant.
dist/
folder using npm run build
.node scripts/update-manifest.js <production_url>
npm run m365:login
npm run m365:create-aad-app
npm run m365:publish
What's Azure Static Web Apps? It's an all-inclusive hosting service for web apps providing features like continuous deployment, serverless APIs, authentication and more. And it has a free tier!
Prerequisites:
angular-teams-app
angular-teams-app
Wait a few seconds for everything to be set up, and click on Go to resource. From there, you'll be able to see the new public URL that was created for your app in the URL field.
This is what you'll use for your production URL. After a few minutes, your Teams app will be available at this URL.
You can find more tutorials on using Static Web Apps here.
To test locally, run npm test:schematics
. This will act the same as the generate
command of the Angular CLI, but using a debug mode.
npm run test
will run the unit tests, using Jest as a runner and test framework.