Angular app tutorial Hilfe?

Ich habe versucht das Tutorial von Angular zu machen aber irgendwie verstehe ich nicht genau was ich machen soll.

Bild zum Beitrag

Ich habe die Datei erfolgreich runtergeladen. VSC und node.js hatte ich zuvor schon. Dann habe ich die Datei extrahiert und in VSC geöffnet. Im Terminal in VSC habe ich dann die Befehle eingegeben und habe nur Fehler erhalten. Sowohl npm install geht nicht und gibt mir ne Reihe an Fehlern ("... npm not being able to find a file.") aber auch ng serve geht nicht ("command not availble when running the Angular CLI outside a workspace.")

Bild zum Beitrag

Im tutorial steht auch dass ich zu dem "first-app directory" gehen soll aber ich weiß nicht was damit gemeint ist. In der extrahierten Datei finde ich es jedenfalls nicht.

Wenn jemand weiß, was zu tun ist, würde ich mich über eine Antwort freuen. Leider habe ich kein Tutorial über das Tutorial gefunden (Ja, klingt dumm ich weiß).

Hier ist der Link zum Tutorial: https://angular.dev/tutorials/first-app/01-hello-world

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

HoiZusammen

02.09.2024, 18:12

Also: Node.js und VSC sind installiert, richtig?

Wenn ja:

1) Öffne VSC

2) Öffne einen neuen Terminal

3) schreibe im Terminal: npm install -g @angular/cli

4) schreibe im Terminal: ng new my-first-app

HoiZusammen

01.10.2024, 17:36

danke :)

Ähnliche Beiträge

Angular Deferrable Views?

import {Component} from '@angular/core';
import {CommentsComponent} from './comments.component';

@Component({
 selector: 'app-root',
 template: `
  <div>
   <h1>How I feel about Angular</h1>
   <article>
    <p>
     Angular is my favorite framework, and this is why. Angular has the coolest deferrable view
     feature that makes defer loading content the easiest and 
    </p>
     
   </article>

   @defer (on viewport) {
   <comments />
   } @placeholder {
   <p>Future comments</p>
   } @loading (minimum 5s) {
   <p>Loading comments...</p>
   }
  </div>
 `,
 standalone: true,
 imports: [CommentsComponent],
})
export class AppComponent {}




import {Component} from '@angular/core';

@Component({
 selector: 'comments',
 template: `
  <ul>
   <li>Building for the web is fantastic!</li>
   <li>The new template syntax is great</li>
   <li>I agree with the other comments!</li>
  </ul>
 `,
 standalone: true,
})
export class CommentsComponent {}

Soweit ist der Code verständlich, aber dieses @placeholder {

<p>Future comments</p>

}

Wird bei mir nicht angezeigt, wenn ich den Code ausführe ... Warum???

https://angular.dev/tutorials/learn-angular/10-deferrable-views

...zum Beitrag

Node JS / Npm Fehlermeldung?

Ich wollte Robot JS installieren mit Windows (Unter Linux klappt alles super )

jedoch tritt diese Fehlermeldung auf und ich habe schon viel versucht.

Nichts hilft. https://pastebin.com/1VfKGnXx

Habe auch beim installieren von NodeJS darauf geachtet das es diese Python/C++ Pakete oder so mit installiert.

PS C:\Users\maxmustermann\Desktop\robotjs> npm install robotjs

Es installiert kurz Robot Js und dann löscht es sich wieder und dann erscheint das

Part 1:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code 1
npm ERR! path C:\Users\maxmustermann\Desktop\robotjs\node_modules\robotjs
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c prebuild-install || node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.0.0
npm ERR! gyp info using node@18.3.0 | win32 | x64
npm ERR! gyp info find Python using Python version 3.10.5 found at "C:\Users\maxmustermann\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\python.exe"
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS checking VS2022 (17.2.32602.215) found at:
npm ERR! gyp ERR! find VS "C:\Program Files\Microsoft Visual Studio\2022\Community"
npm ERR! gyp ERR! find VS - found "Visual Studio C++ core features"
npm ERR! gyp ERR! find VS - missing any VC++ toolset
npm ERR! gyp ERR! find VS checking VS2019 (16.11.32602.291) found at:
npm ERR! gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools"
npm ERR! gyp ERR! find VS - found "Visual Studio C++ core features"
npm ERR! gyp ERR! find VS - missing any VC++ toolset
npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS

