Basic Angular Components not Displaying in Browser

Question

I just ran ng serve -o and only see my index.html file displayed in the angular app I just started modifying. The page just says hello for now:

// index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Appclient</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>hello</app-root>
</body>
</html>

The app.component.html has this:

world
<app-header></app-header>
<router-outlet></router-outlet>

The app.component.ts is below:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'startlistsclient';
}

I am not sure what I am missing.

The console error is:

ReferenceError: global is not defined

index.js:43 Webpack 18

use [angular-cli](https://cli.angular.io/) to set-up project — Kamil Kiełczewski, Aug 20 '19 at 05:20
I did set it up but when I started adding stuff it went awry — cdub, Aug 20 '19 at 05:21
Updated the question with the console code. Also app component .html is not being displayed and at least should see the world text from there — cdub, Aug 20 '19 at 05:26
Looks like missing some peer depencies! https://github.com/angular/angular-cli/issues/8160 — Prashant Pimpale, Aug 20 '19 at 05:26
have a look at this https://stackoverflow.com/questions/50356408/upgrading-to-angular-6-x-gives-uncaught-referenceerror-global-is-not-defined — ArunKumar M N, Aug 20 '19 at 05:27
Thanks everyone! the solution (answer) from the SO post directly above did fix the issue. It must have been when I started added amazon-aws-js stuff into the header and caused the dependency issue — cdub, Aug 20 '19 at 05:38

score 0 · Answer 1 · answered Aug 20 '19 at 05:50

you need to use @angular/route in app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

const routes: Routes = [
  { path: 'hello', component: HelloComponent }
];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(routes) ],
  exports:      [ RouterModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

and <app-header></app-header> this should be defined.

check working demo

"working demo" https://stackblitz.com/edit/angular-h23aqq --- IS NO LONGER AVAILABLE — mobibob, Dec 31 '22 at 20:08

Basic Angular Components not Displaying in Browser

1 Answers1