升级到 Angular 5 编译错误后



我将项目从 4.0.2 升级到最新的稳定版 Angular 5.0.0,这样,我也更新了所有其他依赖项。(我不确定我是否应该先升级到 4.4.6,让 Angular 项目与所有依赖项一起工作真的变得很痛苦:(()现在,当我运行ng serve时,出现以下错误:

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)

我查看了 Angular 5 更改日志,我没有看到我需要进行的任何更改。

我已经更新了所有依赖项。

我寻找错误,但没有找到太多关于它的信息。如果有人遇到类似的问题,请分享,并且升级角度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"
      }

我假设您正在尝试从路由配置中的 users/users.module.ts 延迟加载模块。

我看到了同样的问题。对我来说,从loadChildren路由配置中删除 .ts 扩展名解决了这个问题:

例如

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

成为:

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

我有同样的问题。我正在懒洋洋地加载模块。这工作正常,直到我尝试使用角度材质组件,其中一些存在兼容性问题。我将所有@angular依赖项升级到 5.0.0。现在我收到这个AOT错误。

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

奇怪的是,如果我注释路由中的最后 2 行,这些行懒惰地加载模块,我的项目运行良好。如果我取消注释,那么 webpack 可以很好地重新编译我的项目,并且一切也运行良好。

我无法弄清楚。

有人有解决这个问题的方法吗?

谢谢。迪帕克

最新更新