typescript - Angular-biblioteksroutemodul fungerar inte när den importeras i applikationen

Jag behöver hjälp med ett problem som jag inte kan lösa. Jag studerar Angular 7-bibliotek för att lägga till modularisering i min applikation, men modulrutter som definieras i biblioteket verkar inte fungera när de installeras i en applikation.

Jag har skapat ett projekt på GitHub för att reproducera problemet:
Bibliotekstest foo-lib
Extern applikation foo-tester

I varje ReadMe-fil har jag beskrivit hur man reproducerar detta problem.

Jag har skapat ett exempelbibliotek (foo-lib) med dess routingmodul där en barnrutt är definierad, sedan byggde och testade jag det i en enkel applikation i samma arbetsyta. Allt fungerade bra, och bibliotekets routing är korrekt tillagd i testapplikationen. I nästa steg exporterade jag det byggda biblioteket och inkluderade det i ett annat applikationsexempel i en annan arbetsyta med kommandot npm link, och körde kommandot ng serve på denna app. Med denna konfiguration fick jag ett fel när jag försökte nå bibliotekets ruttvägar, som om de inte hade lagts till i huvudruttmodulen.

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.modul.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 { }

routing.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 {}

Fel visas i konsolen när man försöker navigera till biblioteksvägen

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)

Svar #1

Slutligen har jag hittat en lösning. Jag beskriver den nedan för att hjälpa communityn. I detta scenario behöver vi lägga till alternativet "preserveSymlinks": true i byggavsnittet i huvudapplikationens angular.json, den som importerade det externa biblioteket med npm link-kommandot.

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "preserveSymlinks": true,

Krediter filipesilva på angular-cli problem

Hoppas detta kan hjälpa någon annan i framtiden.

Tack

Svar #2

Jag har ett Angular 11-projekt och jag åtgärdade detta fel. Jag aktiverade enableIvy i angularCompilerOptions i tsconfig.lib.prod.json och jag har byggt med --prod.

  "angularCompilerOptions": {
    "enableIvy": true
  }

Relaterade artiklar