【问题标题】:Getting error while putting Route configuration in separate ts file in Angular4在Angular4中将Route配置放在单独的ts文件中时出错
【发布时间】:2017-09-05 08:47:08
【问题描述】:

当我将路由配置详细信息放入不同的 ts 文件时出现以下错误。但是,如果我将路由配置放在 boot.ts 文件中,它就可以正常工作。

未处理的 Promise 拒绝:组件 DashboardComponent 不是一部分 任何 NgModule 或该模块尚未导入到您的模块中。 ;区域:;任务:Promise.then;值:错误:组件 DashboardComponent 不是任何 NgModule 的一部分,或者该模块没有 已导入到您的模块中。

app.routing.ts:

import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './Components/dashboard/dashboard.component';

const appRoutes: Routes = [
    { path: '', redirectTo: 'Dashboard', pathMatch: 'full' },
    { path: 'Dashboard', component: DashboardComponent },
];

export const AppRouting = RouterModule.forRoot(appRoutes, {
    enableTracing: true
});

boot.ts

//other imports
import { AppRouting } from './app.routing';
@NgModule({
imports: [BrowserModule,
    //AppRouting,
    RouterModule.forRoot(appRoutes, { enableTracing: true }), // <-- debugging purposes only
    AgGridModule.forRoot(),
    MaterialModule,
    SlimLoadingBarModule.forRoot(),
    ToastyModule.forRoot(),
    BrowserAnimationsModule, FormsModule,
    HttpModule, TreeModule, GrowlModule, FileUploadModule, InputTextModule, ButtonModule, ConfirmDialogModule, NgxChartsModule
    , AgmCoreModule.forRoot({ apiKey: 'AIzaSyC9TWEHsjWT_QX_Rxl8VXtnnY582aY4mBQ' }) //Angular Google Map Setup
],
providers: [BaseComponentService, TreeNodeService, LowryToastyService],
declarations: [APP_COMPONENTS],
entryComponents: [ENTRY_COMPONENTS],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

【问题讨论】:

  • 也许这有帮助? stackoverflow.com/questions/39527722/… -> “由于大小写不同,因此路由认为它加载的组件与模块不同,这意味着被拉入路由的组件与模块不同。”
  • 谢谢@mwager。它帮助我解决了错误。

标签: angular angular-router


【解决方案1】:

您尚未在 app.module.ts 中声明“DashboardComponent” 把它放在你的 app.module.ts

import { DashboardComponent } from './Components/dashboard/dashboard.component';

declarations: [ DashboardComponent ]

【讨论】:

    猜你喜欢
    • 2015-05-29
    • 1970-01-01
    • 2013-02-27
    • 1970-01-01
    • 1970-01-01
    • 2022-07-26
    • 2017-11-18
    • 2023-01-30
    • 2016-02-16
    相关资源
    最近更新 更多