Update to ng19 and set standalone property for all components #683

johncrim · 2024-11-25T21:34:55Z

Fixes: #682

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/ngneat/spectator/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

Existing tests cover the case being fixed.

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[x] Other... Please describe:

Updates build dependencies to ng 19, which has a breaking change:

standalone components are now the default

What is the current behavior?

After upgrading to ng 19, any use of SpectatorHost, or any other root component that uses HostComponent results in this error:

Failed: Unexpected "HostComponent" found in the "declarations" array of the "TestBed.configureTestingModule" call, "HostComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?

Issue Number: #682

What is the new behavior?

The HostComponent is now marked with standalone: false. All the other changes were to make the build and tests work with ng 19.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

There are no breaking changes - I tested locally with hundreds of jest and karma tests, using both ng 18 and ng 19, and both worked as expected. No changes to tests required to fix the issue.

Other information

I also have a branch where I installed the latest version of yarn:
https://github.com/johncrim/spectator/tree/chore/ng19-update

I needed current yarn to use yarn dlx for ng update. This branch includes all the changes in that branch, minus the changes to upgrade yarn. Let me know if you want the yarn upgrade or not.

For ng < 19, we need to keep `standalone: true`. For ng >= 19, we need `standalone: false` on components, directives, and pipes.

```ts const mock: any = { ...template } || {}; ``` causes a compiler error.

stackblitz · 2024-11-25T21:34:58Z

Run & review this pull request in StackBlitz Codeflow.

johncrim · 2024-11-25T22:00:12Z

There's an issue with these changes, in that the Jest Matchers aren't working. I'm investigating.

But otherwise this works as expected in our test projects.

projects/spectator/jest/test/defer-block.spec.ts

projects/spectator/src/lib/mock.ts

Matchers were broken by typescript upgrade: As of TypeScript 5.5, the compiler no longer emits triple-slash directives to the output files by default. However, there is a way to preserve these directives in specific cases: Use `preserve="true"` attribute in your triple-slash directive.

johncrim · 2024-11-26T01:29:02Z

I have fixed the broken matcher issue, and verified locally that these fixes run with our tests using ng19 and using ng18.

@NetanelBasal - please take a look when you have a moment.

NetanelBasal · 2024-11-26T06:03:06Z

@johncrim thanks. Are there any breaking changes?

NetanelBasal · 2024-11-26T06:04:36Z

CHANGELOG.md


+## v.Next


please revert, it should be updated automatically upon release

johncrim · 2024-11-26T16:41:08Z

Hi @NetanelBasal - I reverted the Changelog line.

There are no breaking changes* - I tested locally with hundreds of jest and karma tests, using both ng 18 and ng 19, and both worked as expected. No project changes needed for the upgrade. Asterisk explained next:

The one possible breaking change I noted is that the build output now only contains the /fesm2022 directory - it no longer includes the /esm2022 directory. This is apparently a result of changes in ng-packagr 19.

So the old dist package.json had:

  "exports": {
    "./package.json": {
      "default": "./package.json"
    },
    ".": {
      "types": "./index.d.ts",
      "esm2022": "./esm2022/ngneat-spectator.mjs",
      "esm": "./esm2022/ngneat-spectator.mjs",
      "default": "./fesm2022/ngneat-spectator.mjs"
    },
    "./internals": {
      "types": "./internals/index.d.ts",
      "esm2022": "./esm2022/internals/ngneat-spectator-internals.mjs",
      "esm": "./esm2022/internals/ngneat-spectator-internals.mjs",
      "default": "./fesm2022/ngneat-spectator-internals.mjs"
    },
    "./jest": {
      "types": "./jest/index.d.ts",
      "esm2022": "./esm2022/jest/ngneat-spectator-jest.mjs",
      "esm": "./esm2022/jest/ngneat-spectator-jest.mjs",
      "default": "./fesm2022/ngneat-spectator-jest.mjs"
    }
  },

and the new package.json has:

  "exports": {
    "./package.json": {
      "default": "./package.json"
    },
    ".": {
      "types": "./index.d.ts",
      "default": "./fesm2022/ngneat-spectator.mjs"
    },
    "./internals": {
      "types": "./internals/index.d.ts",
      "default": "./fesm2022/ngneat-spectator-internals.mjs"
    },
    "./jest": {
      "types": "./jest/index.d.ts",
      "default": "./fesm2022/ngneat-spectator-jest.mjs"
    }
  },

This is only a breaking change if a project has a hard-coded link to something in the /esm2022 folder, and doesn't use the standard ESM/package.json resolution mechanism to find the right reference.

No changes are required for normal projects, but this could require a change if someone has a build hack.

NetanelBasal · 2024-11-27T07:08:50Z

CHANGELOG.md


