堆栈内存溢出
  简体   繁体   English

编译Angular Project时出错

[英]Error while compiling Angular Project

 原文  2018-01-16 08:02:53  0   2    node.js/ angular/ npm/ angular-cli

问题描述

I am new to Angular and I am trying to build a project.I am getting a weird error while compiling an angular project.I have wasted a lot of time trying to find a solution.Can anyone please help. 我是Angular的新手，正在尝试建立一个项目。在编译一个angular项目时遇到一个奇怪的错误。我浪费了很多时间试图找到解决方案。任何人都可以帮忙。 I am using following versions: 我正在使用以下版本： 

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

Following is 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

Anyone please help I have searched a lot for solutions online but nowhere I am getting the solution.Is something I am missing which is needed to be installed. 任何人都可以帮助我，我在网上搜索了很多解决方案，但找不到解决方案。这是我所缺少的，需要安装。

2 个解决方案

解决方案1
 0  

The error is pretty self explanatory : 该错误很容易说明： 

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

This means your CSS file isn't found. 这意味着找不到您的CSS文件。

To resolve that : 要解决这个问题：

  • Check that the file is actually here 检查文件实际上在这里
  • If not, reinstall the package with npm install 如果没有，请使用npm install重新安装软件包
  • If it is there, check that the path provided is correct 如果存在，请检查提供的路径是否正确
  • check the file extension 检查文件扩展名

解决方案2
 0 已采纳  2018-01-16 09:08:15

I think this is because they are attempting to import a .css file into a .scss file inside the main.scss file. 我认为这是因为他们正在尝试将.css文件导入到main.scss文件内的.scss文件中。 It seems like they have followed the guide here 看来他们已遵循这里的指南

You can remove this reference from main.scss 您可以从main.scss中删除此引用 

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

and add it under the styles attribute in the angular-cli.json like: 并将其添加到angular-cli.json中的styles属性下，如下所示： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular 4材质项目未编译 - Angular 4 material project is not compiling 尝试创建新的角度项目时出错 - Error while trying to create new angular project 创建新项目时出现角度 cli 错误 - angular cli error while creating new project 在angular中创建新项目时出错 - Error while creating new project in angular 在 Angular 中创建新项目时显示错误 - Error showing while creating new project in Angular 在 Angular 项目中安装 agora 时出错 - Error while installing agora in Angular project 使用 ng 创建新的 angular 项目时出错 - Error While create new angular project with ng 用gulp编译时出错 - Error while compiling with gulp 编译时在角度中将CSS转换为CSS - Scss to css in angular while compiling 安装Angular CLI创建Angular2项目时出错 - Getting error while installing Angular cli to create Angular2 project
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM