Angular-cli: CLI vBeta 23 - NG Serve/Build - Failing with SASS/SCSS Option

[jwuliger]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 10 (Latest & most current version)

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: local (v1.0.0-beta.23, branch: master)
node: 7.2.1
os: win32 x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

1. Use the Master Branch of the Angular CLI with npm link as outlined in the documentation.
2. Create a new CLI Project with the --style flag. Use: ng new new-project --style=scss
3. Auto NPM Install will fail due to Beta 23 not being on NPM yet.
4. Open package.json and change the CLI version to 22-1 (So we can run npm i)
5. Do a NPM Install.
6. When install is complete I link it to my local master repo using npm link angular-cli
7. Now either use ng serve or ng build
8. You should now see the error in CMD posted bellow.

The log given by the failure.

Normally this include a stack trace and some more information.

C:\Code Projects\Web\Angular 2\_ref\latest-cli>ng serve
** NG Live Development Server is running on http://localhost:4200. **
Hash: f09b9601cace36d4d5ba
Time: 6446ms
chunk    {0} main.bundle.js, main.bundle.map (main) 62.9 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.map (styles) 9.07 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.73 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module build failed: TypeError: Cannot read property 'path' of undefined
    at Object.module.exports (C:\Code Projects\Web\Angular 2\_ref\latest-cli\node_modules\sass-loader\index.js:227:52)
 @ ./src/styles.scss 4:14-159
 @ multi styles

ERROR in ./src/styles.scss
Module build failed: Error
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModule.js:143:35
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:359:11
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:225:18
    at runSyncOrAsync (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:138:3)
    at iterateNormalLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:224:2)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:197:4
    at Storage.provide (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:53:20)
    at CachedInputFileSystem.readFile (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:160:24)
    at processResource (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:194:11)
    at iteratePitchingLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:153:10)
    at iteratePitchingLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:160:10)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:168:18
    at loadLoader (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\loadLoader.js:36:3)
    at iteratePitchingLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:164:2)
    at iteratePitchingLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:160:10)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:168:18
    at loadLoader (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\loadLoader.js:36:3)
    at iteratePitchingLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:164:2)
    at iteratePitchingLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:160:10)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:168:18
    at loadLoader (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\loadLoader.js:36:3)
    at iteratePitchingLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:164:2)
    at runLoaders (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\loader-runner\lib\LoaderRunner.js:357:2)
    at NormalModule.doBuild (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModule.js:131:2)
    at NormalModule.build (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModule.js:179:15)
    at Compilation.buildModule (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\Compilation.js:127:9)
    at Compilation.<anonymous> (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\Compilation.js:404:8)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:74:13
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\tapable\lib\Tapable.js:168:11
    at NormalModuleFactory.<anonymous> (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleReplacementPlugin.js:37:11)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\tapable\lib\Tapable.js:172:13)
    at onDoneResolving (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:49:11)
    at onDoneResolving (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:165:6)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:161:6
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:726:13
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:52:16
    at async.forEachOf.async.eachOf (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:236:30)
    at _parallel (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:717:9)
    at Object.async.parallel (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:731:9)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:154:11
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:726:13
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:52:16
    at async.forEachOf.async.eachOf (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:236:30)
    at _parallel (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:717:9)
    at Object.async.parallel (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\node_modules\async\lib\async.js:731:9)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:104:10
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:39:4
    at handleExternal (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:25:32)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:81:24
    at next (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:45:41)
    at handleExternals (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:59:7)
    at ExternalModuleFactoryPlugin.<anonymous> (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:79:5)
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:207:3
    at C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\tapable\lib\Tapable.js:168:11
    at NormalModuleFactory.<anonymous> (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleReplacementPlugin.js:26:11)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\tapable\lib\Tapable.js:172:13)
    at NormalModuleFactory.create (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\NormalModuleFactory.js:191:8)
    at Compilation.process [as _addModuleChain] (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\Compilation.js:359:16)
    at Compilation.process [as addEntry] (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\Compilation.js:435:7)
    at SingleEntryPlugin.<anonymous> (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\SingleEntryPlugin.js:22:15)
    at Compiler.applyPluginsParallel (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\tapable\lib\Tapable.js:193:14)
    at Compiler.<anonymous> (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\Compiler.js:463:8)
    at Compiler.applyPluginsAsyncSeries (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\tapable\lib\Tapable.js:95:46)
    at Compiler.compile (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\Compiler.js:456:7)
    at Compiler.runAsChild (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\webpack\lib\Compiler.js:265:7)
    at Object.module.exports.pitch (C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\extract-text-webpack-plugin\loader.js:85:17)

ERROR in C:\Code Projects\Web\Angular 2\_ref\angular-cli\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!C:\Code Projects\Web\Angular 2\_ref\latest-cli\node_modules\style-loader\index.js!C:\Code Projects\Web\Angular 2\_ref\latest-cli\node_modules\css-loader\index.js!C:\Code Projects\Web\Angular 2\_ref\latest-cli\node_modules\postcss-loader\index.js!C:\Code Projects\Web\Angular 2\_ref\latest-cli\node_modules\sass-loader\index.js!C:\Code Projects\Web\Angular 2\_ref\latest-cli\src\styles.scss doesn't export content
webpack: bundle is now VALID.

Mention any other details that might be useful.

