Angular Konfigurationsprobleme

[thor_norsk]

Guten Morgen,

ich habe mir ein neues Projekt angelegt, aber unter app wird app.modul.ts nicht erstellt, bzw angezeigt.

ich bedanke mich im Voraus.

 

[M.L.]

Wie sieht der Befehl zum Anlegen der Angular-Applikation aus ? Bzw. finden sich dort Parameter wie (z.B.) "--no-standalone" oder "--skip-module" ?

 

[thor_norsk]

ng new test-app

ich vermute ich muss irgendwie --no-standalone integrieren oder?

 

[thor_norsk]

Vielen Dank, habe den Fehler gefunden

 

[KonradN]

Was für ein Fehler hattest Du? Denn bei dem Aufruf wird das eigentlich generiert.

Es kommen noch Abfragen nach Routing und Stylesheet Format aber die app.module.ts wird generiert:
CREATE test-app/src/app/app.module.ts (314 bytes)

 

[thor_norsk]

Ich habe 2 Projekte gekauft und arbeite die ab. 1 x mit Java + Angular (Full Stack) und 1 x Angular / Node
In beiden Fällen haben in dem app die Module gefällt . Ich hatte bei der Projekterstellung --no-standalone nicht berücksichtigt.
Jetzt sind die Module erstellt und kann weiter machen, bis nächstes Problem auftaucht.
Danke

 

[thecain]

Warum willst du die Module? Für neue Projekte macht es eigtl nicht viel Sinn noch auf Module zu setzen. Standalone ist der neue Standard

 

[thor_norsk]

Keine Ahnung, ich möchte einfach den Kurs umsetzen und die Zusammenhänge verstehen. Ich habe TypeScript gelernt weil notwendig ist für Angular. Eigentlich bin ich dabei mit der Backend Entwicklung , und möchte auch verstehen an Hand der Projekte wie Full Stack funktioniert.
Also: Ich werde eine E-Commerce Anwendung umsetzen und vieles mehr.

 

[thor_norsk]

Manchmal sollte man vielleicht zuhören was der Dozent erzählt und später die Frage mit Warum wird von alleine sich verabschieden.

 

[thor_norsk]

Guten Tag, ich möchte nochmal Herr T mitteilen, dass Angular für mich neue ist und ich keine schlechte Absichten hatte Zweck: Warum ich die Module auswähle! Der Dozent hat erwählt, er wird später darauf eingehen.
Ich wünsche euch schönes Wochenende.

 

[M.L.]

Module auswähle

Gemeint war wohl eher das sich der Einsatz von Modulen erst ab einer gewissen Komplexität (effektiv) lohnt: Entwickler Spezial "Angular", siehe Artikel "Software Design Patterns in Angular"

 

[thecain]

Nein, das war nicht gemeint. Seit Angular 17 werden Module nicht mehr empfohlen, auch nicht für komplexere Applikationen.
Deswegen generiert die CLI Standardmässig auch Standalone...

Entwickelt sich im moment alles sehr schnell im Angular Umfeld... Standalone, Signals, Zoneless

 

[thor_norsk]

Super Danke. Mein Kurs beinhaltet Angular 11 inkl. CLI. Ich habe Alles installiert und funktioniert. Für mich ist wichtig erst Mal Alles zu verstehen, später kann ich mich auch mit Angular 17.x ,.. beschäftigen, falls bedarf besteht.

 

[M.L.]

Mittlerweile steht Angular 18 am Start: https://entwickler.de/angular/angular-18-features

 

[thor_norsk]

Angular ist von JavaFx abgeguckt🤣

 

[thor_norsk]

Guten Tag,
kann ich eine Anwendung, die ich mit Angular & Bootstrap programmiert habe, bei einem Webhoster ablegen ? Bzw. kann man die bei AWS ablegen samt Domäne?

 

[KonradN]

Guten Tag,
kann ich eine Anwendung, die ich mit Angular & Bootstrap programmiert habe, bei einem Webhoster ablegen ? Bzw. kann man die bei AWS ablegen samt Domäne?

Ja klar. Die Angular Anwendung ist ja nur ein Set aus html, css und js. Wenn Du die Angular App baust, dann ist das fertige Ergebnis unterhalb des dist Ordners mit paar Dateien wie

• index.html
• main-....js
• styles-......js
• ...

Das sind die Dateien, die Du brauchst und diese Dateien kannst Du somit z.B. auch mit Spring Boot oder so weitergeben (so habe ich den Ort so umgesetzt, dass diese Dateien direkt im src/main/resources/public/ meiner Spring Boot Anwendung gelandet sind und dass beim maven build auch npm install und ng build aufgerufen wurden).

Es ist also egal, mit welchem Webserver Du dies an den Client gibst.

 

[thor_norsk]

Vielen Dank! Spring Boot bin ich noch am lernen, aber muss ich sagen ist sehr Anspruchsvoll (für mich) .
Ich melde mich wenn ich fertig bin. Ich denke paar Wochen noch bin ich mit Angular App fertig, weil ich noch mit Spring Boot am kämpfen bin.

 

[thor_norsk]

Guten Morgen,
ich kann Node auf meinen Linux Rechner (Debian) nicht installieren.
Ich habe als User und als Root die Installation durchgeführt. Ich bin wie unten beschrieben vor gegangen:
cd hotel-app // mein Projekt Ordner
app-hotel/ npm i angular-in-memory-web-api // hat nicht geklappt
Versuch 2: npm install angular-in-memory-web-api // Ich benötige Node als Server, um auf Mock-Dateien zu verzichten.

Fehlermeldung:
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: hotel-app@0.0.0
npm error Found: @angular/common@17.3.11
npm error node_modules/@angular/common
npm error @angular/common@"^17.3.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer @angular/common@"^18.0.0" from angular-in-memory-web-api@0.18.0
npm error node_modules/angular-in-memory-web-api
npm error angular-in-memory-web-api@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/x/.npm/_logs/2024-06-11T00_21_54_370Z-eresolve-report.txt

npm error A complete log of this run can be found in: /home/x/.npm/_logs/2024-06-11T00_21_54_370Z-debug-0.log

Wenn ich richtig verstanden habe, muss man die Installation immer in Projekt-Ordner durchführen wegen Dependencies ???

Ich bedanke mich Voraus.

 

[Oneixee5]

npm versucht die Libs herunterzuladen. Prüfe zuerst die Proxy-Einstellungen, wenn vorhanden. Dann steht da: "Could not resolve dependency" und weitere Optionen, welche du durchgehen kannst. Es wäre auch möglich, dass in den angeforderten Versionen Fehler oder Sicherheitslücken waren und du neuere verwenden musst, da diese nicht mehr verfügbar sind.

 

[thor_norsk]

Auf meinen Rechner installiert:
npm: 10.7.0
node: v20.14.0
Angular CLI: 17.3.8

 

[thor_norsk]

Endlich hat geklappt, und wurde angular-in-memory-web-api in dep..aufgenommen.
Ich werde meine Applikation zu ende schreiben und gucken ob funktioniert.
Wenn nicht melde mich wieder.
Danke!

 

[thor_norsk]

Hallo, jetzt habe ich ein neues Problem.
@angular/common ist vorhanden, aber @angular/common/http nicht , ich habe per Hand in package.json ergänzt aber hat nichts gebracht!
Auf der Seite von npm, steht auch nur @angular/common
Es wäre sehr nett, wenn jemand mir mit richtigem Befehl helfen könnte.
Danke.

 

[Oneixee5]

npm i @angular/common
bzw.
npm install @angular/common
oder
npm i @angular/common@17.3.8


Falls du ein fertiges Projekt von Git geklont hast, dann sollte es ausreichen, zu schreiben: npm install
Dann müssten alle Abhängigkeiten automatisch installiert werden.

 

[thor_norsk]

Alles war umsonst, muss Alles neue machen, keine Ahnung. Ich habe innerhalb meines Projekt-Ordner Angular auf 18.0.3 aktualisiert und im System steht noch 17.3.6. Jetzt gibt es wahrscheinlich Konflikt. 100 Sachen muss man installieren damit man den Code testen kann.
Ganze Zeit nur Ärger mit dem Konfiguration.

 

[thor_norsk]

