I have looked at all the SO questions about this already, and still can't figure it out.
I'm preloading a module, and I'm getting the error:
ERROR Error: Uncaught (in promise): Error: Cannot find module './results/results.module' Error: Cannot find module './results/results.module' at :4200/main.js:48:11 [angular]
I've triple checked the spelling, and even made a small app to try and recreate it, but it works perfectly, I'm not sure what I'm doing wrong. Unfortunately I cannot post a live example for confidentiality.
AppRoutingModule
import { NgModule } from '@angular/core';
import { PlanComponent } from 'app/plan/plan.component';
import { MaintenanceComponent } from './maintenance/maintenance/maintenance.component';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
const appRoutes: Routes = [
{ path: '', redirectTo: '/plan', pathMatch: 'full' },
{ path: 'plan', component: PlanComponent },
{ path: 'maintenance', component: MaintenanceComponent },
// this is the failing module
{ path: 'results', loadChildren: './results/results.module#ResultsModule' },
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, {
preloadingStrategy: PreloadAllModules
})
],
exports: [RouterModule]
})
export class AppRoutingModule {}
AppModule
import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from 'app/app-routing.module';
... other components not including the lazy loaded module
...
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
SharedModule.forRoot(),
MaintenanceModule
]
...
Preloaded Routing Module
import { NgModule } from '@angular/core';
... component imports
import { Routes, RouterModule } from '@angular/router';
const resultsRoutes: Routes = [
{
path: '', component: ResultsComponent, children: [
{ path: 'featurechild', component: featureChildComponent }
]
},
];
@NgModule({
imports: [
RouterModule.forChild(resultsRoutes)
],
exports: [RouterModule]
})
export class ResultsRoutingModule {}
Preloaded Module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
... other component imports
import { ResultsRoutingModule } from './results-routing.module';
...
imports: [
CommonModule,
ResultsRoutingModule,
FormsModule,
SharedModule,
...
export class ResultsModule {}
package.json
{
"name": "gui",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --deploy-url=/huskies",
"build": "ng build --dev --deploy-url=/huskies",
"prod": "ng build --prod --deploy-url=/huskies",
"test": "ng test",
"lint": "ng lint",
"pree2e": "webdriver-manager update --standalone false --gecko false --ignore_ssl",
"e2e": "ng e2e -uw fal"
},
"private": true,
"dependencies": {
"@angular/animations": "^7.0.2",
"@angular/common": "^7.0.3",
"@angular/compiler": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/forms": "^7.0.3",
"@angular/http": "^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",
"cesium": "^1.43.0",
"core-js": "^2.5.7",
"enhanced-resolve": "^3.4.1",
"ng-event-source": "^1.0.14",
"rxjs": "^6.3.3",
"three": "^0.87.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.5",
"@angular/cli": "^7.0.4",
"@angular/compiler-cli": "^7.0.2",
"@angular/language-service": "^7.0.2",
"@types/jasmine": "^2.8.9",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^10.12.2",
"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": "^1.3.0",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "^5.4.1",
"rxjs-tslint": "^0.1.5",
"ts-node": "~3.3.0",
"tslint": "^5.11.0",
"typescript": "^3.1.6"
}
}
folder structure (everything is in the root app directory):
results/results.module.ts
results/results-routing.module.ts
app.module.ts
app-routing.module.ts
Sometime ng doesn't detect some reason.
Can you run the command again
ng serve
If you are running through npm
command then
npm start
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.