question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Routing with lazy-loaded modules from external npm module

See original GitHub issue
Overview of the issue

When we access the Routing section of our Angular app, the routing is not correctly shown. Does it support lazy-loaded modules in routing?

Operating System, Node.js, npm, compodoc version(s)
OS Node.JS NPM compodoc
Windows 10 9.5.0 5.6.0 1.0.7
Angular configuration, a package.json file in the root folder
packages.json
{
  "name": "autovu-portal-clientapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "pretest": "node ./src/testManager.js",
    "test": "ng test --sr -cc",
    "lint": "ng lint",
    "doc:build": "compodoc -p ./src/tsconfig.app.json -n \"PTMS Portal\"",
    "doc:serve": "compodoc -s",
    "doc": "compodoc -p ./src/tsconfig.app.json -s -n \"PTMS Portal\""
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/common": "^5.1.1",
    "@angular/compiler": "^5.1.1",
    "@angular/core": "^5.1.1",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.1.1",
    "@angular/platform-browser": "^5.1.1",
    "@angular/platform-browser-dynamic": "^5.1.1",
    "@angular/router": "^5.1.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "less": "^2.7.2",
    "lodash": "^4.17.4",
    "ng2-tooltip": "0.0.7",
    "ngx-clipboard": "9.1.1",
    "ngx-infinite-scroll": "^0.6.1",
    "oidc-client": "^1.3.0",
    "rxjs": "^5.5.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.4.1",
    "@angular/compiler-cli": "^5.1.1",
    "@types/jasmine": "^2.8.3",
    "@types/lodash": "^4.14.98",
    "@types/node": "~6.0.60",
    "babel-polyfill": "^6.9.1",
    "chai": "^4.1.1",
    "codelyzer": "^4.0.2",
    "compodoc": "0.0.41",
    "glob": "^7.1.2",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-trx-reporter": "^0.2.9",
    "ts-node": "^2.0.0",
    "tslint": "^5.8.0",
    "typescript": "~2.4.2"
  }
}
.angular-cli.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "autovu-portal-clientapp"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "webgrid/css/sc-icons.min.css",
        "webgrid/css/themes/theme-autovu-dark.min.css",
        "assets/styles.less"
      ],
      "scripts": [
		    "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
	  ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}
Compodoc installed globally or locally ?

Locally as a dev dependency in packages.json

Motivation for or Use Case

I think the analysis should automatically detect when the route children are lazy loaded.

Reproduce the error

Provide a route that loads the children from another module. In my application, I have:

const routes: Routes = [
  { path: '', canActivateChild: [AuthGuard], loadChildren: './portal/portal.module#PortalModule' },
  // other routes ommitted
];

The PortalModule imports PortalRoutingModule which has another set of routes:

const routes: Routes = [
  { 
    path: '', component: PortalComponent, children: [
      { path: 'principals', canActivateChild: [AdminGuard], loadChildren: '../principals/principals.module#PrincipalsModule' },
      { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule' },
      { path: '', pathMatch: 'full', redirectTo: 'dashboard' }
    ]
  }
];

As you can see, the initial routes also load other children modules. Right now, I see this in my generated documentation: image

Related issues

N/A

Suggest a Fix

Check the Reproduce error section 😄

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:21 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
attilacsanyicommented, May 17, 2018

Any deadline for this @vogloblinsky , cannot upgrade from 1.0.9 and version is already 1.1.3.

Still see this error as I sent several times Error: Could not find the node's symbol.

Thanks for the help.

0reactions
lock[bot]commented, Feb 8, 2020

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem. Why locking ? Having issues with the most up-to-date context.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular: How to use external module in lazy loaded routes
Try to create shared.module.ts and import all your components / modules you want in your app (common) into this one and then import...
Read more >
Lazy-loading feature modules - Angular
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. AppRoutingModule (excerpt)
Read more >
Angular Modules and NgModule - Complete Guide
Introduction to Angular NgModule, modularity, and lazy-loading in ... Feature Modules; Angular Modules And The Router; Lazy Loading a Module ...
Read more >
Code-Splitting - React
If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors...
Read more >
Angular Services, providedIn and Lazy Modules - | juri.dev
The router adds all of the providers from the root injector to the child injector. When the router creates a component within the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found