angular - 如何将组件导入您的第二个 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 {}
我希望解决这个问题并在我网站的新页面中导入组件
解决方案
推荐阅读
- node.js - Mailgun 在 Node.js 应用程序中看不到凭据
- javascript - React 处理 DOM 元素的良好实践
- javascript - 为什么这个 MongoDB 文档是用相同的 nanoid 生成的?
- javascript - 从javascript中的圆圈中排除点
- flutter - Flutter 的谷歌地图插件 onTap 不工作
- python-3.x - 将数据从 Pandas 数据框中保存到 csv 文件中,并附加多个项目
- function - 反射性地引用重载的顶级 Kotlin 函数
- amazon-web-services - Amazon DynamoDB:将数据模型从一个账户复制到另一个账户
- javascript - 输入不能为空,但 console.log 仍在运行
- reactjs - 第二个 axios 拦截器不起作用