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

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.