Error compiling SCSS in linked Angular-CLI

[hccampos]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Ubuntu 16.10

Versions.

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

master at 0664beb76da87cb0c8b39c0029dffb3959faadcc using npm link

Repro steps.

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

1. Start angular-cli in serve mode ng serve --env local. It all builds normally.
2. Modify a scss file linked to a component and save: build fails.
3. Remove reference to the scss file from the component and save: builds fine.
4. Add the reference to the scss file again: builds.
5. Go to step 2

The log given by the failure.

Normally this include a stack trace and some more information.

ERROR in ./src/app/pro-solution/pro-solution.component.scss
Module build failed: Error
    at WebpackCompilerHost.populateWebpackResolver (/.../angular-cli/packages/@ngtools/webpack/src/compiler_host.ts:218:51)
    at /.../angular-cli/packages/@ngtools/webpack/src/plugin.ts:326:37
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./src/app/some.component.ts 24:21-61
 @ ./src/app/some.module.ts
 @ ./src async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

Mention any other details that might be useful.

This was probably caused by #4188 which modified the populateWebpackResolver method in packages/@ngtools/webpack/src/compiler_host.ts, but I didn't dig much further than that.

---

Thanks! We'll be in touch soon.

[filipesilva]

I just tried this while testing something else and it seemed fine. Was able to add in @import '~bootstrap/scss/bootstrap' and remove it with no such errors.

Can you test again with latest master and deleted/reinstalled node_modules?

[hccampos]

@filipesilva will try again tomorrow morning with the latest master and see if the error persists.

[prakharmishra]

I am having the same problem. Here are some more details:

λ ng --version

                         _                           _  _

__ _ _ __ __ _ _ _ | | __ _ _ __ ___ | |()
/ || '_ \ / _ || | | || | / ` || '|___ / __|| || |
| (| || | | || (| || || || || (| || | |___|| ( | || |
_,||| || _, | _,||| _,||| _|||||
|_/
angular-cli: 1.0.0-beta.26
node: 4.1.1
os: win32 x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

λ node -v
v4.1.1

Following is the error I am getting. All I did was removed and re-written it and hit Ctrl-S, and suddenly webpack couldn't compile it anymore.

webpack: Compiling...
Hash: ce5db0545f15cbbde03f
Time: 2809ms
chunk    {0} main.bundle.js, main.bundle.map (main) 4.1 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 9.96 kB {3} [initial]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.85 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]

ERROR in ./src/app/app.component.ts
Module build failed: Error
    at WebpackCompilerHost.populateWebpackResolver (D:\MyApps\angular-apps\angular-demo\node_modules\@ngtools\webpack\src\compiler_host.js:218:51)
    at D:\MyApps\angular-apps\angular-demo\node_modules\@ngtools\webpack\src\plugin.js:352:33
    at tryCatch (D:\MyApps\angular-apps\angular-demo\node_modules\es6-promise\dist\es6-promise.js:410:12)
    at invokeCallback (D:\MyApps\angular-apps\angular-demo\node_modules\es6-promise\dist\es6-promise.js:425:13)
    at publish (D:\MyApps\angular-apps\angular-demo\node_modules\es6-promise\dist\es6-promise.js:393:7)
    at flush (D:\MyApps\angular-apps\angular-demo\node_modules\es6-promise\dist\es6-promise.js:121:5)
    at doNTCallback0 (node.js:407:9)
    at process._tickCallback (node.js:336:13)
 @ ./src/app/app.module.ts 14:0-47
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.

[antoniwan]

I'm having a similar error on a fresh project started with the angular-cli.

If I trigger a build from the app.component.html, I get the following error. If I trigger a build from any other file the bundling is successful.

NG version

➜  botstats git:(master) ✗ ng --version

                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.26
node: 4.4.7
os: darwin x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

Error

ERROR in ./src/app/app.component.html
Module build failed: Error
    at WebpackCompilerHost.populateWebpackResolver (/Users/antoniwan/Sites/m8/botstats/node_modules/@ngtools/webpack/src/compiler_host.js:218:51)
    at /Users/antoniwan/Sites/m8/botstats/node_modules/@ngtools/webpack/src/plugin.js:352:33
    at tryCatch (/Users/antoniwan/Sites/m8/botstats/node_modules/es6-promise/dist/es6-promise.js:410:12)
    at invokeCallback (/Users/antoniwan/Sites/m8/botstats/node_modules/es6-promise/dist/es6-promise.js:425:13)
    at publish (/Users/antoniwan/Sites/m8/botstats/node_modules/es6-promise/dist/es6-promise.js:393:7)
    at flush (/Users/antoniwan/Sites/m8/botstats/node_modules/es6-promise/dist/es6-promise.js:121:5)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)
 @ ./src/app/app.component.ts 18:22-53
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.

Contents of app.component.html

<p>hi</p>

[baruchvlz]

Was getting the same error with beta 26. Downgraded to beta 25 and was getting an error that ../models/config was not found so, downgraded to beta 24 and everything works as expected.

Edit: Still getting error

ERROR in ./src/app/app.component.html
Module build failed: Error
    at WebpackCompilerHost.populateWebpackResolver (/path/to/project/pipboy/node_modules/@ngtools/webpack/src/compiler_host.js:218:51)
    at /path/to/project/pipboy/node_modules/@ngtools/webpack/src/plugin.js:352:33
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./src/app/app.component.ts 45:22-53
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi main

angular-cli: 1.0.0-beta.24
node: 7.2.1
os: darwin x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

[scttcper]

Ran into the same bug, trashed my node modules and yarn.lock and reinstalled and now its gone.

[ivanntis]

I delete the files of type yarm.lock in the project and I work without problems.

[filipesilva]

Seems like it was a dependency problem at some point, and it's gone now.

[angular-automatic-lock-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.}