JoostK
Repos
47
Followers
128
Following
18

The modern web developer’s platform

84117
21469

Compile and package Angular libraries in Angular Package Format (APF)

1770
284

A reactive programming library for JavaScript

27782
2777

Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation for your next big idea — freeing you to create without sweating the small things.

71101
22221

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

84685
10614

Events

issue comment
Unknown directive error inside ng-template or structural directive not detected with fullTemplateTypeCheck disabled

Yep, this is a duplicate of #36171.

Created at 1 day ago
closed issue
Unknown directive error inside ng-template or structural directive not detected with fullTemplateTypeCheck disabled

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

I have a project where fullTemplateTypeCheck is disabled and FormsModule was accidentally dropped from imports.

Angular compiler did not complain NG8002: Can't bind to 'ngModel' since it isn't a known property errors. It turned out that all of our ngModel usage were either inside ng-template or conditioned with *ngIf. Removing *ngIfs for one of them recovered error detection for that element.

I recall Angular used to complain such issues anywhere upon AoT build, before the Ivy switch.

Please provide a link to a minimal reproduction of the bug

  • "fullTemplateTypeCheck: false" in tsconfig.json
  • remove FormsModule from NgModule's imports

error not detected (inside ng-template):

<ng-template>
  <!-- ... -->
  <input [(ngModel)]="name">
  <!-- ... -->
</ng-template>

error not detected (inside structural directive):

<div *ngIf="editing">
  <!-- ... -->
  <input [(ngModel)]="name">
  <!-- ... -->
</div >

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.3.7
Node: 14.19.1
Package Manager: npm 7.20.3
OS: darwin x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.7
@angular-devkit/build-angular   13.3.7
@angular-devkit/core            13.3.7
@angular-devkit/schematics      13.3.7
@angular/cdk                    13.3.9
@angular/cli                    13.3.7
@angular/fire                   7.4.1
@schematics/angular             13.3.7
rxjs                            6.6.7
typescript                      4.6.4
webpack                         5.73.0

Anything else?

Probably related to #36171.

Created at 1 day ago
issue comment
*ngif (observable | async) cannot display Dom after add pipe() to observable

@alxhub the problem #47484 is not the same as my question, my question has no errors in the console, can you take serious at my question?

Alex's answer is entirely accurate here; inferReady might emit at one point in time (but never more than once) but inferError is resubscribed each and every time again (because a new Observable instance is created in inferError) but the timeout signal is never resubmitted, so Angular will never witness that signal.

Created at 1 day ago
closed issue
Refresh not done properly when triggered by a binding in a directive

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Here is a component:

@Component({
  selector: 'app-root',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button type="button" (click)="d.toggle()">Toggle</button>
    <button type="button" (click)="state = !state">Toggle by binding</button>
    <ul class="mt-2">
      <li>state = {{ state }}</li>
      <li>d.state = {{ d.stateChange | async }}</li>
      <li>processing = {{ d.processing | async }}</li>
    </ul>

    <div #d="myDirective" [(myDirective)]="state"></div>
  `,
})
export class AppComponent {
  state = false;
}

It uses the following directive:

import { Directive, Input, Output } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export const createModel = () => {
  const state$ = new BehaviorSubject(true);
  const processing$ = new BehaviorSubject(false);
  const toggle = async (newState = !state$.getValue()): Promise<void> => {
    console.log('Beginning toggle, newState = ' + newState);
    // Note that uncommenting the following line is a workaround for this issue:
    // await Promise.resolve();
    processing$.next(true);
    state$.next(newState);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    processing$.next(false);
    console.log('Ending toggle, newState = ' + newState);
  };

  return {
    state$,
    processing$,
    toggle,
  };
};

@Directive({
  selector: '[myDirective]',
  exportAs: 'myDirective',
})
export class MyDirective {
  private model = createModel();

  @Input('myDirective')
  set state(value: boolean) {
    this.model.toggle(value);
  }

  @Output('myDirectiveChange')
  stateChange = this.model.state$;

  processing = this.model.processing$;

  toggle() {
    return this.model.toggle();
  }
}

When clicking on the "Toggle" button in the component, everything works as expected:

  • The first two lines state and d.state have the same boolean value (the opposite of the previous value), and the third line has processing = true
  • After 1s, the third line switches back to processing = false

When clicking on the "Toggle by binding" button, the same toggle method from the model is triggered, so the same behavior as before would be expected. However, Angular only refreshes the first line (state) and does not update the d.state and processing lines, even though they changed. After 1s, the second line (d.state) is updated with the correct value and the third line did not change at all (now that the value of processing is back to false).

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-liytcm?file=src/app/app.component.ts

Please provide the exception or error you saw

There is no error in the console.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.0.7
Node: 16.17.1
Package Manager: npm 8.15.0 
OS: linux x64

Angular: 14.2.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.4
@angular-devkit/build-angular   14.2.4
@angular-devkit/core            14.2.4
@angular-devkit/schematics      14.0.7
@angular/cli                    14.0.7
@schematics/angular             14.0.7
rxjs                            7.5.7
typescript                      4.7.4

Anything else?

No response

Created at 2 days ago
issue comment
Refresh not done properly when triggered by a binding in a directive

This is working as expected, except for https://github.com/angular/angular/issues/45612 where no error is thrown because this is an OnPush component.

The state changes that occur from within the directive after its input binding changes happen after the change detector has already updated the DOM with the values, given that those values occur in the view before assigning the directive input.

This is a typical ExpressionHasChangedAfterItHasBeenChecked error, which would surface if the component is not OnPush. It's generally bad practice to emit into an output when assigning an input, as doing so breaks unidirectional dataflow. This could be masked by making the EventEmitter asynchronous (by passing true as first constructor argument) but that will trigger another round of change detection.

Closing as this is working as expected and #45612 is tracking the issue for OnPush components.

Created at 2 days ago
issue comment
ngSwitchDefault is not working correctly when surrounded by ngIf

NgSwitch and associated directives have not been designed to account for dynamically updating the case/default templates, so this setup completely breaks how NgSwitch decides when the default view should be used.

Created at 4 days ago
issue comment
Unexpected token ?

You're most probably running on a JavaScript engine that is not supported by Angular 14 that does not support nullish coalescing syntax.

You could try setting a lower target in your TypeScript compilation settings, and/or change the browserslist configuration to target older browsers, but ultimaitely such environments are not supported by Angular 14.

Created at 4 days ago
closed issue
Unexpected token ?

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

Hi, I get this error that I passed in the section "Please provide the exception or error you saw" when I run the application in the android emulator. And the app does not want to start, just crashes and shows this error in Logcat. I was open that file and this is what I find in that line: this._baseHref = href ?? this._platformLocation.getBaseHrefFromDOM() ?? (0,_angular_core__WEBPACK_IMPORTED_MODULE_0__.inject)(DOCUMENT).location?.origin ?? ''; which belongs to this: class PathLocationStrategy extends LocationStrategy

If helps I can share vendor.js file with you. But please help me or help me to address who is responsible for it.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

JavaScript Error: {"type":"js.error","error":{"message":"Uncaught SyntaxError: Unexpected token ?","url":"http://localhost/vendor.js","line":24288,"col":28,"errorObject":"{}"}}
File: http://localhost/ - Line 582 - Msg: SyntaxError: Unexpected token ?
File: http://localhost/vendor.js - Line 24288 - Msg: Uncaught SyntaxError: Unexpected token ?

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.4
Node: 16.15.1
Package Manager: npm 8.12.2 
OS: darwin arm64

Angular: 14.2.3
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.4
@angular-devkit/build-angular   14.2.4
@angular-devkit/core            14.2.4
@angular-devkit/schematics      14.2.4
@angular/cli                    14.2.4
@schematics/angular             14.2.4
rxjs                            7.5.7
typescript                      4.8.4

Anything else?

Here is my package.json dependencies:

"dependencies": { "@angular/common": "^14.2.3", "@angular/core": "^14.2.3", "@angular/forms": "^14.2.3", "@angular/platform-browser": "^14.2.3", "@angular/platform-browser-dynamic": "^14.2.3", "@angular/router": "^14.2.3", "@capacitor/android": "^4.3.0", "@capacitor/app": "^4.0.1", "@capacitor/core": "^4.3.0", "@capacitor/filesystem": "^4.1.1", "@capacitor/haptics": "^4.0.0", "@capacitor/ios": "^4.3.0", "@capacitor/keyboard": "^4.0.0", "@capacitor/status-bar": "^4.0.0", "@ionic-native/camera": "^5.36.0", "@ionic-native/core": "^5.36.0", "@ionic-native/file": "^5.36.0", "@ionic-native/splash-screen": "^5.36.0", "@ionic-native/status-bar": "^5.36.0", "@ionic/angular": "^6.2.9", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "animate.css": "^4.1.1", "cordova-plugin-camera": "^6.0.0", "cordova-plugin-file": "^7.0.0", "date-fns": "^2.29.0", "ionic-selectable": "^4.9.0", "rxjs": "~7.5.7", "tslib": "^2.4.0", "twilio-video": "^2.24.1", "zone.js": "~0.11.8" }, "devDependencies": { "@angular-devkit/architect": "^0.1402.4", "@angular-devkit/build-angular": "^14.2.3", "@angular-devkit/core": "^14.2.4", "@angular-eslint/builder": "~13.3.0", "@angular-eslint/eslint-plugin": "~13.3.0", "@angular-eslint/eslint-plugin-template": "~13.3.0", "@angular-eslint/template-parser": "~13.3.0", "@angular/cli": "^14.2.3", "@angular/compiler": "^14.2.3", "@angular/compiler-cli": "^14.2.3", "@angular/language-service": "^14.2.3", "@capacitor/cli": "^4.0.0", "@ionic/angular-toolkit": "^7.0.0", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "4.16.1", "@typescript-eslint/parser": "4.16.1", "cordova-plugin-device": "^2.0.2", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.2.1", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~3.8.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~10.9.1", "typescript": "~4.8.4" },

Created at 4 days ago
issue comment
[Content Projection] ngIf/ngSwitch on an ng-content does not destroy the projected component(s)

This is working as designed; the lifecycle of projected content is defined by the view in which it is defined. If there is no projection target anymore then the projected DOM nodes will simply get detached from the DOM tree, but stay available and continue to be change detected by their owning view.

Created at 4 days ago
issue comment
ng test fails on new project

Which version of Chrome are the tests running in?

Created at 4 days ago
issue comment
ng test fails on new project

This works fine for me (macOS 12.6). What browser are you testing with?

Created at 4 days ago
issue comment
Reactive forms. formArrayName with formGroupName

Minimal repro: https://stackblitz.com/edit/angular-ivy-yzesdz?file=src%2Fapp%2Fapp.component.ts

Created at 5 days ago
issue comment
tsc crashes in generic types without error message (regression in TS 4.8.2)

Duplicate of #50479, has already been fixed but is pending a release (4.8.4).

Created at 6 days ago
closed issue
Angular Animations not work in ViewEncapsulation.ShadowDom env

Which @angular/* package(s) are the source of the bug?

animations, elements

Is this a regression?

No

Description

Expected behavior Setting ShadowDom Encapsulation strategy should work with Angular Animations.

Browser:

  • [x] Chrome (desktop) version XX
  • [ ] Chrome (Android) version XX
  • [ ] Chrome (iOS) version XX
  • [ ] Firefox version XX
  • [ ] Safari (desktop) version XX
  • [ ] Safari (iOS) version XX
  • [ ] IE version XX
  • [ ] Edge version XX

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

As the title mentioned, setting ViewEncapsulation.ShadowDom will cause the Animations not been able to run at all. Use-case: I'm building an Angular Element with Angular Animations to see if the two play well together.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 11.2.19
Node: 14.17.3
OS: darwin x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: No

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.901.15
@angular-devkit/build-angular   0.1102.10
@angular-devkit/core            11.2.19
@angular-devkit/schematics      11.2.19
@angular/cdk                    11.2.13
@angular/cli                    11.2.19
@schematics/angular             11.2.19
@schematics/update              0.1102.19
ng-packagr                      11.2.4
rxjs                            6.6.7
typescript                      4.0.8

Anything else?

What is the motivation/use case for changing the behavior?

Created at 1 week ago
issue comment
Angular Animations not work in ViewEncapsulation.ShadowDom env

This is an exact duplicate of #25672, for which there has been a fix in 12.1.0.

Created at 1 week ago
closed issue
Unable to reuse base class directive EventEmitter in the inherited class?

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

I have inherited a 3rd party directive (in the test example below it's MatSort) and subscribed to its EventEmitter emit in the inherited class (CustomMatSortDirective). However, the subcription never gets triggered after emit call in the base class. Moreover - now it even does not work in the component which makes use of the inherited directive.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-wdmk8l?file=app%2Fcustom-sorting-directive.ts,app%2Ftable-sorting-example.html,app%2Ftable-sorting-example.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1303.9
@angular-devkit/build-angular      13.3.9
@angular-devkit/build-ng-packagr   0.1002.0
@angular-devkit/core               11.0.7
@angular-devkit/schematics         11.0.7
@angular/cdk                       13.2.6
@angular/cdk-experimental          13.2.6
@angular/cli                       13.1.4
@angular/material                  13.2.6
@schematics/angular                13.1.4
ng-packagr                         13.3.1
rxjs                               6.6.7
typescript                         4.5.5

Node (18.8.0)

Anything else?

No response

Created at 1 week ago
issue comment
Unable to reuse base class directive EventEmitter in the inherited class?

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

Created at 1 week ago
issue comment
OptionalChainNotNullableCheck causes heap out of memory error

FYI, this is fixed in 15.0.0-next.3 but just missed the 14.2.3 release as it needed to be backported by hand. It will be in the next release, likely around the same time next week.

Created at 1 week ago
closed issue
DevTools: Make each directive in the component explorer inspectable

Description

Currently we can inspect the source code components in DevTools by clicking the code icon on the top right of the directive inspector.

We should also be able to inspect each directive on the component/element as well. In the example above we should be able to inspect source code of NgControlStatus and NgModel.

Proposed solution

Duplicate the inspect functionality that we're currently using for inspecting component source code for directives.

Relevant files: https://github.com/angular/angular/blob/e4538e03d6baf3e0968a9491b70a209fb6ba5053/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts#L211 https://github.com/angular/angular/blob/e4538e03d6baf3e0968a9491b70a209fb6ba5053/devtools/projects/shell-browser/src/app/chrome-application-operations.ts#L29-L38 https://github.com/angular/angular/blob/e4538e03d6baf3e0968a9491b70a209fb6ba5053/devtools/projects/shell-browser/src/app/chrome-window-extensions.ts#L48

Created at 1 week ago
issue comment
DevTools: Make each directive in the component explorer inspectable

Closed per #47334, thanks @sbrshkappa!

Created at 1 week ago
closed issue
Adding BrowserAnimationsModule to microfrontend application causes content duplication.

Which @angular/* package(s) are the source of the bug?

platform-browser

Is this a regression?

No

Description

When adding BrowserAnimationsModule to an application running within microfrontend architecture (created with module federation) the content of application initially gets duplicated instead of redirecting to a different url. Similar things happens to components like a datepicker - after changing between a couple of months, the days don't get removed and end up being piled up on top of each another ( picture enclosed below).

image

When removing the BrowserAnimationsModule these errors don't appear. When running as a standalone project - without the shell/host application these errors also don't appear. The issue was previously reported here: https://github.com/angular/angular/issues/38968 but was closed as the issue was allegedly resolved in version13, however I have tested it both for version 13 and 14 without success.

I have tried adding angular animations as an eager singleton to webpack.config of shell and microfrontend application like so : "@angular/platform-browser/animations": { singleton: true, strictVersion: false, requiredVersion: 'auto', eager: true }, which was proposed here: https://stackoverflow.com/questions/67386392/angular-module-federation-browsermodule.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.3
Node: 16.15.1
Package Manager: npm 8.11.0
OS: win32 x64

Angular: 14.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.3
@angular-devkit/build-angular   14.2.3
@angular-devkit/core            14.2.3
@angular-devkit/schematics      14.2.3
@angular/cli                    14.2.3
@schematics/angular             14.2.3
ng-packagr                      14.2.1
rxjs                            6.6.7
typescript                      4.8.3
webpack                         5.74.0

Anything else?

No response

Created at 1 week ago
issue comment
Adding BrowserAnimationsModule to microfrontend application causes content duplication.

Module Federation is not something that Angular provides out-of-the-box, so I'm afraid this is more of a support request than a bug report, and therefore more suitable for StackOverflow.

If you have additional pointers that this is a bug in Angular, please open a new issue with a minimal reproduction, as without a repro we won't be able to investigate.

Created at 1 week ago
issue comment
[14.2 backport] perf(compiler-cli): cache source file for reporting type-checking dia…

merge-assistance: this is a patch backport — no presubmit needed and has already been approved in #47471.

Created at 1 week ago

perf(compiler-cli): cache source file for reporting type-checking diagnostics

When reporting type-checking diagnostics in external templates we create a ts.SourceFile of the template text, as this is needed to report Angular template diagnostics using TypeScript's diagnostics infrastructure. Each reported diagnostic would create its own ts.SourceFile, resulting in repeatedly parsing of the template text and potentially high memory usage if the template is large and there are many diagnostics reported. This commit caches the parsed template in the template mapping, such that all reported diagnostics get to reuse the same ts.SourceFile.

Closes #47470

Created at 1 week ago
pull request opened
[14.2 backport] perf(compiler-cli): cache source file for reporting type-checking dia…

…gnostics

When reporting type-checking diagnostics in external templates we create a ts.SourceFile of the template text, as this is needed to report Angular template diagnostics using TypeScript's diagnostics infrastructure. Each reported diagnostic would create its own ts.SourceFile, resulting in repeatedly parsing of the template text and potentially high memory usage if the template is large and there are many diagnostics reported. This commit caches the parsed template in the template mapping, such that all reported diagnostics get to reuse the same ts.SourceFile.

Closes #47470


Backport of #47471

Created at 1 week ago
create branch
JoostK create branch ngtsc/ttc/cache-template-sf-142
Created at 1 week ago
issue comment
Missing changelog for 15.0.0-next.2

Refactor commits are always excluded from the generated changelog.

Created at 1 week ago