Angular не распознает новый компонент - PullRequest
1 голос
/ 14 апреля 2020

Я новичок в angular и создаю свой первый тур по героям (все так). Но проблема в том, что angular не распознает новый компонент. Как будто он не выдает никакой ошибки, а скорее не рендерится в браузере

Обновление: Хорошо, я теперь снова могу подавать мое приложение, как Вахаб Шах, но на этот раз из терминала с кодом VS вместо * Терминал 1043 * и работает сейчас. Большое спасибо за помощь

heroes.component. html

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
    <label>name:
    <input [(ngModel)]="hero.name" placeholder="name"/>
  </label>
</div>

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component. html

<h1>{{title}}</h1>
<app-heroes></app-heroes>

app.component.ts

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

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

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

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

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

hero.ts

export interface Hero {
  id: number;
  name: string;
}

Ответы [ 2 ]

2 голосов
/ 14 апреля 2020

ng снова подайте ваше приложение или используйте селектор вновь созданного компонента внутри его родителя, если это так.

В основном после добавления нового компонента или модулей приложение не отображает его. Просто подайте это может сделать свое дело.

0 голосов
/ 14 апреля 2020

Возможно, проблема в том, что

  1. вы не объявили никаких маршрутов для этого компонента
  2. вы не добавили селектор приложений этого нового компонента в приложение .component. html page.

Любой из них может привести к тому, что новый компонент не будет отображаться в браузере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...