首页 > 解决方案 > 如何将组件导入您的第二个 module.ts?

问题描述

我有创意 Tim - Aragon 模板。在这个模板中,我有 app.module.ts 和 admin-layout.module.ts 当我尝试在新页面上导入第 3 方组件时遇到问题,例如 - 角材料形式。

我在 admin-layout.module.ts 上导入表单的所有模块,并在我的新页面 html 文件中传递表单 html 代码。但网站粉碎并没有加载。我也应该在 app.module 中导入吗?步骤是什么?

//this is the app.module

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';







@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ComponentsModule,
    NgbModule,
    RouterModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    AdminLayoutComponent,
    AuthLayoutComponent,
    
    
   
  
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//this is the admin-layout.module.ts

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { ClipboardModule } from 'ngx-clipboard';

import { AdminLayoutRoutes } from './admin-layout.routing';
import { DashboardComponent } from '../../pages/dashboard/dashboard.component';
import { IconsComponent } from '../../pages/icons/icons.component';
import { MapsComponent } from '../../pages/maps/maps.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { TablesComponent } from '../../pages/tables/tables.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TeamsComponent } from '../../pages/teams/teams.component';
import { CoachesComponent } from '../../pages/coaches/coaches.component';
import { CourtsComponent } from '../../pages/courts/courts.component';


// import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,ReactiveFormsModule,
    HttpClientModule,
    NgbModule,
    ClipboardModule
  ],
  declarations: [
    DashboardComponent,
    TeamsComponent,
    CourtsComponent,
    CoachesComponent,
    UserProfileComponent,
    TablesComponent,
    IconsComponent,
    MapsComponent
  ]
})

export class AdminLayoutModule {}

我希望解决这个问题并在我网站的新页面中导入组件

标签: angularangular-components

解决方案


推荐阅读