Die ganze Fehlermeldung passt hier nicht rein.

...zum Beitrag

Docker Image: warum Seite nicht erreichbar?

Hallo zusammen,

ich habe in den letzten Tagen ein kleines Programm geschrieben, nur eine kleine API mit Fastify und ein paar NPM Paketen.

Ich habe mir dann gedacht: mach doch mal ein Docker Image draus. Nach ein paar Tutorials und "Online-Recherchen" bin ich dann zu folgendem Dockerfile gekommen:

FROM node:current-alpine3.19
WORKDIR /usr/src/app
RUN chown -R node:node /usr/src/app
COPY src/package.json ./
COPY src/package-lock.json ./
RUN npm install
USER node
COPY --chown=node:node ./src .
CMD [ "npm", "start" ]

Der Build hat geklappt und ich habe den Container mit "docker run -p 3000:3000 [mein-projekt]" gestartet.

Im Container sieht alles gut aus. Die Dateistruktur scheint zu stimmen und ich bekomme bei einem "wget 127.0.0.1:3000" die erwartete Antwort.

Leider kann ich die Seite aber nicht von meinem PC aus mit localhost:3000 oder 127.0.0.1:3000 öffnen. Firefox gibt mir die Meldung "Die Verbindung zum Server wurde zurückgesetzt, während die Seite geladen wurde." Also gibt es eine Art kurze Verbindung?

Ich weiß gerade einfach nicht weiter. Fastify läuft unter Port 3000, Port 3000 wird auch im "docker run" Befehl genutzt und ich mache die Seite mit Port 3000 auf. In Foren habe ich nichts gefunden und ChatGPT hilft nicht wirklich weiter.

Was mache ich falsch?

Vielen Dank für eure Antworten und noch einen schönen Abend!

...zum Beitrag

Welches JavaScript Framework?

Hallo zusammen,

ich bringe mir seit ein paar Monaten HTML, CSS und JavaScript bei, habe mir ein Portfolio aufgebaut und lade dort die Projekte hoch, die ich privat entwickle, um einen einfacheren Berufseinstieg zu erhalten. Aktuell fühle ich mich in den drei oben genannten Bereichen fit genug, dass ich mich gerne in ein Framework einarbeiten würde.

Es gibt da draußen mehrere Videos über das Thema Angular, React, Vue.js, aber ich würde gerne von euch, die wirklich beruflich damit arbeiten und eventuell auch vom Hörensagen anderer Entwickler, wissen, was so im deutschen Arbeitsmarkt angesagt ist.

React ist ja, was die Rankings angeht, immer auf Platz 1, weswegen ich in diese Richtung gehen wollte. Jedoch, wenn ich auf Stepstone und anderen Plattformen schaue, werden öfters Angular-Stellen gesucht. Deswegen hat sich mir die Frage gestellt, ob React vielleicht eher im Rest der Welt populär ist und in Deutschland eventuell eher Angular oder gar ein ganz anderes Framework.

Ich bedanke mich im Voraus für eure Zeit und Hilfe.

...zum Beitrag

Welche WYSWYG Editioren sind empfehlenswert?

Suche einen guten und einfachen WYSWYG Editor für HTML, CSS, PHP, JavaScript.

Habe früher Webocton Scriptly genommen, das ist aber auch schon in die Jahre gekommen (neueste Version von 2010). Daher suche ich einen schönen einfachen WYSWIG Editor mit Syntax Highlighting und Autocompletion. Visual Studio Code ist nicht so mein Fall dafür. Vielleicht hat jemand ein paar Empfehlungen für mich.

