Question

我怀疑答案已经存在，因为我不能成为遇到这个问题的唯一人，但我可能会根据错误的条款进行搜索。

无论如何，我有一个用Angular 2 RC4编写的新应用程序正在运行。根据我读到的一些最佳实践，我在子文件夹中有多个路由文件（包含随附的组件）和一个用于提取其他文件的单个根级路由文件。一切正常运行。

结构和代码片段看起来像

|--Profiles
|   |-- profiles.routes.ts
|   |-- profile-editor.component.ts
|
|-- OtherFolder...
|   |-- other.routes.ts
|   |-- other.component.ts
|
|-- app.component.ts
|-- app.routes.ts

profile.routes.ts

import { Routes } from "@angular/router";

import { ProfileEditorComponent } from "./profile-editor.component";

export const profilesRoutes: Routes = [
    { path: "profiles/my", component: ProfileEditorComponent }
];

app.routes.ts

import { provideRouter, RouterConfig } from "@angular/router";
...
import { profilesRoutes } from "./Profiles/profiles.routes";
...

const routes: RouterConfig= [
    ...profilesRoutes,
    { path: '', component: DashboardComponent }
];

export const appRouterProviders = [
    provideRouter(routes)
];

然而，在升级到RC5（包括RC6，RC7和Final）之后，NgModule文件的引入现在给我结构和代码，如

|--Profiles
|   |-- profiles.routes.ts
|   |-- profile-editor.component.ts
|
|-- OtherFolder...
|   |-- other.routes.ts
|   |-- other.component.ts
|
|-- app.module.ts
|-- app.component.ts
|-- app.routes.ts

profile.routes.ts

import { Routes } from "@angular/router";

import { ProfileEditorComponent } from "./profile-editor.component";

export const profilesRoutes: Routes= [
    { path: "profiles/my", component: ProfileEditorComponent }
];

app.routes.ts

import { Routes, RouterModule } from "@angular/router";
...
import { profilesRoutes } from "./Profiles/profiles.routes";
...

const routes: Routes= [
    ...profilesRoutes,
    { path: '', component: DashboardComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

app.module.ts

...
import { routing } from "./app.routes";
...
import { ProfileEditorComponent } from "./Profiles/profile-editor.component";
...

@NgModule({
    declarations: [
        AppComponent,
        ...
        ProfileEditorComponent,
        ...
    ],
    imports: [
        ...
        routing,
        ...
    ],
    ...
})
...

这就是事情破裂的地方。当我运行应用程序时，我得到以下异常

zone.js:344 Unhandled Promise rejection: Component ProfileEditorComponent is not part of any NgModule or the module has not been imported into your module

然而，如果我修改app.routes.ts以直接声明配置文件编辑器路由而不是使用profiles.routes.ts文件，则应用程序会加载而不会出错。

app.routes.ts （有效的修改版本）

import { Routes, RouterModule } from "@angular/router";
...
import { ProfileEditorComponent } from "./Profiles/profile-editor.component";
...

const routes: Routes= [
    { path: "profiles/my", component: ProfileEditorComponent },
    { path: '', component: DashboardComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

问题似乎是import { ProfileEditorComponent } from "..."陈述之间的不匹配。显然，如果一个导入（在app.module.ts中）使用"./Profiles/profile-editor.component"而另一个导入（在profile.routes.ts中）使用"./profile-editor.component"，则无法找到Component。< / p>

这看起来很奇怪，这可以用另一种方式证明。正如我所说，修改后的app.routes.ts可以直接使用import { ProfileEditorComponent }和Routes声明。但是，如果我然后更改路径中单个字母的大小写，那么与 app.module.ts完全匹配，则异常再次出现。

app.routes.ts （使用工作的修改版本 - 注意F中的大写./ProFiles/...）

import { Routes, RouterModule } from "@angular/router";
...
import { ProfileEditorComponent } from "./ProFiles/profile-editor.component";     // broken
...

const routes: Routes= [
    { path: "profiles/my", component: ProfileEditorComponent },
    { path: '', component: DashboardComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

区分大小写的路径检查中断Angular 2 TypeScript导入

0 个答案: