Sitelet https://web.archive.org/web/20250520235242/https://github.com/angular/angular-cli/issues/20100
Skip to content

Problem in app module when I generate component via angular CLI. #20100

Closed
@AzadCoder

Description

@AzadCoder

When I generate component with angular CLI. It imports the component automatically in the app module but it add ; before import component.

My project is an angular 8 project but my angular version is 11.

import { TransactionComponent } from "./transaction/transaction.component"; ;
import { GeneratedComponent } from "./generated/generated.component"

and also in declarations it add , first and after that the component

declarations{
    MyComponent, ,
    GeneratedComponent
}

ng version

Angular CLI: 11.2.1
Node: 14.15.5
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1102.1 (cli-only)
@angular-devkit/core         11.2.1 (cli-only)
@angular-devkit/schematics   11.2.1 (cli-only)
@schematics/angular          11.2.1 (cli-only)
@schematics/update           0.1102.1 (cli-only)

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AgmCoreModule } from "@agm/core";

// used to create fake backend
// import { fakeBackendProvider } from './_h  elpers';

import { AppComponent } from "./app.component";
import { appRoutingModule } from "./app.routing";

import { JwtInterceptor, ErrorInterceptor } from "./_helpers";
import { HomeComponent } from "./home";
import { LoginComponent } from "./login";
import { SidebarComponent } from "./theme/sidebar/sidebar.component";
import { HeaderComponent } from "./theme/header/header.component";
import { FooterComponent } from "./theme/footer/footer.component";
import { HeadComponent } from "./theme/head/head.component";
import { FootComponent } from "./theme/foot/foot.component";
import { UsersComponent } from "./data/users/users.component";
import { BannersComponent } from "./data/banners/banners.component";
import { AddBannerComponent } from "./data/banners/add-banner/add-banner.component";
import { MatSelectModule } from "@angular/material/select";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatGridListModule } from "@angular/material/grid-list";
import { MatTableModule } from "@angular/material/table";
import { MatIconModule } from "@angular/material/icon";
import { DriverComponent } from "./data/driver/driver.component";
import { MatTabsModule } from "@angular/material/tabs";
import { RegisterationComponent } from "./registeration/registeration.component";
import { MatRadioModule } from "@angular/material/radio";
import { MatInputModule } from "@angular/material/input";
import { RidesComponent } from "./rides/rides.component";
import { MatDialogModule } from "@angular/material/dialog";
import { RideItemComponent } from "./ride-item/ride-item.component";
import { PassengersComponent } from "./passengers/passengers.component";
import { ComplainsComponent } from "./complains/complains.component";
import { PassengerComponent } from "./passenger/passenger.component";
import { TransactionComponent } from "./transaction/transaction.component";
import { AddNewCarComponent } from "./add-new-car/add-new-car.component";
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { BonusListComponent } from './bonus-list/bonus-list.component';
import { FormsModule } from '@angular/forms';
import { RateCardsComponent } from './rate-cards/rate-cards.component';; <----------------------Problem here
import { GeneratedComponent } from './generated/generated.component'
@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    appRoutingModule,
    MatSelectModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatGridListModule,
    MatTableModule,
    MatIconModule,
    MatTabsModule,
    AgmCoreModule.forRoot({
      apiKey: "AIzaSyBY1nLDcGY1NNgV89rnDR8jg_eBsQBJ39E",
    }),
    MatRadioModule,
    MatInputModule,
    MatDialogModule,
    FormsModule,
    MatSnackBarModule,
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    SidebarComponent,
    HeaderComponent,
    FooterComponent,
    HeadComponent,
    FootComponent,
    UsersComponent,
    BannersComponent,
    AddBannerComponent,
    DriverComponent,
    RegisterationComponent,
    RidesComponent,
    RideItemComponent,
    PassengersComponent,
    ComplainsComponent,
    PassengerComponent,
    TransactionComponent,
    AddNewCarComponent,
    BonusListComponent,
    RateCardsComponent,,<----------------------Problem here
    GeneratedComponent
  ],
  entryComponents: [RideItemComponent],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

    // provider used to create fake backend
    // fakeBackendProvider
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions