microsoft / microsoft/AdaptiveCards
Compatibility issue with adaptivecards-templating and adaptive-expressions
Nobody has claimed this yet.
- Dominant language
- C#
- Stars
- 2k
- Forks
- 595
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 1
Description
Problem description
The latest adaptivecards-templating and adaptive-expressions packages seem incompatible. Following the docs for javascript as provided here results in Uncaught TypeError: $ is not a function. I'm using the packages in Angular.
Manually setting the version of adaptive-expressions to 4.22.3 resolves the error, but I would like to to use the latest version.
Repro
Code
Please refer to Stackblitz above for full repro.
import { Component, OnInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import * as ACData from 'adaptivecards-templating';
import * as AdaptiveCards from 'adaptivecards';
@Component({
selector: 'app-root',
template: `
<h1>Hello from {{ name }}!</h1>
<a target="_blank" href="https://angular.dev/overview">
Learn more about Angular
</a>
<div id="container"></div>
`,
})
export class App implements OnInit {
name = 'Angular';
ngOnInit() {
const templatePayload = {
type: 'AdaptiveCard',
version: '1.0',
body: [
{
type: 'TextBlock',
text: 'Hello ${name}!',
},
],
};
const template = new ACData.Template(templatePayload);
const cardPayload = template.expand({
$root: {
name: 'Example card',
},
});
const adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.parse(cardPayload);
const renderedCard = adaptiveCard.render();
if (renderedCard)
document.getElementById('container')?.appendChild(renderedCard);
}
}
bootstrapApplication(App);
Stacktrace
Uncaught TypeError: $ is not a function
at 668.../internals/export (browser.js:87213:7)
at o (browser.js:35:19)
at browser.js:37:20
at 781.../modules/es.global-this (browser.js:91907:7)
at o (browser.js:35:19)
at browser.js:37:20
at Object.<anonymous> (browser.js:82285:11)
at Object.<anonymous> (browser.js:82301:12)
at 522.@babel/runtime/helpers/interopRequireDefault (browser.js:82302:10)
at o (browser.js:35:19)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Stackblitz reproduction and the Angular App.ngOnInit entry point, using the latest adaptivecards-templating and adaptive-expressions packages. Confirm the $ is not a function stack trace and compare it with adaptive-expressions 4.22.3. Done means the documented JavaScript usage works with the latest package version and the Adaptive Card renders without the error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100