So far I have only been able to reproduce this issue when using SCSS. If you generate a new project without the style flag so that it defaults to vanilla CSS, it works and the project will build. Much faster then I have seen before!

I know Beta 23 is not 'official' yet since it is not on NPM yet, but thought I would mention this problem. I hope this helps. Thanks!

---

Thanks! We'll be in touch soon.

[jwuliger]

I found a solution to the problem for now. If you install the latest version of SASS-LOADER [email protected] into your project's dependencies, everything work like a charm. 👍

[montella1507]

I was able to build with that SASS option, but my loadChildren dont work with beta.23 via npm link. So maybe it isnt still ready to publish to npm ;-)

[jwuliger]

@montella1507 Yeah. I did run into that problem also. I decided to install es6-promise-loader and changed all my lazy loaded routes using it. It is a temporary solution until Beta 23 is ready/fixed.

[montella1507]

i use custom decorators to avoid switch in redux (ngrx store) and to use ngrx/effects, so i cannot use cli.22, because decorators "would be" fixed in 23 so i had to switch back to 21. Hot module replacement stopped working for me for "no reason" in ver.22 so W/E :-)

[jwuliger]

@montella1507 Ahh, yeah ngrx is a whole different story. At the time of writing this, I am using the latest version of all node modules - including the master of this Master/Beta 23. It took some fiddling but got everything working to the point where I can develop without issue. I am sure if I was using NGRX I would be having the decorator problem as well. Using Master/Beta 23 HMR is fortunately working for me. Now I can tell ya that I am sure AOT wont work yet with my current set ;) That will come.

[the-destro]

Please check with beta-24. SCSS seems to be working again for me(though I had to rebuild node-sass for some reason)

[jwuliger]

Yes thanks. I can confirm SASS/SCSS does now compile correctly. I was able to remove my installed version of Node-Sass 👍

[filipesilva]

Closing as it seems fixed. It was mostly a question of sass-loader being updated.

[tobi-or-not-tobi]

I'm using angular-cli v1.0.0-beta.24 and still facing an error:

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss Module build failed: Error: ENOENT: no such file or directory, scandir '[local-path]/[my-project]/node_modules/node-sass/vendor'

I'm using yarn rather then NPM. If I create a new project with NPM it all works fine, but with yarn it doesn't.

ng new scss-yarn --skip-npm --style=scss
cd scss-yarn
yarn
ng serve

Serving this newly generated projects logs the error.

Update
When I add the [email protected] to my devDependencies its works fine.

[jwuliger]

@tobi-or-not-tobi Update to CLI Beta 25-5. It comes with the updated loader.

[tobi-or-not-tobi]

@jwuliger I had it working on Beta 24, I've just updated to 1.0.0-beta.26 and i'm stuck with the same issue again... I created an empty project to ensure its not related to any customizations, but it seems angular-cli and scss don't share a lot of love. The previous trick where i added the sass loader doesn't seem to work either.

[jwuliger]

Hello @tobi-or-not-tobi, I have it working right now. Try using the CLI in a different way. Check out the 'Hacking' instructions here: https://github.com/angular/angular-cli#development-hints-for-hacking-on-angular-cli This is how I chose to develop my project by working directly off master and updating the cli when they publish a new change. I am not sure if this is the cause of you specific problem, but may be worth a go. Hope that helps. Let me know.

[tobi-or-not-tobi]

Thanks @jwuliger. That works, but only with the use of npm. I was moving towards yarn lately, i've done some additional testing around setting up different projects with yarn in combination with the --style=scss setup. It fails, even when i use the _link_ equivalent of yarn.

Setting up a project with npm, either using beta 26 or link to the latest works fine.

[jwuliger]

That's so strange. I also use yarn install and then npm link. It may be a package you have that is causing the issue. Not sure.

Sent from my iPhone

On Jan 24, 2017, at 5:23 AM, tobi-or-not-tobi [e-mail] wrote:

Thanks @jwuliger. That works, but only with the use of npm. I was moving towards yarn lately, i've done some additional testing around setting up different projects with yarn in combination with the --style=scss setup. It fails, even when i use the link equivalent of yarn.

Setting up a project with npm, either using beta 26 or link to the latest works fine.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[nwp90]

Still happening with @angular/[email protected]. Freshly created with 'ng new project --style=scss
Error is:

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module build failed: Error: ENOENT: no such file or directory, scandir '/home/user/project/node_modules/node-sass/vendor'

sass-loader is 4.1.1, fwiw.

[nwp90]

If I create that directory I then get a different error -

ERROR in multi ./src/styles.scss
Module not found: Error: Can't resolve 'sass-loader' in '/home/user/project'
 @ multi ./src/styles.scss

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'sass-loader' in '/home/user/project'
 @ ./src/app/app.component.ts 19:21-52
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://192.168.1.109:4200 ./src/main.ts

[nwp90]

Having installed sass-loader with 'npm install sass-loader', giving the following situation:

$ npm ls sass-loader
[email protected] /home/user/project
├─┬ @angular/[email protected]
│ └── [email protected] 
└── [email protected] 

and force-rebuilt node-sass as suggested by yet another error message, it works.

[nwp90]

node-sass was at 4.5.1, fwiw.

[email protected] /home/user/project
└─┬ @angular/[email protected]
  └── [email protected] 

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}