is not getting filled

Question

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?

cyr_x · Accepted Answer

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.

<app-root> is not getting filled

Tags:

typescript

angular

angular-components

fusionlightcat

1 Answers

cyr_x

Recent Activity

Donate For Us