feat(angular): add Angular Renaissance & update Angular snippets #245

LcsGa · 2024-07-20T22:10:39Z

matschik · 2024-07-24T13:26:32Z

The build is failing, can you fix it ? As I said it's surely because of a change in frameworks.mjs

LcsGa · 2024-07-24T21:25:29Z

I can take another look at it tomorrow but I couldn't find what was the issue there

LcsGa · 2024-07-24T21:29:18Z

Well, I took a look at the code of the .mjs file but I really don't see what could break there... I'm not really familiar with this kind of config files too so I may be missing something but I can't figure out what 😅

ogix · 2024-10-23T13:45:56Z

content/3-lifecycle/1-on-mount/angular-renaissance/pagetitle.component.ts

+  template: `<p>Page title: {{ pageTitle }}</p>`,
+})
+export class PagetitleComponent implements OnInit {
+  pageTitle = "";


Any reason not to use signal here?

Not at all, probably just a fail from my massive copy pasting

ogix · 2024-10-23T13:48:36Z

content/4-component-composition/1-props/angular-renaissance/userprofile.component.ts

+    <p>I am {{ isAvailable() ? "available" : "not available" }}</p>
+  `,
+})
+export class UserprofileComponent {


p in Profile should be uppercase :) UserprofileComponent

I agree with you but my goal was to make the least changes as the current version with is also lowercase.
I guess it's not a big deal and I could indeed update it both here and in the older (current) version

The primary goal is to show Angular best practices, so if it musts be uppercase in the two cases, let's change both naming.

ogix · 2024-10-23T13:57:41Z

Can anyone tell what status of this PR is? Are there any issues?

LcsGa · 2024-10-24T10:54:44Z

The status of this PR remains unchanged. I still have the same issues that the ones above and didn't have the time (and probably the knowledge) to fix them.

If you have any ideas to resolve them, I'd be glad to try them

ogix · 2024-10-24T10:59:56Z

Ok, thanks. Maybe I will have a look if I find time for this.

BTW, Angular 19 is making components "standalone: true" by default, so we can remove later those flags.

matschik · 2024-10-24T11:02:51Z

@LcsGa You introduce a bug and I have to solve it ? That's a little unfair.
To make it fair, can you at least give me some steps to reproduce and error logs ?
I'll try to fix it afterwards.

LcsGa · 2024-10-24T11:14:55Z

@LcsGa You introduce a bug and I have to solve it ? That's a little unfair. To make it fair, can you at least give me some steps to reproduce and error logs ? I'll try to fix it afterwards.

I never told you that you had to solve it yourself.

I'm not familiar with the way of doing in the framework.mjs file...
I first simply tried to copy/paste + update the angular config into angular-renaissance.
Then I did what was written in the readme with the problem you told me it probably was but none of it worked and I'm running out of ideas...

I don't clearly remember how to reproduce it righ now + I changed my computer but I will soon clone it once more, retry, and give more informations if :

I still cand find any fix myself
I have more to provide

The most that I remember at the moment is that I simply tried to build the projects with the provided commands but it failed right away

matschik · 2024-10-24T12:14:38Z

Can you give the error logs to begin the investigation ?

LcsGa · 2024-10-25T07:23:01Z

I didn't have the opportunity to retry yet but the error I faced was:

pnpm run dev

> component-party.dev@2.0.0 dev /home/lucas/dev/component-party.dev
> vite

[generateFrameworkContent] Generating framework content files...
TypeError: Cannot read properties of undefined (reading 'push')
    at file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2843:40
    at async Promise.all (index 4)
    at async generateContent (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2831:7)
    at async build (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2981:7)
    at async PluginContext.buildStart (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2997:9)
    at async Promise.all (index 6)
    at async PluginContainer.hookParallel (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49481:5)
    at async PluginContainer.buildStart (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49484:5)
    at async file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:63425:7
    at async httpServer.listen (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:63440:9)
error when starting dev server:
TypeError: Cannot read properties of undefined (reading 'push')
    at file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2843:40
    at async Promise.all (index 4)
    at async generateContent (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2831:7)
    at async build (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2981:7)
    at async PluginContext.buildStart (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2997:9)
    at async Promise.all (index 6)
    at async PluginContainer.hookParallel (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49481:5)
    at async PluginContainer.buildStart (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49484:5)
    at async file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:63425:7
    at async httpServer.listen (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:63440:9)
 ELIFECYCLE  Command failed with exit code 1.

…ssance) practices

matschik · 2024-10-25T16:31:28Z

@LcsGa I found the problem. In frameworks.mjs, you declared Angular Renaissance framework with id "angularRenaissance". But in content directory, you used "angular-renaissance" instead of the id "angularRenaissance".

See "emberOctane" for example

matschik · 2024-10-25T16:46:08Z

@LcsGa Why did you declare in Angular examples "AppModule" with "@NgModule" and not in Angular Renaissance ? I think it's not necessary since it's just to learn about the syntax.

Let's make it @LcsGa ! Your branch is working now :)
Can you apply previously suggested modifications by @ogix ?

hakimio · 2024-10-25T17:36:54Z

content/1-reactivity/1-declare-state/angular/name.component.ts

+  declarations: [NameComponent],
+  exports: [NameComponent],
+})
+export class NameModule {}


Just use standalone: true in all components and get rid of the @NgModule. They are no longer needed.
In Angular v19 standalone: true will be the default.

hakimio · 2024-10-25T17:39:23Z

content/2-templating/5-dom-ref/angularRenaissance/inputfocused.component.ts

+export class InputfocusedComponent implements OnInit {
+  inputRef = viewChild.required<ElementRef<HTMLInputElement>>("inputRef");
+
+  ngOnInit() {


Might be a good idea to replace with an effect().

hakimio · 2024-10-25T17:45:38Z

content/3-lifecycle/2-on-unmount/angularRenaissance/time.component.ts

+export class TimeComponent implements OnDestroy {
+  time = signal(new Date().toLocaleTimeString());
+
+  timer = setInterval(


Just use rxjs + toSignal() and get rid of ngOnDestroy:

time$ = timer(0, 1e3) .pipe( map(() => new Date().toLocaleTimeString()) ); time = toSignal(this.time$);

hakimio · 2024-10-25T17:47:42Z

content/4-component-composition/5-context/angular/user.service.ts

+  };
+
+  updateUsername(username: string) {
+    this.user.username = username;


Immutability 😉

hakimio · 2024-10-25T17:48:41Z

content/6-form-input/1-input-text/angularRenaissance/input-hello.component.ts

+  imports: [FormsModule],
+  selector: "app-input-hello",
+  template: `
+    <p>{{ text }}</p>


Should be {{ text() }} with parenthesis since it's signal.

hakimio · 2024-10-25T17:49:19Z

content/6-form-input/3-radio/angularRenaissance/pick-pill.component.ts

+  imports: [FormsModule],
+  selector: "app-pick-pill",
+  template: `
+    <div>Picked: {{ picked }}</div>


hakimio · 2024-10-25T17:50:34Z

content/7-webapp-features/1-render-app/angular/main.ts

+import { AppModule } from "./app.module";
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)


No more modules.

bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err));

LcsGa · 2024-10-25T18:30:52Z

@LcsGa I found the problem. In frameworks.mjs, you declared Angular Renaissance framework with id "angularRenaissance". But in content directory, you used "angular-renaissance" instead of the id "angularRenaissance".

See "emberOctane" for example

Oh my... I really didn't notice that... The most time consuming bugs are always the most stupid ones I guess...

LcsGa · 2024-10-25T18:36:54Z

@LcsGa Why did you declare in Angular examples "AppModule" with "@NgModule" and not in Angular Renaissance ? I think it's not necessary since it's just to learn about the syntax.

Let's make it @LcsGa ! Your branch is working now :)
Can you apply previously suggested modifications by @ogix ?

I added the modules on purpose! Before angular v14 that was mandatory to create components.
If I wanted to highlight how it improved and truly compare the two of them, I had to add them in v13-
In angular renaissance, you simply have the standalone property in the @Component and it will even be true by default in one month!

Yeah sure! I can do that tomorrow morning I think! 😁

LcsGa closed this Jul 20, 2024

LcsGa reopened this Jul 20, 2024

LcsGa marked this pull request as draft July 20, 2024 22:12

LcsGa force-pushed the feature/angular-renaissance branch 3 times, most recently from 9d57e98 to e4f2c7e Compare July 22, 2024 07:08

matschik mentioned this pull request Jul 28, 2024

Convert Angular components to use standalone api-s #127

Open

ogix reviewed Oct 23, 2024

View reviewed changes

LcsGa marked this pull request as ready for review October 24, 2024 10:52

lgarcia and others added 3 commits October 25, 2024 18:11

feat(angular): update the existing files + add the new angular (renai…

10de50c

…ssance) practices

refactor(angular): remove deprecated routing examples

a76abdd

docs: update readme frameworks progress

b277cc5

matschik force-pushed the feature/angular-renaissance branch from e4f2c7e to b277cc5 Compare October 25, 2024 16:16

fix(angularRenaissance): fix folder name using right framework id

d07f534

matschik self-assigned this Oct 25, 2024

hakimio suggested changes Oct 25, 2024

View reviewed changes

matschik marked this pull request as draft October 25, 2024 17:57

matschik changed the title ~~feat(angular): update the existing files + add the new angular (renaissance) practices~~ feat(angular): add Angular Renaissance & update Angular snippets Oct 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(angular): add Angular Renaissance & update Angular snippets #245

feat(angular): add Angular Renaissance & update Angular snippets #245

LcsGa commented Jul 20, 2024

matschik commented Jul 24, 2024

LcsGa commented Jul 24, 2024

LcsGa commented Jul 24, 2024

ogix Oct 23, 2024

LcsGa Oct 24, 2024

ogix Oct 23, 2024

LcsGa Oct 24, 2024

matschik Oct 24, 2024

ogix commented Oct 23, 2024

LcsGa commented Oct 24, 2024

ogix commented Oct 24, 2024

matschik commented Oct 24, 2024

LcsGa commented Oct 24, 2024

matschik commented Oct 24, 2024 •

edited

Loading

LcsGa commented Oct 25, 2024

matschik commented Oct 25, 2024 •

edited

Loading

matschik commented Oct 25, 2024 •

edited

Loading

hakimio Oct 25, 2024

hakimio Oct 25, 2024

hakimio Oct 25, 2024

hakimio Oct 25, 2024

hakimio Oct 25, 2024

hakimio Oct 25, 2024

hakimio Oct 25, 2024

LcsGa commented Oct 25, 2024

LcsGa commented Oct 25, 2024

feat(angular): add Angular Renaissance & update Angular snippets #245

Are you sure you want to change the base?

feat(angular): add Angular Renaissance & update Angular snippets #245

Conversation

LcsGa commented Jul 20, 2024

matschik commented Jul 24, 2024

LcsGa commented Jul 24, 2024

LcsGa commented Jul 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ogix commented Oct 23, 2024

LcsGa commented Oct 24, 2024

ogix commented Oct 24, 2024

matschik commented Oct 24, 2024

LcsGa commented Oct 24, 2024

matschik commented Oct 24, 2024 • edited Loading

LcsGa commented Oct 25, 2024

matschik commented Oct 25, 2024 • edited Loading

matschik commented Oct 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LcsGa commented Oct 25, 2024

LcsGa commented Oct 25, 2024

matschik commented Oct 24, 2024 •

edited

Loading

matschik commented Oct 25, 2024 •

edited

Loading

matschik commented Oct 25, 2024 •

edited

Loading