Gerne für Windows/Linux/MacOS

...zum Beitrag

Arduino Daten an HTML-Seite?

Ich habe gerade ein Projekt, indem ich versuche Daten vom Arduino auf eine HTML-Seite zu übertragen. Dabei benutze ich node.js.

Jedoch bin ich noch relativ neu in dem Thema und kenne mich nicht so gut mit Servern und node aus.

Im Moment erhalte ich ständig die Fehlermeldung: Server is not a consructor (const io = new Server('COM3'))

Quelltext aus app.js:

var http = require("http");
var fs = require("fs");
var index = fs.readFileSync("index.html");


var SerialPort = require("serialport");
const parsers = SerialPort.parsers;


const parser = new parsers.Readline({
  delimiter: "\r\n",
});


var port = new SerialPort("COM3", {
  baudRate: 9600,
  dataBits: 8,
  parity: "none",
  stopBits: 1,
  flowControl: false,
});


port.pipe(parser);


var app = http.createServer(function (req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.end(index);
});


const Server = require('socket.io');
const io = new Server('COM3');


io.on("connection", function (socket) {
  console.log("Node is listening to port");
});


parser.on("data", function (data) {
  console.log("Received data from port: " + data);
  io.emit("data", data);
});

app.listen(3000);

Quelltext aus index.html:

<!doctype html>
<html>
    <head>
        <title>Test</title>


        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>


    </head>
    <body>


        <h1> Communicating between an arduino and a html website</h1>


        <div id='sample'></div>


        <script>
            
            var socket = io();
            socket.on('data',function(data){
                console.log(data);
                document.getElementById('sample').innerHTML = data;
            });
            
        </script>
        
    </body>
</html>

...zum Beitrag

JavaFx Libary nicht gefunden?

