<app-root> is not getting filled

17,330

You've added the NgModule decorator and the AppComponent class to the imports section of your module, which is wrong. Remove the NgModule decorator from your imports section. Also remove the AppComponent from the imports of your module.

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

The imports attribute should only contain classes which are decorated with NgModule.

17,330

Author by

fusionlightcat

Updated on June 27, 2022

Comments

fusionlightcat almost 2 years

I am a beginner with Angular 2 and have started with a small project consisting of these files:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialModule } from './material/material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    BrowserAnimationsModule,
    AppComponent,
    NgModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

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

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

app.component.html

<span>Welcome to {{title}}</span>

Also, my index.html looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My App</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></app-root>
</body>
</html>

The problem I am experiencing is that even though everything compiles fine, the <app-root> tag stays empty in the resulting page and my template HTML is not getting added. I've tested if it is a problem with template loading by altering the template URL, but it fails to find my template file and compilation fails. This means that this can't be the problem.

Is there anything I am missing here?