Возникает ошибка (@angular/material/esm5/tabs.es5.js) при выполнении команды ng serve?

Question

[Kentaro23]

Добрый день! При запуске проекта возникает ошибка выполнял команды npm install и ng serve ниже trace и файл packaje.json. Просьба помочь.

"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 MaterialModule in D:/study_project/bookstore-angular/admin-portal/sr
c/app/material.module.ts, resolving symbol MaterialModule in 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/deeppurple-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

Comments

[Ivan Stroykin]

Проект откуда-то клонирован или Ваш?

[Kentaro23]

Иван Стройкин, Проект клонирован это учебный проект.

[Ivan Stroykin]

Kentaro23, Если учебный, можете скинуть ссылку откуда его взять? Тут просто при решении одной проблемы могут показаться другие, чтобы сразу глянуть

[Kentaro23]

Иван Стройкин, Вот этот курс https://www.udemy.com/build-angular-2-complete-e-c... Исходники могу скинуть куда-нибудь куда удобно, так-как он там стоит 15 баксов.

[Ivan Stroykin]

Kentaro23, На любой облачный диск

[Kentaro23]

Иван Стройкин,
Иван Стройкин, Приложил ссылки на весь проект и на урок первый. Первый урок тоже не запускается вылетают ошибки которые я описал.
https://yadi.sk/d/v9F8YAVW3QYCmG
https://yadi.sk/d/BMVEHnIU3QYCmW

Answer 1

[Ivan Stroykin]

Kentaro23, так, первым открыл какой-то "admin-portal". В package.json везде проставлено устанавливать последнюю версию, а вот @angular/cli стоял фиксированный, да еще и RC версия. Он просто не знал, что делать с 5-ой версией Angular. Вообще советую ставить фиксированные версии, тогда разработка будет более защищенной, особенно при коллективной разработке. После, можно смотреть на обновление версий, используя команду: npm outdate, пробовать обновиться.

Плюс ко всему, в app.module.ts импортировался MaterialModule:

import { MaterialModule } from '@angular/material';

Данный модуль был вырезан в последних версиях Angular Material. Теперь каждый отдельный модуль нужно подключать отдельно, то есть вот так:

import {
MatInputModule, MatRadioModule, ...
} from '@angular/material';

Это было сделано, чтобы не нести в проект лишние, не используемые, модули.

В styles.css импортировалась тема материального дизайна:

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

А должно подключаться так:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Вот ссылка на инструкцию по началу использования Angular material
И ссылка на использование тем

Comments

[Kentaro23]

Спасибо большое) Попробую выставить фиксированные версии чтоб можно было пройти курс, вот тока бы узнать с какими версиями заработает проект.

[Ivan Stroykin]

Kentaro23, а что за курс? По Angular Material? Просто они где-то с месяц назад вышли в RC, то есть вот только устаканилось API и прочее. И вот недавно вышли в релиз. То есть все уроки старше месяца по Angular Material автоматически становятся устаревшими.
По всей сути, офф. сайт самая лучшая инструкция :)

[Kentaro23]

Иван Стройкин, Интеренет магазин на Ангуляр и Spring Boot. Курс в апреле вышел, а как можно сделать на версии material которые использованы в курсе или уже не получится?

[Ivan Stroykin]

Kentaro23, можно пройти, скинув все версии на те, что были в курсе. Но лучше всего пробовать на самых последних версиях. Все же стабильное API и для Вас будет намного полезнее. С той версии, что используется в курсе, на сегодняшний день было устранено уже более 200 багов и много прочих дополнительных изменений, ввод новых компонентов и и.д.