Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

makeStateKey deprecation causes builder.io not to build in an Angular 18 project #3304

Closed
jakehockey10 opened this issue May 25, 2024 · 10 comments · Fixed by #3410
Closed

makeStateKey deprecation causes builder.io not to build in an Angular 18 project #3304

jakehockey10 opened this issue May 25, 2024 · 10 comments · Fixed by #3410

Comments

@jakehockey10
Copy link

Describe the bug
A clear and concise description of what the bug is.

It seems that the makeStateKey function is no longer exported from @angular/platform-browser, but instead is importable from @angular/core in the directive builder-content.directive.ts. If you manually change the import from @angular/platform-browser to @angular/core in your local project's node_modules/@builder.io/angular/fesm2020/builder.io-angular.mjs, the project can build again.

To Reproduce
Steps to reproduce the behavior:

  1. Upgrade project to Angular 18
  2. Attempt to build project with ng build
@jakehockey10 jakehockey10 changed the title makeStateKey deprecation causes builder.io not to builder in an Angular 18 project makeStateKey deprecation causes builder.io not to build in an Angular 18 project May 25, 2024
@samijaber
Copy link
Contributor

Thanks for raising this issue.

Worth noting that we are actively working on our Gen2 Angular SDK which will be fully compatible with the latest versions of Angular (17+). It will be launching in beta in the near future.

@paprikaf paprikaf pinned this issue May 30, 2024
@jakehockey10
Copy link
Author

That's awesome! Can you point me to anything public that I can keep tabs on to prevent opening unnecessary issues in the future? I apologize for wasting anyone's time

@DzmVasileusky
Copy link

@samijaber

Are you going to add an Angular 18 support for Gen1?
We are using it in production and just switching to Gen2 beta doesn't seem something safe since it is still beta.

@samijaber
Copy link
Contributor

@jakehockey10 One easy way is to watch out for Angular gen2 SDK releases here: https://github.com/BuilderIO/builder/releases?q=sdk-angular&expanded=true

it is currently at 0.0.x, but you will see a clear announcement once it is in Beta (and subsequently in v1).

@DzmVasileusky Correct, Gen2 is still in the early stages and cannot currently replace gen1.
We've made a note that some folks still need Gen1 to support angular 18, and will let you know here when there is an update on this.

@DzmVasileusky
Copy link

@samijaber Thank you, It would be great to have full Gen1 support until Gen2 stable release.

@neilsoult
Copy link
Contributor

would you be willing to accept a pull request for this? We'd love to be able to unblock our team from upgrading to angular 18, and changing import paths seems like it should be a trivial change

@samijaber samijaber mentioned this issue Jul 31, 2024
Merged
samijaber added a commit that referenced this issue Aug 2, 2024
@neilsoult @samijaber
Issue #3304 - fix imports for Angular 18 support (#3410)
dcaf364 
## Description
This pull request introduces significant updates to the Angular package,
primarily focusing on configuration changes and updates to the
server-side rendering (SSR) setup. The most notable changes include the
modification of the Angular build configuration, updating package
dependencies, refactoring the server setup for SSR, and removing the
server configuration from `angular.json`.

Angular Build Configuration Changes:

*
[`packages/angular/angular.json`](diffhunk://#diff-1ee87275f6f17e71d006ac3c195d835eb695acdbb2a42184cdfedb4e94b3a035L12-R35):
The Angular build configuration underwent several changes. The builder
was changed from `browser` to `application` and the output path was
updated. The `main.ts` file was moved under a new `browser` key, and
`main.server.ts` was introduced under a `server` key. The `prerender`
and `ssr` options were added. References to `browserTarget` were
replaced with `buildTarget`. The `server` configuration was removed from
the `architect` section. The `defaultProject` key was also removed.
[[1]](diffhunk://#diff-1ee87275f6f17e71d006ac3c195d835eb695acdbb2a42184cdfedb4e94b3a035L12-R35)
[[2]](diffhunk://#diff-1ee87275f6f17e71d006ac3c195d835eb695acdbb2a42184cdfedb4e94b3a035L31-L32)
[[3]](diffhunk://#diff-1ee87275f6f17e71d006ac3c195d835eb695acdbb2a42184cdfedb4e94b3a035L45-R68)
[[4]](diffhunk://#diff-1ee87275f6f17e71d006ac3c195d835eb695acdbb2a42184cdfedb4e94b3a035L77-L95)
[[5]](diffhunk://#diff-1ee87275f6f17e71d006ac3c195d835eb695acdbb2a42184cdfedb4e94b3a035L121)

Package Dependency Updates:

*
[`packages/angular/package.json`](diffhunk://#diff-d08139eef05218816a5597154199c170727c5bcd22546a9e6367735e6b223fb0L3-R3):
Several dependencies were updated, including the version of the package
itself. The `build:ssr` and `serve:ssr` scripts were removed, and a new
`serve:ssr:angular` script was added. The optional dependency
`@nguniversal/express-engine` was removed, and new dependencies
`@angular/ssr` and `express` were added. The Angular and related
dependencies were updated to newer versions.
[[1]](diffhunk://#diff-d08139eef05218816a5597154199c170727c5bcd22546a9e6367735e6b223fb0L3-R3)
[[2]](diffhunk://#diff-d08139eef05218816a5597154199c170727c5bcd22546a9e6367735e6b223fb0L35-R64)
[[3]](diffhunk://#diff-d08139eef05218816a5597154199c170727c5bcd22546a9e6367735e6b223fb0L88-R84)

Server Setup Refactoring:

*
[`packages/angular/server.ts`](diffhunk://#diff-a65a56eda93665517f48b23e8f7310080662944a77f1189df51b6bc15a203fdaL1-R57):
The server setup was significantly refactored. The server is now
exported as a function, and the setup for the Angular Universal engine
was replaced with the Angular SSR `CommonEngine`. The server now serves
static files from the `/browser` directory and uses the `CommonEngine`
to render all other routes.
*
[`packages/angular/server.ts.bak`](diffhunk://#diff-0a9fdf39b301b6b64938b4a184dee66f846f6e3e8555ea533039624b09386453R1-R46):
A backup of the previous server setup was created.

Removal of Server Configuration:

*
[`packages/angular/src/tsconfig.server.json`](diffhunk://#diff-a9ca338ccbd24f7680da834b32675f3a0957181bc0308601ee1266c5d0cf60f9L1-L17):
The server-specific TypeScript configuration file was removed,
indicating a shift in the server setup strategy.

Other Changes:

*
[`packages/angular/src/app/modules/builder/builder.module.ts`](diffhunk://#diff-c4efc81598ba1e92430c459df1cf459ff32dd18b01f648301156b7d2dfb4ae89L31):
The `entryComponents` key was removed from the `NgModule` decorator.
*
[`packages/angular/src/app/modules/builder/directives/builder-content.directive.ts`](diffhunk://#diff-79823b41f6d70d75e76b19cfd2e7e0eef9fce901696b8677d48a42b7f96eb800L5-R20):
Imports were reordered and the `NavigationStart` import was removed.
*
[`packages/angular/src/app/modules/builder/services/builder.service.ts`](diffhunk://#diff-98b120718cf30d70a536d9e705b6132add19ca4fc97c0b5cde779aba89cfa6b8L2-R2):
The import path for `RESPONSE` and `REQUEST` was updated.
*
[`packages/angular/src/express.tokens.ts`](diffhunk://#diff-c0a440a7fd016537067b8b7183ce80f39907bcf041581d3f7410b35f48f505a1R1-R6):
New tokens `REQUEST` and `RESPONSE` were created for Express.
*
[`packages/angular/src/test.ts`](diffhunk://#diff-a9c843cc82bad8248d5b1d765451d1f5d0ea818a0f653a96f02ed011bfefe059L10-L17):
The code for finding and loading test modules was removed.
*
[`packages/angular/src/tsconfig.app.json`](diffhunk://#diff-f58b31d793f5652be8385d471f7d18d90fc44b5e0f6eb4268dd6cf6929df4a6cL9-R17):
The `files` array was updated to include `./main.server.ts`,
`../server.ts`, and `server.ts`.
*
[`packages/angular/tsconfig.json`](diffhunk://#diff-9270ae339d33a9f7d4c6c1350ec2eedc2fdc7309b7bc591df1c598bba2cde018L4-R24):
The `downlevelIteration` option was removed, `esModuleInterop` and
`useDefineForClassFields` were added, and the `target` was changed to
`ES2022`.


Closes #3304

---------

Co-authored-by: Sami Jaber <jabersami@gmail.com>
@samijaber
Copy link
Contributor

Fixed in v4.0.0 https://github.com/BuilderIO/builder/blob/main/packages/angular/CHANGELOG.md#400

@nidaxnido
Copy link

I have the same issue on @builder.io/angular. I updated using npm and the latest version is 3.0.2. Is there any way to upgrade to version 4?

@samijaber
Copy link
Contributor

@nidaxnido That was a publishing error on our part. Sorry about that.

You can upgrade by specifically installing npm install @builder.io/angular@4.0.0.

@samijaber
Copy link
Contributor

@nidaxnido we just fixed the tags: 4.0.0 is back to being the correct latest https://www.npmjs.com/package/@builder.io/angular?activeTab=versions

Thank you for pointing out the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Issue #3304 - fix imports for Angular 18 support neilsoult/builder
5 participants
@samijaber @jakehockey10 @neilsoult @DzmVasileusky @nidaxnido