Error (@angular/material/esm5/tabs.es5.js) when you run the command ng serve?

Good day! When you run the project an error occurs execute commands npm install and ng serve below trace file packaje.json. Please help.

"dependencies": {
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "^2.4.10",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "^3.4.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angular/cli": "1.0.0-rc.1",
"@angular/compiler-cli": "^2.4.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.0.0"

ERROR in Metadata version mismatch for module D:/study_project/bookstore-angular/admin-portal/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol in MaterialModule D:/study_project/bookstore-angular/admin-portal/sr
c/app/material.module.ts, resolving symbol in MaterialModule D:/study_project/bookstore-angular/admin-portal/src/app/material.module.ts

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./src/styles.css
Module not found: Error: Can't resolve '@angular/material/core/theming/prebuilt/sunsetorange-amber.css' in 'D:\study_project\bookstore-angular\admin-portal\src'
@ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./src/styles.css 3:10-201
@ ./src/styles.css
@ multi ./src/styles.css

ERROR in ./~/@angular/material/esm5/form-field.es5.js
Module not found: Error: Can't resolve '@angular/animations' in 'D:\study_project\bookstore-angular\admin-portal\node_modules\@angular\material\esm5'
@ ./~/@angular/material/esm5/form-field.es5.js 11:0-81
@ ./~/@angular/material/esm5/material.es5.js
@ ./src/app/material.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?localhost:4200 ./src/main.ts

ERROR in ./~/@angular/material/esm5/dialog.es5.js
Module not found: Error: Can't resolve '@angular/animations' in 'D:\study_project\bookstore-angular\admin-portal\node_modules\@angular\material\esm5'
@ ./~/@angular/material/esm5/dialog.es5.js 23:0-81
@ ./~/@angular/material/esm5/material.es5.js
@ ./src/app/material.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?localhost:4200 ./src/main.ts
June 10th 19 at 16:00
1 answer
June 10th 19 at 16:02
Solution
so, first discovered some "admin-portal". In package.json everywhere affixed to install the latest version, but @angular/cli stood fixed, but still RC version. He just didn't know what to do with the 5th version of Angular. In General, I advise to put the fixed version, then development will be more secure, especially when the collective development. After, you can look at updating the versions using the command: npm outdate, try to be updated.

Plus, in the app.module.ts imported MaterialModule:
import { MaterialModule } from '@angular/material';
This module was cut in the latest versions of Angular Material. Now each individual module is necessary to connect separately, i.e. like this:
import {
MatInputModule, MatRadioModule, ...
} from '@angular/material';
This was done in order not to incur in project extra, not used modules.

In styles.css imported theme material design:
@import '~@angular/material/core/theming/prebuilt/sunsetorange-amber.css';
And should be connected like this:
@import '~@angular/material/prebuilt-themes/sunsetorange-amber.css';

Here is the link for the manual start using Angular material
And the link to use the
Thank you very much) Try to put the fixed version so you can take a course, here are the current to find out which versions will work on the project. - Dorothy_Lehn commented on June 10th 19 at 16:05
and what is the course? For Angular Material? They're just about a month ago, it went to RC, so only stable API and so on. And recently released. That is all the lessons over months for Angular Material will automatically become obsolete.
Throughout the fact, off. website the best guide :) - Fay32 commented on June 10th 19 at 16:08
The Internet shop on Angular and Spring Boot. Exchange rate in April came out, and how can you make on version of the material which are used in the course or will not happen? - Dorothy_Lehn commented on June 10th 19 at 16:11
you can pass off all versions for those that were aware of. But it is best to try on the most recent versions. Still a stable API and You will be much more useful. With the version that is used in the course to date was already fixed more than 200 bugs and a lot of other additional changes, the introduction of new components and I. D. - Fay32 commented on June 10th 19 at 16:14

Find more questions by tags TypeScriptMaterial Design