Angular 5にアップグレードした後でコンパイルエラー

Question

私は4.0.2から最新の安定したAngular 5.0.0にプロジェクトをアップグレードしました。それで、他のすべての依存関係も更新しました。 （私はすべての依存関係と一緒に働いて角度のプロジェクトが本当に苦痛となっている作り、私が最初に4.4.6にアップグレードする必要があるかどうかわからないです。（私は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 change logに見て、私は私が行うために必要なすべての変更が表示されません。

私はすでにすべての依存関係を更新しました。

私は、エラーを探しましたが、それについて多くを見つけることができませんでした。共有してください。いずれかが同様の問題に遭遇した場合は、upgradiのためのより良い解決策がありますngの角度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" 
     } 

Answer 1

私はあなたがあなたのルーティングの設定で怠惰な負荷へのユーザー/ users.module.tsからモジュールをしようとしていると仮定しています。

私は同じ問題を抱えていました。私にとって、loadChildrenルート設定から.ts拡張子を削除すると、問題が解決しました。

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

は次のようになります。

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

Answer 2

私は同じ問題を持っています。私は遅延ロードモジュールです。 Angular Materialコンポーネントを使用しようとするまで、これはうまくいきましたが、その中には互換性の問題がありました。すべての@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は自分のプロジェクトを再コンパイルし、すべてが正常に実行されます。

私はそれを理解することができません。

この問題を解決する方法はありますか？

ありがとうございました。 Deepak