问题
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.
来源：https://stackoverflow.com/questions/53221592/angular-6-to-7-upgrade-resulting-an-error-of-missing-startup-module-using-lazy-l