CODEWITHSUNDEEP
node.jsangularcommand-line-interfaceupgrade
Lahar Shah
Lahar Shah

Reputation: 7654

After upgrading to Angular 5 Compile error

I upgraded the project to latest stable Angular 5.0.0 from 4.0.2, With that, I updated all other dependencies as well. (I am not sure if I should first upgrade to 4.4.6, Making Angular project working along with all dependencies is really become pain :(( ) Now when I run ng serve I am getting following error: 

chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 2.4 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 853 kB [initial] [rendered]

ERROR in Error: Could not resolve module ./users/users.module.ts relative to /Users/username/Projects/project-name/src/app/routes/routes.module.ts
at StaticSymbolResolver.getSymbolByModule (/Users/username/Projects/project-name/node_modules/@angular/compiler/bundles/compiler.umd.js:31826:30)
at StaticReflector.resolveExternalReference (/Users/username/Projects/project-name/node_modules/@angular/compiler/bundles/compiler.umd.js:30292:62)
at parseLazyRoute (/Users/username/Projects/project-name/node_modules/@angular/compiler/bundles/compiler.umd.js:28577:55)
at listLazyRoutes (/Users/username/Projects/project-name/node_modules/@angular/compiler/bundles/compiler.umd.js:28539:36)
at visitLazyRoute (/Users/username/Projects/project-name/node_modules/@angular/compiler/bundles/compiler.umd.js:29937:47)
at AotCompiler.listLazyRoutes (/Users/username/Projects/project-name/node_modules/@angular/compiler/bundles/compiler.umd.js:29905:20)
at AngularCompilerProgram.listLazyRoutes (/Users/username/Projects/project-name/node_modules/@angular/compiler-cli/src/transformers/program.js:157:30)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/username/Projects/project-name/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
at AngularCompilerPlugin._getLazyRoutesFromNgtools (/Users/username/Projects/project-name/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:246:66)
at Promise.resolve.then.then (/Users/username/Projects/project-name/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:542:50)
at process._tickCallback (internal/process/next_tick.js:109:7)

I looked into the Angular 5 change log, I don't see any change I need to make.

I have already updated all dependencies.

I looked for the error but didn't find much about it. Please share if any one run into similar issue and there is any better solution for upgrading angular 5.0.0

  "dependencies": {
        "@agm/core": "^1.0.0-beta.2",
        "@angular/animations": "^5.0.0",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/core": "^5.0.0",
        "@angular/forms": "^5.0.0",
        "@angular/http": "^5.0.0",
        "@angular/platform-browser": "^5.0.0",
        "@angular/platform-browser-dynamic": "^5.0.0",
        "@angular/platform-server": "^5.0.0",
        "@angular/router": "^5.0.0",
        "@asymmetrik/ngx-leaflet": "^2.5.1",
        "@ngx-translate/core": "^8.0.0",
        "@ngx-translate/http-loader": "2.0.0",
        "@toverux/ngsweetalert2": "^2.0.1",
        "@types/leaflet": "^1.2.1",
        "ag-grid": "^14.0.1",
        "ag-grid-angular": "^14.0.0",
        "angular-2-dropdown-multiselect": "^1.6.0",
        "angular-tree-component": "^5.1.2",
        "angular2-datatable": "^0.6.0",
        "angular2-jwt": "^0.2.3",
        "angular2-text-mask": "^8.0.0",
        "angular2-toaster": "^4.0.1",
        "bootstrap": "^3.3.7",
        "chart.js": "^2.5.0",
        "classlist.js": "^1.1.20150312",
        "codemirror": "5.31.0",
        "core-js": "2.5.1",
        "easy-pie-chart": "2.1.7",
        "flot": "flot/flot#v0.8.3",
        "font-awesome": "4.7.0",
        "fullcalendar": "3.6.2",
        "intl": "1.2.5",
        "jqcloud2": "2.0.3",
        "jquery": "3.2.1",
        "jquery-slimscroll": "1.3.8",
        "jquery-sparkline": "2.4.0",
        "jquery.browser": "0.1.0",
        "jquery.flot.tooltip": "github:krzysu/flot.tooltip",
        "leaflet": "^1.2.0",
        "lodash": "4.17.4",
        "modernizr": "3.5.0",
        "moment": "2.19.1",
        "ng2-charts": "1.6.0",
        "ng2-dnd": "4.2.0",
        "ng2-file-upload": "1.2.1",
        "ng2-img-cropper": "0.9.0",
        "ng2-select": "1.2.0",
        "ng2-table": "1.3.2",
        "ng2-tag-input": "1.4.1",
        "ng2-validation": "4.2.0",
        "ngx-bootstrap": "^2.0.0-beta.8",
        "ngx-color-picker": "4.5.0",
        "ngx-infinite-scroll": "0.6.1",
        "node-sass": "^4.6.0",
        "rxjs": "^5.5.0",
        "screenfull": "3.3.2",
        "simple-line-icons": "2.4.1",
        "spinkit": "1.2.5",
        "summernote": "0.8.8",
        "sweetalert": "2.0.8",
        "sweetalert2": "^6.11.2",
        "ts-helpers": "1.1.2",
        "tslib": "^1.8.0",
        "weather-icons": "github:erikflowers/weather-icons",
        "web-animations-js": "2.3.1",
        "webpack": "^3.8.1",
        "zone.js": "0.8.18"
      },  


"devDependencies": {
        "@angular/cli": "^1.3.1",
        "@angular/compiler-cli": "^5.0.0",
        "@types/codemirror": "0.0.50",
        "@types/jasmine": "2.6.3",
        "@types/lodash": "4.14.82",
        "@types/node": "8.0.49",
        "codelyzer": "4.0.1",
        "jasmine-core": "2.8.0",
        "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-read-json": "1.1.0",
        "loaders.css": "0.1.2",
        "napa": "3.0.0",
        "protractor": "5.2.0",
        "ts-node": "3.3.0",
        "tslint": "5.8.0",
        "typescript": "2.4.2",
        "uglifyjs-webpack-plugin": "^1.0.1",
        "webdriver-manager": "12.0.6"
      }

Upvotes: 2

Views: 1097

Answers (2)

Deepak Pathak
Deepak Pathak

Reputation: 646

I have the same issue. I am lazily loading modules. This was working fine, until I tried to use Angular Material components, some of which had compatibility issues. I upgraded all my @angular dependencies to 5.0.0. Now I get this AOT error. 

const appRoutes: Routes = [
    { path: "**", component: NotFound404, pathMatch: 'full' },
     { path: 'expense', loadChildren: 'src/expense/expense.module#ExpenseModule' },
    { path: 'user', loadChildren: 'src/user/user.module#UserModule' }
];

The strange thing is if I comment the last 2 lines in my routes, which are loading the modules lazily, my project runs fine. If I uncomment, then webpack recompiles my project fine and everything runs fine too.

I am not able to figure it out.

Any one have solution to this problem?

Thanks. Deepak

Upvotes: 0

Robin Summerhill
Robin Summerhill

Reputation: 13675

I'm assuming that you are trying to lazy-load a module from users/users.module.ts in your routing config.

I was seeing the same issue. For me, removing the .ts extension from the loadChildren route config solved the problem:

e.g.

 { path: 'main', loadChildren: 'app/main/index.ts#MainModule'}

Becomes:

 { path: 'main', loadChildren: 'app/main/index#MainModule'}

Upvotes: 2

Related Questions