Scully: ScanRoutes

Created on 15 May 2020  路  4Comments  路  Source: scullyio/scully

馃悶 Bug report

We encountered a problem while reading the routes from your applications source.
This might happen when there are lazy-loaded routes, that are not loaded,
Or when there are paths we can not resolve statically.
Check the routes in your app, rebuild and retry.

Description

I just added Scully to my application but when trying to scan new routes I am getting this error even if the Home Routing Module is only declared in the Home Module.

馃敩 Minimal Reproduction

  • Scully simple setup with a Custom plugin for detecting Routes

app.routing.modules.ts




    {
        path: ':langNcountry/home',
        loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
        canActivate: [LanguageNCountryGuard],
    },
    {
        path: ':langNcountry/blog',
        loadChildren: () => import('./blog/blog.module').then((m) => m.BlogModule),
        canActivate: [LanguageNCountryGuard],
    },
    {
        path: ':langNcountry/corporate',
        loadChildren: () => import('./corporate/corporate.module').then((m) => m.CorporateModule),
        canActivate: [LanguageNCountryGuard],
    },
    {
        path: '**',
        redirectTo: `${defLangNCountry}/home`,
    }

馃捇Your Environment

Angular Version:




Angular CLI: 9.1.4
Node: 12.5.0
OS: darwin x64

Angular: 9.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.4
@angular-devkit/build-angular     0.901.4
@angular-devkit/build-optimizer   0.901.4
@angular-devkit/build-webpack     0.901.4
@angular-devkit/core              9.1.4
@angular-devkit/schematics        9.1.4
@angular/cdk                      9.2.3
@angular/material                 9.2.1
@angular/service-worker           9.1.6
@ngtools/webpack                  9.1.4
@schematics/angular               9.1.4
@schematics/update                0.901.4
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.43.0

Scully Version:




"@scullyio/init": "0.0.26",
"@scullyio/ng-lib": "latest",
"@scullyio/scully": "latest",

馃敟 Exception or Error




Error: Module home-routing.module.ts belongs to more than one module app.module.ts, home.module.ts
question

Most helpful comment

Hi,

Don't want to reopen it but it may help someone. The issue was not coming from the plugin but from my Angular Project:

Use Case:

AppModule

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';

// Modules
import { SharedModule } from '@shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { HomeModule } from './home/home.module';

// Components
import { AppComponent } from './app.component';

// Guards
import { LanguageNCountryGuard } from '@guards/language-n-country.guard';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        AppRoutingModule,
        HomeModule,
        RouterModule,
        SharedModule,
    ],
    providers: [LanguageNCountryGuard],
})
export class AppModule {}

SharedModule

import { CommonModule } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

// PIPES
import { SafePipe } from '@shared/pipes/safe.pipe';

// INTERCEPTORS
import { HttpErrorInterceptor } from '@interceptors/http-error.interceptor';

@NgModule({
    declarations: [SafePipe],
    imports: [
        RouterModule,
    ],
    exports: [],
    providers: [],
})
export class SharedModule {}

HomeModule

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { SharedModule } from '@shared/shared.module';
import { HomeRoutingModule } from './home-routing.module';

import { HomeComponent } from './home.component';
import { HomebaseComponent } from './homebase/homebase.component';

@NgModule({
    declarations: [HomeComponent, HomebaseComponent],
    imports: [
        HomeRoutingModule,
        RouterModule,
        SharedModule,
    ],
})
export class HomeModule {}

As we can see I have imported:

  • HomeModule and SharedModule inside AppModule
  • SharedModule inside HomeModule

The fix that I have done to remove the error when scanning the route was to remove the import of HomeModule inside AppModule as it was not necessary.

New AppModule

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';

// Modules
import { SharedModule } from '@shared/shared.module';
import { AppRoutingModule } from './app-routing.module';

// Components
import { AppComponent } from './app.component';

// Guards
import { LanguageNCountryGuard } from '@guards/language-n-country.guard';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        AppRoutingModule,
        RouterModule,
        SharedModule,
    ],
    providers: [LanguageNCountryGuard],
})
export class AppModule {}

Thank you for your help!

All 4 comments

I can't reproduce your issue. This works already in a lot of projects.
Can you provide a reproduction of the issue?

I'm going to close this as there is no added actionable data anymore.
When you still have problems, please add it in here and we can reopen.

Hi,

Don't want to reopen it but it may help someone. The issue was not coming from the plugin but from my Angular Project:

Use Case:

AppModule

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';

// Modules
import { SharedModule } from '@shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { HomeModule } from './home/home.module';

// Components
import { AppComponent } from './app.component';

// Guards
import { LanguageNCountryGuard } from '@guards/language-n-country.guard';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        AppRoutingModule,
        HomeModule,
        RouterModule,
        SharedModule,
    ],
    providers: [LanguageNCountryGuard],
})
export class AppModule {}

SharedModule

import { CommonModule } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

// PIPES
import { SafePipe } from '@shared/pipes/safe.pipe';

// INTERCEPTORS
import { HttpErrorInterceptor } from '@interceptors/http-error.interceptor';

@NgModule({
    declarations: [SafePipe],
    imports: [
        RouterModule,
    ],
    exports: [],
    providers: [],
})
export class SharedModule {}

HomeModule

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { SharedModule } from '@shared/shared.module';
import { HomeRoutingModule } from './home-routing.module';

import { HomeComponent } from './home.component';
import { HomebaseComponent } from './homebase/homebase.component';

@NgModule({
    declarations: [HomeComponent, HomebaseComponent],
    imports: [
        HomeRoutingModule,
        RouterModule,
        SharedModule,
    ],
})
export class HomeModule {}

As we can see I have imported:

  • HomeModule and SharedModule inside AppModule
  • SharedModule inside HomeModule

The fix that I have done to remove the error when scanning the route was to remove the import of HomeModule inside AppModule as it was not necessary.

New AppModule

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';

// Modules
import { SharedModule } from '@shared/shared.module';
import { AppRoutingModule } from './app-routing.module';

// Components
import { AppComponent } from './app.component';

// Guards
import { LanguageNCountryGuard } from '@guards/language-n-country.guard';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        AppRoutingModule,
        RouterModule,
        SharedModule,
    ],
    providers: [LanguageNCountryGuard],
})
export class AppModule {}

Thank you for your help!

@pierresigwalt Thanks for sharing,

Was this page helpful?
0 / 5 - 0 ratings