+* 🎸 Upgrade to Angular 19 ([7f3eb6c](https://github.com/ngneat/spectator/commit/7f3eb6c541fa9843a8e2f10ab8c77bca33a678c0))


please revert this file

OK - I thought that I was just supposed to revert the version header line, not all my Changelog edits.

As I recall, for my last contribution I added some Changelog documentation, so that's what I was doing here. I'll revert all my changes to the file then.

johncrim · 2024-11-27T16:38:13Z

@NetanelBasal - I believe this PR is ready to be merged when you have time.

wilson-webdev · 2024-11-27T16:42:25Z

@NetanelBasal - I believe this PR is ready to be merged when you have time.

I believe the changelog needs to be reverted first @johncrim

This reverts commit 515f484.

johncrim · 2024-11-27T18:54:14Z

Thanks @wilson-webdev - all changes to the Changelog file have been removed.

wilson-webdev · 2024-11-27T22:33:57Z

@NetanelBasal when will this be published on NPM?

NetanelBasal · 2024-11-28T06:45:05Z

Published

spiralx · 2024-11-28T11:08:31Z

Published

Seems you might have published (the previously unpublished) version 19.1.0 to NPM and not 19.1.1:

NetanelBasal · 2024-11-28T16:14:29Z

hmm, never mind, the code of both is there

mattlewis92 · 2024-11-28T21:59:55Z

hmm, never mind, the code of both is there

@NetanelBasal Sorry to bother, but I don't think the latest is published to npm, for example the || {} was removed in the angular 19 patch, and yet is still present on the latest published version on npm:
https://unpkg.com/browse/@ngneat/[email protected]/esm2022/jest/lib/mock.mjs

NetanelBasal · 2024-11-29T09:36:31Z

v19.1.2 should be good now

mattlewis92 · 2024-11-29T10:34:33Z

v19.1.2 should be good now

Thank you so much, the new release works great with v19! 🙌

johncrim added 5 commits November 25, 2024 13:22

chore(ng version): update dev dependencies to ng 19

7f3eb6c

chore(ng 19 migration): set standalone on every declarable

57adb46

For ng < 19, we need to keep `standalone: true`. For ng >= 19, we need `standalone: false` on components, directives, and pipes.

fix(build): spread expression is always truthy

48acc37

```ts const mock: any = { ...template } || {}; ``` causes a compiler error.

chore(ng 19 migration): set standalone on every declarable

eaebbf6

chore(schematics): commit schematic build output

24ae454

johncrim commented Nov 26, 2024

View reviewed changes

projects/spectator/jest/test/defer-block.spec.ts Show resolved Hide resolved

johncrim commented Nov 26, 2024

View reviewed changes

projects/spectator/src/lib/mock.ts Show resolved Hide resolved

johncrim added 3 commits November 25, 2024 16:46

docs(changelog): changelog entries for this PR

515f484

fix(formatting): format change caused by migration

bf51584

johncrim force-pushed the chore/ng19-update-wout-yarn branch from e5bded5 to 94721d8 Compare November 26, 2024 00:54

docs(changelog): add commit references

5914410

NetanelBasal reviewed Nov 26, 2024

View reviewed changes

NetanelBasal approved these changes Nov 26, 2024

View reviewed changes

docs(changelog): revert unnecessary line

4935921

johncrim changed the title ~~Chore/ng19 update wout yarn~~ Update to ng19 and set standalone property for all components Nov 26, 2024

NetanelBasal reviewed Nov 27, 2024

View reviewed changes

Revert "docs(changelog): changelog entries for this PR"

1983e84

This reverts commit 515f484.

NetanelBasal merged commit 7fe5d9b into ngneat:master Nov 27, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to ng19 and set standalone property for all components #683

Update to ng19 and set standalone property for all components #683

johncrim commented Nov 25, 2024 •

edited

Loading

stackblitz bot commented Nov 25, 2024

johncrim commented Nov 25, 2024

johncrim commented Nov 26, 2024

NetanelBasal commented Nov 26, 2024

NetanelBasal Nov 26, 2024

johncrim Nov 26, 2024

johncrim commented Nov 26, 2024 •

edited

Loading

NetanelBasal Nov 27, 2024

johncrim Nov 27, 2024 •

edited

Loading

johncrim commented Nov 27, 2024

wilson-webdev commented Nov 27, 2024

johncrim commented Nov 27, 2024

wilson-webdev commented Nov 27, 2024

NetanelBasal commented Nov 28, 2024

spiralx commented Nov 28, 2024

NetanelBasal commented Nov 28, 2024

mattlewis92 commented Nov 28, 2024

NetanelBasal commented Nov 29, 2024

mattlewis92 commented Nov 29, 2024


		* 🎸 Upgrade to Angular 19 ([7f3eb6c](https://github.com/ngneat/spectator/commit/7f3eb6c541fa9843a8e2f10ab8c77bca33a678c0))

Update to ng19 and set standalone property for all components #683

Update to ng19 and set standalone property for all components #683

Conversation

johncrim commented Nov 25, 2024 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

stackblitz bot commented Nov 25, 2024

johncrim commented Nov 25, 2024

johncrim commented Nov 26, 2024

NetanelBasal commented Nov 26, 2024

NetanelBasal Nov 26, 2024

Choose a reason for hiding this comment

johncrim Nov 26, 2024

Choose a reason for hiding this comment

johncrim commented Nov 26, 2024 • edited Loading

NetanelBasal Nov 27, 2024

Choose a reason for hiding this comment

johncrim Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

johncrim commented Nov 27, 2024

wilson-webdev commented Nov 27, 2024

johncrim commented Nov 27, 2024

wilson-webdev commented Nov 27, 2024

NetanelBasal commented Nov 28, 2024

spiralx commented Nov 28, 2024

NetanelBasal commented Nov 28, 2024

mattlewis92 commented Nov 28, 2024

NetanelBasal commented Nov 29, 2024

mattlewis92 commented Nov 29, 2024

johncrim commented Nov 25, 2024 •

edited

Loading

johncrim commented Nov 26, 2024 •

edited

Loading

johncrim Nov 27, 2024 •

edited

Loading