编译Angular项目时出错

时间：2018-01-16 08:02:53

标签： node.js angular npm angular-cli

我是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

任何人请帮助我在网上搜索了很多解决方案，但我无法获得解决方案。我想要的东西需要安装。

2 个答案:

答案 0 :(得分：0)

错误非常自我解释：

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

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

解决这个问题：

  • 检查文件是否实际存在
  • 如果没有，请使用npm install
    • 重新安装软件包
  • 如果有，请检查提供的路径是否正确
  • 检查文件扩展名

答案 1 :(得分：0)

我认为这是因为他们试图将.css文件导入main.scss文件中的.scss文件。他们似乎已遵循指南here

您可以从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"
]
相关问题
最新问题