Hallo, ich bin gerade im 1. Semester in der Uni und studiere Informatik. Im PK1 -- Programmierkurs 1 benutzen wir Java auf der Version 22. Außerdem benutze ich VSC --> hier liegt denke ich auch das Problem.
Bisher haben alle Programme gut ohne Probleme funktioniert. Jetzt aber sollen wir die JavaFx Libaries benutzen bzw. damit eine Oberfläche bauen... ich wollte nach dem bemerkten Fehler (alle import: javaFx... sind rot unterstrichen bzw. eben einfach nicht erkannt. Nach längerem suchen habe ich gesehen, dass es sich hier wohl um ein häufig auftretendes Problem mit VSC handelt.

Meine Frage: Gibt es irgendwo ein Tutorial um die Libaries zu benutzen?

Ich habe jetzt schon relativ viel durchgeschaut und bis jetzt nicht rausgefunden wie ich es machen soll.
Lösungsansätze: (Maven extension? --> da das Problem:

Error: JAVA_HOME not found in your environment. Please set the JAVA_HOME variable in your environment to match the location of your Java installation.

Sonst oft das Problem:

Fehler: Zum Ausführen dieser Anwendung benötigte JavaFX-Runtime-Komponenten fehlen

...zum Beitrag

Welchen Techstack nutzt ihr als Web Developer im Beruf?

und was Techstack ihr. Front end backend fullstack ?

Angular Typescript node js mongo bootstrap oder sowas.
React js java scss
Vue js less php

Was für wichtige libraries nutzt ihr.

Und wenn es für euch ok ist, wo arbeitet ihr genau/ungefähr / welche branche.

Und wie lange/ welche position

Arbeitet ihr fest bei zb Meta oder Freiberuflich

(Kriegt ihr regelmässig aufträge von unternehmen oder kleinere durch fiverr)

...zum Beitrag

Google Reviews API Kosten?

Ich verstehe nicht ganz, wie das Google Developer Portal funktioniert. Also die ganzen APIs kosten da Geld pro Request, aber ich glaube, ich bekomme pro Monat $200 kostenlos Guthaben?

Stimmt das mit den $200 gratis und muss ich eine Kreditkarte hinterlegen? Weil ich zurzeit nur PayPal habe. Von mir aus kann es nach dem Guthaben aufhören zu funktionieren; nach Prepaid-Prinzip, falls da tausende Anfragen von Bots kommen.
Wie viel Geld/Cents kostet so ein Request bzw. wie viele sind möglich mit diesen $200? Ich habe pro Monat vielleicht 1000 Besucher auf der Seite, die ich von WordPress auf Next.js wegen Performance/Speed-Problemen nachbauen möchte und weil es der Kunde nicht wie gedacht als CMS nutzt und mich immer beauftragt, Texte zu ändern. WordPress und Elementor gehen mir auf die Nerven.

...zum Beitrag

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zum Beitrag

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zum Beitrag

Webentwickler Freelancer - wer kümmert sich um DSGVO?

Ist es üblich das ich als Webentwickler mich auch um Datenschutz texte und funktionierenden cookie banner kümmere (nur notwendige akzeptieren, nur marketing cookies, alle akzeptieren) usw. ?

Und je nachdem verändert sich die seite weil googoe fonts oder maps zugestimmt wurde.

Wenn ich davon nichts genau erwähnt habe im veertrag nur von home, contact page und solchen sachen die rede ist.

Wie der Name sagt bin ich Webentwickler nicht jurist.

Ich würd die ins netz stellen für die person oder offline zuschicken aber was danach passiert ist nicht mein Problem sag ich mal.

vorallem wenn ich mit wordpress was mache sind da alle möglichen plugins irgendwelche tracker und der datenschutz problematisch.

wenn ich die von Grund auf selber programmiere mit zb. react hab ich da zumindest vollen überblick.

oder wie würdet ihr da vorgehen ?

engagiert man da einen Anwalt ? Mach ich das und sollte mit 200€ extra rechnen für diese Implementierung oder der Kunde macht das alleine ?

Aber wie kennt der Anwalt sich aus mit react js oder wordpress plugins ? Und dann kann er garantieren/haften das die seite konform ist ?

Bei diesen generatoren ist das ja nicht gegeben und cookie banner muss auch ordnungsgemäß funktionieren, kann nicht sein das er unter der haube garnichts macht.

...zum Beitrag

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zum Beitrag

Probleme beim starten von mp4 Dateien mit C# Windows Forms App?

Wie es der Titel schon beschreibt habe ich Probleme damit .mp4 Dateien per Button mit meiner Windows Forms App zu starten.

Probiert habe ich es zb. schon hiermit:

private void materialButton18_Click(object sender, EventArgs e)
        {
            string filePath = @"C:\Program Files\VBC-Files\Backgrounds\NSFW\AlbedoXLupusNormal.mp4";
            if (!File.Exists(filePath))
            {
                MessageBox.Show("Please download the backgrounds first.", "File Not Found", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
            else
            {
                System.Diagnostics.Process.Start(filePath);
            }
        }

Allerdings erhalte ich dann Fehler Meldungen wie diese hier: (Programm schmiert nach drücken des Buttons ab)

System.ComponentModel.Win32Exception: 'An error occurred trying to start process 'C:\Program Files\VBC-Files\Backgrounds\NSFW\AlbedoXLupusNormal.mp4' with working directory 'C:\Users\Anwender\source\repos\Votexs Background Changer\Votexs Background Changer\bin\Debug\net6.0-windows'. The specified executable is not a valid application for this OS platform.'

Ich habe auch schon versucht zb. von Windows Media Player den Pfad anzugeben, was nicht direkt in einem crash des Programms endet, allerdings öffnet sich dann halt einfach nichts.

System.Diagnostics.Process.Start(@"C:\Program Files (x86)\Windows Media Player\wmplayer.exe", fileName);

Mit .exe Dateien habe ich dieses Problem nicht und verstehe nicht warum er bei .mp4 Dateien so faxen macht.

Ich bin für jegliche Hilfe sehr dankbar.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen