Can I force an Angular #variableName for an HTML element to return an ElementRef?

If I create a button like this: <button #myButton>My Button</button> …and use ViewChild like this: @ViewChild(‘myButton’, { static: true }) createButton: ElementRef; …then createButton is (as declared) an ElementRef, where createButton.nativeElement is a DOM element. If, however, I do this: <button mat-raised-button #myButton>My Button</button> …my variable is no longer an ElementRef, but a MatButton instance […]

How can I make Angular component animations follow CSS class changes, rather than static styles?

I’ve created a block-cursor date/time input field that uses Angular states and animations to indicate both ongoing states (like being disabled) or animated transitional states (like a red flash when an invalid keystroke has been entered). These input fields can be seen in use here: https://skyviewcafe.com/ export const BACKGROUND_ANIMATIONS = trigger(‘displayState’, [ state(‘error’, style({ backgroundColor: […]

By kshetline
Published
Categorized as angular, animation, css, javascript, typescript Tagged , , , ,

Is there a way to make "ng build" for an Angular library export SCSS as CSS?

I have my ng-package.json set up like this: { "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/tubular-ng-widgets", "lib": { "cssUrl": "inline", "entryFile": "src/public-api.ts", "umdModuleIds": { "@tubular/math": "tbMath", "@tubular/time": "tbTime", "@tubular/util": "tbUtil" } }, "assets": ["./src/styles.scss"] } This works well enough, but consumers of the library have to include styles as SCSS, the same as I use in my development […]

By kshetline
Published
Categorized as angular, sass, typescript Tagged , ,

How do I get sourcemaps my original TypeScript code using rollup and terser?

A similar question was asked here: Rollup is not generating typescript sourcemap ..but about rollup with svelte for minification (with which I’m not familiar) rather than terser. I’m not sure how much of a difference that makes. I copied the suggested solution, resulting in this rollup.config.js: import { terser } from ‘rollup-plugin-terser’; import typescript from […]

Upgrade from Angular 12.0.4 to Angular 12.1.0 produces runtime error, reverting to 12.0.4 compile error

There’s a somewhat related issue posted here: Angular: TypeError: Cannot read property 'firstCreatePass' of null …but that’s with different Angular versions involved, and the solution there doesn’t help me. The runtime error which is in common is: Cannot read property ‘firstCreatePass’ of null Another possible difference is that I’m attempting to create an Angular library. […]

By kshetline
Published
Categorized as angular, typescript Tagged ,

Programmatically collapsing a mat-expansion-panel gets it out-of-sync with expansion by mouse clicks

I have a menu that contains an expandable panel. I would like the menu to open up with that panel collapsed, regardless of whether or not it had been left expanded the last time the menu was open. So I catch both the menuOpened and menuClosed events from my mat-menu, and call MatExpansionPanel.close(). Stackblitz demo […]

By kshetline
Published
Categorized as angular, angular-material, typescript Tagged , ,

"Please add a @NgModule annotation" error… on something that has @NgModule annotation

I’ve found other posts on this subject, but my issues aren’t the same. I can avoid this issue entirely by turning off AOT compilation. I’m using Angular 11. In code that had been working before Angular 11, I had some providers defined like this: providers: [ HighlighterService, SignInService, { provide: AUTHENTICATOR, useClass: AuthenticationService }, { […]

By kshetline
Published
Categorized as angular, angular-aot, typescript Tagged , ,

How do I make Angular happy with my npm packages? No "CommonJS or AMD dependencies can cause optimization bailouts"

First of all, I’m NOT talking about "allowedCommonJsDependencies". That’s just a matter of suppressing warnings. What I want to do is design an npm package, to be used by Angular projects as well as non-Angular projects, so that there will be no warnings which have to be suppressed. My package already contains ESM-style modules, as […]

By kshetline
Published
Categorized as angular, npm, typescript Tagged , ,

Why would Angular 11 pull the crappy ES5 code out of my package that contains esm2015 code as an alternative?

I’ve decided to update some old npm packages so that they will now contain ES2015 JavaScript, as ESM modules, and well as unpacked ES5 code, and minified UMD ES5 for web browsers. My package.json looks like this: { "name": "@tubular/time", "version": "2.3.0", "description": "Date/time, IANA timezones, calendar with settable Julian/Gregorian switchover", "browser": "dist/web/index.js", "main": "dist/es5/index.js", […]

By kshetline
Published
Categorized as angular, javascript, npm, typescript, webpack Tagged , , , ,

How do I update my own npm packages to make Angular 11+ happy with them? (no commonjs/amd/bailout warnings)

I’ve found plenty of advice like this: Angular 10 – CommonJS or AMD dependencies can cause optimization bailouts …about how to make Angular stop complaining about npm packages which produce this warning: CommonJS or AMD dependencies can cause optimization bailouts.For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies Instead of just hiding these warnings, however, I’d like to make […]

By kshetline
Published
Categorized as angular, es6-modules, javascript, npm Tagged , , ,

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq