編譯Angular Project時出錯

Question

我是Angular的新手，正在嘗試建立一個項目。在編譯一個angular項目時遇到一個奇怪的錯誤。我浪費了很多時間試圖找到解決方案。任何人都可以幫忙。 我正在使用以下版本：

Angular CLI: 1.6.4
Node: 8.9.4
OS: linux x64
Angular: 4.3.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.11
@angular/cli: 1.6.4
@angular/material: 2.0.0-beta.11
@angular/service-worker: 1.0.0-beta.16
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.3.4
webpack-bundle-analyzer: 2.9.0
webpack: error

以下是錯誤：

    ERROR in ./src/app/feed/feed.component.scss
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/home/praveen/loklak_search/src/app/feed'
    at onError (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/praveen/loklak_search/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/app/feed/feed.component.ts 144:17-49
 @ ./src/app/feed/feed.module.ts
 @ ./src/$$_gendir lazy
 @ ./node_modules/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/app/feed/feed-header/feed-header.component.scss
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/home/praveen/loklak_search/src/app/feed/feed-header'
    at onError (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/praveen/loklak_search/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/app/feed/feed-header/feed-header.component.ts 83:17-56
 @ ./src/app/feed/feed.module.ts
 @ ./src/$$_gendir lazy
 @ ./node_modules/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/app/home/home.component.scss
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/home/praveen/loklak_search/src/app/home'
    at onError (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/praveen/loklak_search/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/app/home/home.component.ts 90:17-49
 @ ./src/app/home/home.module.ts
 @ ./src/$$_gendir lazy
 @ ./node_modules/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/@angular/cli/node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles/main.scss
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/home/praveen/loklak_search/src/styles'
    at onError (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/praveen/loklak_search/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/styles/main.scss 4:14-224
 @ multi ./src/styles/main.scss

任何人都可以幫助我，我在網上搜索了很多解決方案，但找不到解決方案。這是我所缺少的，需要安裝。

Answer 1

該錯誤很容易說明：

ERROR in ./src/app/feed/feed.component.scss
Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in ['...']

這意味着找不到您的CSS文件。

要解決這個問題：

• 檢查文件實際上在這里
• 如果沒有，請使用npm install重新安裝軟件包
• 如果存在，請檢查提供的路徑是否正確
• 檢查文件擴展名

Answer 2

我認為這是因為他們正在嘗試將.css文件導入到main.scss文件內的.scss文件中。 看來他們已遵循這里的指南

您可以從main.scss中刪除此引用

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

並將其添加到angular-cli.json中的styles屬性下，如下所示：

"styles": [
    "styles/main.scss",
    "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]