Читать книгу Angular - Manfred Steyer - Страница 22

Als Basis für die ersten Schritte mit TypeScript kommt das Projekt-Setup aus dem vorigen Kapitel zum Einsatz. Um die Übersicht nicht zu verlieren, legen wir für unsere TypeScript-Experimente einen Ordner ts unter src/app an. Darin erzeugen wir eine neue Datei demo.ts. Weil es so ein schöner Brauch ist, gibt diese Datei erst mal Hallo Welt! auf der Entwicklerkonsole des Browsers aus:

// src/app/ts/demo.ts

console.debug('Hallo Welt!');

Diese Datei müssen Sie anschließend in Ihrer main.ts referenzieren, damit sie beim Programmstart ausgeführt wird. Fügen Sie dazu in der ersten Zeile die folgende im port-Anweisung ein:

// src/main.ts

import './app/ts/demo';

[...]

Die Dateiendung .ts wird hier ganz bewusst weggelassen. Alle restlichen Einträge in der Datei main.ts kümmern sich, wie im letzten Kapitel besprochen, um das Bootstrapping der Angular-Anwendung.

Um das Projekt zu testen, starten Sie im Hauptordner des Projekts den Entwicklungswebserver:

ng serve -o

Danach sollten Sie unter http://localhost:4200 Ihre Anwendung sehen. Öffnet man die Entwicklungswerkzeuge (F5 oder Strg+Umschalt+I) und wechselt man auf die Konsole, sollte sich dort die Ausgabe Hallo Welt! finden (siehe Abbildung 2-1).

Abbildung 2-1: Hallo Welt auf der Konsole

Bitte beachten Sie, dass Chrome standardmäßig Debug-Ausgaben auf der Konsole unterdrückt. Um sie einzublenden, müssen Sie das Level Verbose aktivieren: