我需要关于一个问题的帮助,这个问题我无法解决。 我正在学习 Angular 7 库,以将模块化添加到我的应用程序中,但是当我将库安装在应用程序中时,库中定义的模块路由似乎不起作用。
我已经创建了一个项目在 Github 上重新现了这个问题:
测试库 foo-lib
外部应用程序foo-tester
在每个 ReadMe 文件中,我都描述了如何再现此问题。
我创建了一个示例库 (foo-lib) 和其路由模块,其中定义了子路由,然后在同一工作区中的简单应用程序中进行了构建和测试。 所有东西都正常工作,库路由正确地添加到测试应用程序中。 在下一步中,我通过 npm link 命令将已构建的库导出并包含到另一个工作区的示例应用程序中,并在该应用程序上运行 ng serve 命令。 使用此配置,如果尝试获取库路由路径,则会收到错误,就好像它们没有添加到主路由模块中一样。
Foo-lib-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './components/main/main.component';
import { NewFooCmpComponent } from './components/new-foo-cmp/new-foo-cmp.component';
const UP_ROUTES: Routes = [
{ path: 'main_path', component: MainComponent,
children: [
{ path: 'child', component: NewFooCmpComponent }
]
}
];
@NgModule({
imports: [RouterModule.forChild(UP_ROUTES)],
exports: [RouterModule]
})
export class FooLibRoutingModule { }
Foo-lib.module.ts
import { NgModule } from '@angular/core';
import { FooLibRoutingModule } from './foo-lib-routing.module';
import { MainComponent } from './components/main/main.component';
import { FooLibComponent } from './foo-lib.component';
import { NewFooCmpComponent } from './components/new-foo-cmp/new-foo-cmp.component';
@NgModule({
declarations: [
MainComponent,
FooLibComponent,
NewFooCmpComponent],
imports: [
FooLibRoutingModule
],
exports: [
FooLibComponent,
NewFooCmpComponent]
})
export class FooLibModule { }
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RoutingModule } from './routing.module';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { FooLibModule } from '@foo/lib';
@NgModule({
declarations: [
AppComponent,
WelcomeComponent,
NotFoundComponent
],
imports: [
BrowserModule,
RoutingModule,
FooLibModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
路由模块。module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
const APP_ROUTES: Routes = [
{ path: 'welcome', component: WelcomeComponent },
{ path: 'notfound', component: NotFoundComponent },
{ path: '', redirectTo: '/welcome', pathMatch: 'full' },
];
/**
* Main client routing configuration module
*/
@NgModule({
imports: [ RouterModule.forRoot(APP_ROUTES) ],
exports: [ RouterModule ]
})
export class RoutingModule {}
尝试访问 library 路由时,在控制台中显示错误。
core.js:15714 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main_path/child'
Error: Cannot match any routes. URL Segment: 'main_path/child'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
ERROR 错误:StaticInjectorError(AppModule)[RouterLinkActive -> Router]: StaticInjectorError(Platform:core)[RouterLinkActive -> Router]: NullInjectorError:没有Router的提供者!
- rvt