使用 AppComponent 以外的另一个组件启动应用程序时遇到问题

Question

我正在做 Angular 项目，我不想用 AppComponent 启动我的应用程序，我想用 FleshScreenComponent 启动应用程序

为此，我在 module.ts 文件的 bootstrap 中用 FleshScreenComponent 替换了 appComponent 但仍然出现 error ->>

The selector "app-flesh-screen" did not match any elements

app.module.ts

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

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ComponentsComponent } from './components/components.component';
    import { ReactiveFormsModule } from '@angular/forms';
    import { HttpClientModule }    from '@angular/common/http';


    import { MDBBootstrapModule, WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md';
    import { MatTabsModule, MatDialogModule } from '@angular/material';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MatFormFieldModule} from '@angular/material';


    /*angular material compoment*/
    import { MatInputModule } from '@angular/material/input';
    import {MatButtonModule} from '@angular/material/button';
    import { RouterModule, Routes } from '@angular/router';
    import {MatSlideToggleModule} from '@angular/material/slide-toggle';
    import {MatTableModule} from '@angular/material/table';
    import {MatSelectModule} from '@angular/material/select';
    import {MatExpansionModule} from '@angular/material/expansion';
    import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
    import {MatSnackBarModule} from '@angular/material/snack-bar';
    import {MatSliderModule} from '@angular/material/slider';
    import {MatBadgeModule} from '@angular/material/badge';
    import {MatCheckboxModule} from '@angular/material/checkbox';

    /*firebase*/
    import { AngularFireModule } from 'angularfire2';
    import { AngularFirestore } from 'angularfire2/firestore';
    import { AngularFireDatabaseModule } from 'angularfire2/database';
    import {  AngularFireAuthModule} from 'angularfire2/auth';

    /*component */
    import { LoginComponent } from './login/login.component';
    import { RegisterComponent } from './register/register.component';
    import { FleshScreenComponent } from './flesh-screen/flesh-screen.component';

    // environment
    import { environment } from '../environments/environment';


    /* Service */
    import { ServicesService } from './service/services.service';
    import { ErrorComponent } from './error/error.component';
    import { MatchcenterComponent } from './matchcenter/matchcenter.component';

    @NgModule({
      declarations: [
        AppComponent,
        ComponentsComponent,
        LoginComponent,
        RegisterComponent,
        FleshScreenComponent,
        ErrorComponent,
        MatchcenterComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MatInputModule,
        MatButtonModule,
        MDBBootstrapModule.forRoot(),
        ReactiveFormsModule ,
        HttpClientModule ,
        MatFormFieldModule,
        MatCheckboxModule,
        AngularFireModule.initializeApp(environment.firebase),
        AngularFireDatabaseModule,
        AngularFireAuthModule

      ],
      schemas: [ NO_ERRORS_SCHEMA ],
      providers: [ServicesService],
      bootstrap: [FleshScreenComponent]
    })
    export class AppModule { }

**routing.module.ts**

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { ErrorComponent } from './error/error.component';
import { MatchcenterComponent } from './matchcenter/matchcenter.component';





const routes: Routes = [
 { path: 'login' , component:LoginComponent },
 { path: 'register' , component: RegisterComponent },
 { path: 'error' , component: ErrorComponent},
 { path: 'matchcenter' , component: MatchcenterComponent}
];

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

Answer 1

您也需要在 index.html 中将 <app-root></app-root> 更改为 <app-flesh-screen></app-flesh-screen>。

使用 AppComponent 以外的另一个组件启动应用程序时遇到问题

Facing Problem in starting Application with another component other then AppComponent

angular-ui-router

angular

angular5

angular6