angular: Angular upgrade to version 7 lazy loaded module cannot be found

Bug, feature request, or proposal: After upgrading to angular 7, I received an error saying that the after login module is not being found to be loaded lazily.

What is the expected behavior?

To upgrade to angular 7 without changing anything in codes and scripts regarding module and routing files.

What is the current behavior?

Error at the console after clicking on Login, that the module is not found, despite that it was working in the previous version (Angular 6).

What are the steps to reproduce?

https://stackblitz.com/edit/angular-7-lazy-loading-soshba

Is there anything else we should know?

UPDATE On my question

I have added "BaseUrl": "./", to tsconfig.app.json and I got the following error:

error TS5023: Unknown compiler option ‘BaseUrl’.

I think they mean in tsconfig.json and the baseUrl already added in.

END of Update

I updated my angular project to angular 7 using the following commands:

npm install @angular/animations@latest @angular/common@latest
    @angular/compiler@latest @angular/core@latest @angular/forms@latest 
    @angular/http@latest @angular/platform-browser@latest 
    @angular/platform-browser-dynamic@latest 
    @angular/platform-server@latest 
    @angular/router@latest --save

And:

npm install @angular-devkit/build-angular@latest 
@angular/compiler-cli@latest 
@angular/cli@latest 
@angular/language-service@latest --save-dev

And:

npm install core-js@latest zone.js@latest --save

And:

npm install @types/jasmine@latest @types/node@latest 
codelyzer@latest karma@latest karma-chrome-launcher@latest 
karma-cli@latest karma-jasmine@latest 
karma-jasmine-html-reporter@latest 
jasmine-core@latest jasmine-spec-reporter@latest 
protractor@latest tslint@latest --save-dev

And:

npm install typescript@latest --save-dev
npm install rxjs@latest rxjs-compat@latest --save

npm install rxjs-tslint@latest --save-dev

The resulting package.json is:

{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.0.3",
    "@angular/material-moment-adapter": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/platform-server": "^7.0.3",
    "@angular/router": "^7.0.3",
    "angularx-qrcode": "^1.2.4",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-alpha.12",
    "jspdf": "^1.4.1",
    "moment": "^2.22.2",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "tether": "^1.4.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.10.5",
    "@angular/cli": "^7.0.5",
    "@angular/compiler-cli": "^7.0.3",
    "@angular/language-service": "^7.0.3",
    "@types/jasmine": "^2.8.11",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.12.3",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.1",
    "rxjs-tslint": "^0.1.5",
    "ts-node": "~5.0.1",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6",
    "webpack": "^4.25.1"
  }
}

On ng serve --port=8000 I am getting the following error:

core.js:12584 ERROR Error: Uncaught (in promise): Error: Cannot find module ‘…/app/dashboard/dashboard.module’ Error: Cannot find module ‘…/app/dashboard/dashboard.module’ at $_lazy_route_resource lazy namespace object:5 at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:14143) at

It was working when I was using Angular 6, and i received it only after upgrading.

I tried the solution mentioned on github:

Efectively, there are three posible solutions:

a) Using relative path loadChildren: './…

b) Using absolute path starting with loadChildren: 'src/app/…

c) tsconfig.app.json --> BaseUrl: “./”

And neither of them worked for me.

Here is my startup routing file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path:'',
    component: LoginComponent
  },
  {
    path: 'forgot',
    component: ForgotPasswordComponent
    //canActivate: [AuthGuardService]
  },
  {
    path:'dashboard',
    loadChildren: './app/dashboard/dashboard.module#DashboardModule'
    
  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Am I missing an upgrade or Angular 7 implies us to change routing urls for a specific new form?

Quoting another solution from the github answer which assume that the problem is from the form of baseUrl:

@filipesilva I saw your commit angular/devkit@33af719 The property has moved from tsconfig.app.json to src/tsconfig.json file, but not it’s value ./, therefore newly generated v6 apps by CLI wont be able to find lazy load modules with paths defined as lazy load documentation.

I suggest this change. It preserves baseUrl: “./” on tsconfig.json and each project have its tsconfig.app.json that overwrites baseUrl property. I hope this is aligned with the multiprojects approach and tooling.

If you prefere to use relative url for loadChildren, It should be updated on documentation and tutorial.