Angular app is not rendering anything

Question

Angular.io newb here (I know AngularJS!). My app was rendering stuff before, but now it's compiling, but rendering nothing.

I have the following index.html file:

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>SumanChromeExtension</title>
  <base href="/dist/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>


<app-header></app-header>

<app-root></app-root>

<app-footer></app-footer>


</body>
</html>

the following main.ts file:

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {AppModule} from './app.module';
import {environment} from './environments/environment';
declare var chrome;

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

window.addEventListener('message', function (ev: Event) {
  console.log('extension received event:', ev);
});

the following app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import { AppHeader } from './app/header/header.component';
import { AppComponent } from './app/pages/home/app.component';


@NgModule({
  declarations: [
    AppHeader,
    AppComponent
  ],
  imports: [
    MatButtonModule,
    MatCheckboxModule,
    BrowserModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [
    AppHeader,
    AppComponent
  ]
})



export class AppModule { }

app.component.ts looks like:

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

declare var chrome;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Suman Test Generator';

  constructor() {
    console.log('constructor was called.');
  }

}

and header.component.ts looks like:

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

declare var chrome;

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})

export class AppHeader {
  title = 'Suman Test Generator 4';

  constructor() {
    console.log('constructor was called.');
  }
}

it was rendering stuff before, but now the rendered html looks like:

So nothing is being rendered. I am sure it's a simple problem, anyone know? Like I said it is building without any errors, so.

Actually I checked the console, and I have these errors:

compiler.js:24660 Uncaught Error: Template parse errors:
Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button'. ("
    <span>App Name</span>
    <span class="example-spacer"></span>
    <button md-button [ERROR ->][mdMenuTriggerFor]="appMenu">
      <md-icon>menu</md-icon>
      Menu
"): ng:///AppModule/AppHeader.html@6:22
'md-icon' is not a known element:
1. If 'md-icon' is an Angular component, then verify that it is part of this module.
2. If 'md-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <span class="example-spacer"></span>
    <button md-button [mdMenuTriggerFor]="appMenu">
      [ERROR ->]<md-icon>menu</md-icon>
      Menu
    </button>
"): ng:///AppModule/AppHeader.html@7:6
'md-toolbar' is not a known element:
1. If 'md-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'md-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div>

  [ERROR ->]<md-toolbar color="primary">
    <span>App Name</span>
    <span class="example-spacer"></span>
"): ng:///AppModule/AppHeader.html@3:2
There is no directive with "exportAs" set to "mdMenu" ("
    </button>
  </md-toolbar>
  <md-menu [ERROR ->]#appMenu="mdMenu">
    <button md-menu-item> Settings</button>
    <button md-menu-item> Contact</but"): ng:///AppModule/AppHeader.html@11:11
'md-menu' is not a known element:
1. If 'md-menu' is an Angular component, then verify that it is part of this module.
2. If 'md-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </button>
  </md-toolbar>
  [ERROR ->]<md-menu #appMenu="mdMenu">
    <button md-menu-item> Settings</button>
    <button md-menu-item> Con"): ng:///AppModule/AppHeader.html@11:2
    at syntaxError (compiler.js:485)
    at TemplateParser.webpackJsonp.../../../compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24660)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34471)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34446)
    at compiler.js:34347
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
    at compiler.js:34217
    at Object.then (compiler.js:474)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34216)

I updated my answer to address the 'material' problem as well as the scope problem (assuming you're using Angular CLI, that is). I also included an example app that might help you understand Angular a bit more. — Z. Bagley
– Z. Bagley, Commented Jan 4, 2018 at 2:09
this will fix your material version problem replacing md for mat github.com/angular/material-prefix-updater — Lucas
– Lucas, Commented Jan 4, 2018 at 2:11

Z. Bagley · Accepted Answer · 2018-01-04 02:07:35Z

1

The first problem is that everything needs to be in scope of app-root. All your components and modules must be children of root. You will need to include the components in the app.module.ts and you will need to provide the DOM elements inside the app.component.html. The next problem is that md was replaced by mat a while ago, so you're using outdated Material items inside your html.

If you're looking to use Angular - Material in your projects here's a github repo that uses Angular 5, Material 2, and Flex-Layout: https://github.com/zbagley/ngx-flex-material-template. It also has a separate header, body, and footer as contained components in a similar fashion to how you were hoping to implement them.

edited Jan 4, 2018 at 2:07

answered Jan 4, 2018 at 1:48

Z. Bagley

9,2781 gold badge44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alexander Mills Over a year ago

Thanks that should help, will accept answer likely later today

Alexander Mills Over a year ago

thanks, what do you think of this project as an example project? github.com/Ismaestro/angular5-example-app

Alexander Mills Over a year ago

@zbagley your project is great, I see that it uses mat-icon - in my project, I am getting

'mat-icon' is not a known element: 1. If 'mat-icon' is an Angular component, then verify that it is part of this module. 2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Alexander Mills Over a year ago

but I don't see how your project registers mat-icon? It just seems to use it in the html like no big deal, without having to register it, or anything

Alexander Mills Over a year ago

ok I figured it out, I had to copy your shared.module.ts file, and import those dependencies, thanks!!

Collectives™ on Stack Overflow

Angular app is not rendering anything

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related