mit der Konfiguration! 🤣

 

[Oneixee5]

Anfangs ist das alles nicht leicht. Lass dich nicht entmutigen und Versuche alles systematisch aufzubauen. Mit der Zeit kommt die Erfahrung und das Verständnis. Dran bleiben und viel darüber lesen, dann wird das schon werden.

 

[thor_norsk]

Danke!

 

[thor_norsk]

Ich habe kontrolliert und festgestellt, dass unter x/.../common http bei mir vorhanden ist.
Aber unter app.modules.ts habe ich paar Bibliotheken importiert und HttpClientModule ist durch gestrichen!

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookingsComponent } from './bookings/bookings.component';
import { CreateBookingComponent } from './create-booking/create-booking.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; // hiert ist durch gestrichen!!!
import { HttpClient } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

 

[Oneixee5]

Der Import unter @NgModule ist auch vorhanden?

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        HttpClientModule,
        ...
    ]
})

 

[thor_norsk]

@NgModule({
declarations: [
AppComponent,
BookingsComponent,
CreateBookingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService)
],
providers: [],
bootstrap: [AppComponent]
})

 

[thor_norsk]

Guten Tag,
ich werde Alles neue installieren. Ich hätte gerne gewusst, ob ich mit der Konfiguration paar Monaten arbeiten kann,
damit ich auch Angular lernen kann, ,anstatt zu konfigurieren🤣 ?

Angular CLI: 18.0.3
Node: 22.3.0
npm 10.8.1

 

[thor_norsk]

Guten Morgen,
ich habe alles auf neuster Stand gebracht, und die Fehlerquelle entdeckt, Angular war nicht global installiert.
Angular CLI: 18.0.4
Node: 22.3.0
Package Manager: npm 10.8.1
OS: linux x64

Was passiert eigentlich wenn später Angular 19.x gibt, ich denke meine Anwendung wird nicht funktionieren oder ?
Unter andere Programmiersprache kann ich in einer Datei wie zum Beispiel POM.XML die neue Version eintragen und aktualisieren.

ich bedanke mich im Voraus.

 

[M.L.]

Angular 19.x ...nicht funktionieren

Das dürfte eher weniger passieren (ist aber auch nicht auszuschliessen), erstmal könnten sich Angular 17/18 etablieren: https://javascript-days.de/blog/angular-18-alle-neuen-features/

 

[KonradN]

Unter andere Programmiersprache kann ich in einer Datei wie zum Beispiel POM.XML die neue Version eintragen und aktualisieren.

Also prinzipiell ist es hier auch nicht anders. Du könntest das package.json manuell anpassen. Nur eben ist das nach meinem Verständnis eher nicht der Normalfall. Zum einen hat man ja zur Verwaltung npm. Aber Angular geht noch einen Schritt weiter und bietet ja das ng Kommando.

Also als erstes könntest Du das cli von Angular aktualisieren: npm install -g @angular/cli@latest

Wenn Du dann Dein Projekt aktualisieren wolltest, dann wäre es etwas wie ng update @angular/core@19 @angular/cli@19
Das ist jetzt ein Befehl, der halt vieles vorgibt: Was soll aktualisiert werden? Und auf welche Version? (Falls also schon 20 da wäre, würdest Du bei Version 19 bleiben!) Evtl. willst Du nur ein ng update machen damit alle Abhängigkeiten geprüft und ggf. auf den letzten Stand gebracht werden ....

Es ist also relativ wichtig, dass man die Grundlagen etwas versteht: Was ist npm und wie arbeitet es? Was ist ng und was bietet es an Funktionalität?
Hier kann ich Dir also nur empfehlen, Dich etwas mehr mit den Dingen auseinander zu setzen, die Du nutzt. (Ich unterstelle Dir einfach einmal, dass Du bereits einige ng Aufrufe gemacht hast, sei es um etwas zu generieren, zu bauen oder auszuführen. Das wäre ein Moment, bei dem man sich das einmal etwas ansehen können ... Sprich als eine Art Minimum: ng help und dann ggf. mal zu einzelnen Befehlen die Hilfe also ng update --help und all sowas ... Oder einfach mal auf die Dokumentation: https://angular.dev/tools/cli )

Das deckt aber dann nur rein das Projekt ab bezüglich der package.json Datei. Ggf. musst Du noch deutlich mehr machen wie z.B. TypeScript aktualisieren (falls Du da nicht die aktuelle Version nutzt). Da kann dann aber https://update.angular.io/ helfen. Das würde Dir auch Hinweise zu Anpassungen zu einer Aktualisierung auf Angular 19 geben und auch erwähnen, was Du evtl. im Code anpassen willst oder so ...

Evtl. nutzt Du auch andere Tools. So gibt es neben npm auch andere Package Manager (z.B. yarn oder pnpm) und auch noch Build Systeme wie vite. Da passen die genannten Befehle ggf. nicht aber vom Prinzip her gelten da ähnliche Dinge nur die Befehle sehen dann evtl. etwas anders aus.

 

[thor_norsk]

Ich werde erst Mal programmieren und nach und nach kann ich dazu lernen.
Danke!

 

[thor_norsk]

Guten Tag,
ich hätte gerne gewusst, ob es richtig verstanden habe?

Frontend-Entwickler: HTML / CSS / JavaScript und besser wäre, Angular / React Bootstrap zu beherrschen?
Wenn ich richtig verstanden habe, sind Datenbank Kenntnisse nicht erforderlich, da díe Backend-Entwickler sich damit beschäftigen.
Man benutzt Mock-Daten zum testen als Frontend-Entwickler.
Also: Als Formel geschrieben wäre : X = HTML+CSS+JavaScript + Bootstrap --> X + Angular (oder) X + React ?
Wenn ich richtig verstanden habe, sind Angular und React Konkurrenten ???

Backend-Entwickler: Java / Spring-Boot / SQL / Dev-Tools /Rest ... weiß ich Bescheid. Java ist meine Wahl, man kann auch natürlich Python oder PHP wählen und mit entsprechendem Framework.

 

[M.L.]

Angular / React Bootstrap zu beherrschen

"Beherrschen" ist bei Frameworks mit höherer Änderungsrate (also wie man von der Idee zur Browserdarstellung kommt) wohl eher ein hoher Anspruch... Bei Angular ( FW für FullStack) hängen die Änderungen / Vorgehensweisen / ... (s. Entwicklungen v. Angular 17+) von Google ab, bei React ( nur Frontend) von Facebook (neuer: Meta) und weiteren (populären) (Fremd-)Bibliotheken. Abseits gibt es noch Vue.JS, Svelte, Vanilla.JS,...

 

[thor_norsk]

Ich verstehe dich nicht richtig. Ich würde gerne nur Frontend betrachten. Nach meinen Recherchen, benötigt man als Frontend Entwickler : HTML+JavaScript+CSS +BootStrap
Angular und React sind Moderne Frameworks für Frontend Entwicklung die TypeScript als Sprache benötigen ?

 

[KonradN]

Also nur einmal um da evtl. etwas beim Verständnis zu helfen:

HTML, CSS und JavaScript sind die Basis. Das ist nun einmal, was die Browser können: HTML mit CSS rendern und JavaScript ist die Scriptsprache der Browser.

Da gab es dann schnell diverse Libraries. Zum einen sollten die Browser Funktionalitäten einheitlich benutzt werden können und zum anderen wollte man sich das Leben einfacher machen. So gab es dann Libraries wie JQuery, die Zugriffe auf den DOM Tree vereinfacht haben.

Frameworks wie Angular oder React setzen darauf auf. Hier geht es dann vor allem darum, dass man seine Anwendung strukturiert haben möchte. Man hat dann z.B. Komponenten, ein Routing, ....

TypeScript ist einfach eine voll typisierte Sprache, die zu JavaScript übersetzt wird. Das ist durchaus verbreitet, aber kein Zwang.

Das einfach nur als wirklich grober Überblick. Was man als "Frontend Entwickler" braucht ist nicht festgelegt. Wenn man sich die Projektlandschaft anschaut, dann findet man sehr viel Angular und React. Aber es gibt da natürlich auch noch viele andere Möglichkeiten wie in #38 etwas aufgeführt wurde. Und es muss nicht zwingend direkt auf HTML / CSS / JS basieren. Wenn man sich Webassembly anschaut, dann gibt es noch einige Möglichkeiten mehr. (Im dotnet Umfeld findet sich da z.B. einiges.)

Ich verstehe es so, dass Du auch Frontends machen können willst, also sozusagen ein Full Stack Entwickler sein willst. Da wäre mein Tipp: Such Dir ein Framework aus. Egal ob Angular, React, Vue, Svelte, ... Und dann fängst Du an, Dich da einzuarbeiten. Also nimm Dir ein Buch und fang an. Lern erste Konzepte kennen. Und dann mach etwas. Du hast da dann genug Herausforderungen, denn Du willst ja auch bestimmt sowas wie ein Login haben und so ... Aber da kommst Du dann nach und nach immer tiefer in die Materie, wenn Du ein paar Projekte gemacht hast...

 

[M.L.]

benötigt

Bei der Veränderungsgeschwindigkeit (und aufkommenden Anforderungen) i.Z. mit React könnte man hier reinschauen: Entwickler Magazin 3/2024 - "Neues in React"

 

[thor_norsk]

Vielen Dank! Ganz ehrlich möchte heraus finden , ob Frontend oder Backend mir am besten Spaß macht und vor Allem, wofür ich besser geeignet bin! ( Es macht für mich am besten Sinn, dort auf zu bauen, wo ich gut bin ) Was mir bei Fronend gefällt, ich sehe die Resultate im Browser.
( Bei Backend nehme ich Postman )
(1)HTML/JavaScript/CSS/Bootstrap Kenntnisse sind vorhanden, aber ich muss die jetzt vertiefen. Noch eine Woche bin ich mit TypeScript fertig und werde mit (1) intensiv weiter machen.
Wenn ich euch richtig verstanden habe HTML/JavaScript/CSS/Bootstrap/TypeScript ( am besten 100% verstehen🤣) und mit Angular und React verfeinern?

 

[thor_norsk]

Also nur einmal um da evtl. etwas beim Verständnis zu helfen:

HTML, CSS und JavaScript sind die Basis. Das ist nun einmal, was die Browser können: HTML mit CSS rendern und JavaScript ist die Scriptsprache der Browser.

Da gab es dann schnell diverse Libraries. Zum einen sollten die Browser Funktionalitäten einheitlich benutzt werden können und zum anderen wollte man sich das Leben einfacher machen. So gab es dann Libraries wie JQuery, die Zugriffe auf den DOM Tree vereinfacht haben.

Frameworks wie Angular oder React setzen darauf auf. Hier geht es dann vor allem darum, dass man seine Anwendung strukturiert haben möchte. Man hat dann z.B. Komponenten, ein Routing, ....

TypeScript ist einfach eine voll typisierte Sprache, die zu JavaScript übersetzt wird. Das ist durchaus verbreitet, aber kein Zwang.

Das einfach nur als wirklich grober Überblick. Was man als "Frontend Entwickler" braucht ist nicht festgelegt. Wenn man sich die Projektlandschaft anschaut, dann findet man sehr viel Angular und React. Aber es gibt da natürlich auch noch viele andere Möglichkeiten wie in #38 etwas aufgeführt wurde. Und es muss nicht zwingend direkt auf HTML / CSS / JS basieren. Wenn man sich Webassembly anschaut, dann gibt es noch einige Möglichkeiten mehr. (Im dotnet Umfeld findet sich da z.B. einiges.)

Ich verstehe es so, dass Du auch Frontends machen können willst, also sozusagen ein Full Stack Entwickler sein willst. Da wäre mein Tipp: Such Dir ein Framework aus. Egal ob Angular, React, Vue, Svelte, ... Und dann fängst Du an, Dich da einzuarbeiten. Also nimm Dir ein Buch und fang an. Lern erste Konzepte kennen. Und dann mach etwas. Du hast da dann genug Herausforderungen, denn Du willst ja auch bestimmt sowas wie ein Login haben und so ... Aber da kommst Du dann nach und nach immer tiefer in die Materie, wenn Du ein paar Projekte gemacht hast...

Danke