时间戳

首页 > 解决方案 > Angular 7：获取“Ap​​pComponent 不能用作入口组件”错误

angular - Angular 7：获取“Ap​​pComponent 不能用作入口组件”错误

问题描述

（关于这个问题 - AppComponent 中的错误不能用作入口组件，我将 AppComponent 包括在 AppModule 上声明的下面...）

我正在使用 Angular 7。我有这个 app.module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

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

然后我有这个 app.component.ts 文件......

import { Component,trigger,animate,style,transition,keyframes } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations:[
   trigger("moveInLeft",[
      transition("void=> *",[style({transform:"translateX(300px)"}),
        animate(200,keyframes([
         style({transform:"translateX(300px)"}),
         style({transform:"translateX(0)"})

          ]))]),


          transition("*=>void",[style({transform:"translateX(0px)"}),
        animate(100,keyframes([
         style({transform:"translateX(0px)"}),
         style({transform:"translateX(300px)"})

          ]))])    

    ])

  ]
})
export class AppComponent {
  todoArray=[];
  todo;
  //todoForm: new FormGroup()


   addTodo(value){
    if(value!==""){
     this.todoArray.push(value)
    //console.log(this.todos) 
  }else{
    alert('Field required **')
  }

  }

  /*delete item*/
  deleteItem(todo){
    for(let i=0 ;i<= this.todoArray.length ;i++){
        if(todo== this.todoArray[i]){
            this.todoArray.splice(i,1)
        }
    }
  }

  // submit Form
  todoSubmit(value:any){
     if(value!==""){
    this.todoArray.push(value.todo)
     //this.todoForm.reset()
    }else{
      alert('Field required **')
    }

  }

}

但是，当我启动本地服务器时，我收到错误“AppComponent 不能用作入口组件”：

localhost:Todo-app-in-Angular davea$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-05-17T19:32:57.591Z
Hash: 72544b311fe9298f38ef
Time: 3030ms
chunk {main} main.js, main.js.map (main) 1.95 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 92.1 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 327 kB [initial] [rendered]

ERROR in AppComponent cannot be used as an entry component.
ℹ ｢wdm｣: Failed to compile.

我认为 Angular 可以根据@NgModule 中的声明找出入口点？

编辑：下面是我的 app.component.html 文件..

<div class="container">
        <form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" >
                <div class="form-group">
                <h1 class="text-center ">Todo App</h1>
                        <div class="input-group-prepend">
                            <input type="text" #todo  class="form-control" placeholder="Add Todo" name="todo" ngModel>
                                <span class="input-group-text" (click)="addTodo(todo.value)">
                                <i class="material-icons">add</i></span>
                        </div>
                </div>
                <div class="data">
                <ul class="list-unstyled">
                        <li [@moveInLeft]  *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>
                </ul>
        </div>
        </form>

</div>

和我的 index.html 文件...

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>TodoApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- material icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

标签： angularcomponentsentry-point

解决方案

推荐阅读