Module not found: Error: Can't resolve file

[hassanasad]

@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.28.3]
node: 7.5.0
os: darwin x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.7

After the update to beta.32.3 i started getting these errors in SCSS files:

ERROR in ./src/app/shared/header/header.component.scss
Module not found: Error: Can't resolve './assets/images/icon-search.png' in '/Users/hassan/Code/app/shared/header'
 @ ./src/app/shared/header/header.component.scss 6:1898-1940
 @ ./src/app/shared/header/header.component.ts
 @ ./src/app/shared/shared.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./src/app/shared/nav/nav.component.scss
Module not found: Error: Can't resolve './assets/fonts/portal.eot?' in '/Users/hassan/Code/src/app/shared/nav'
 @ ./src/app/shared/nav/nav.component.scss 6:295-332
 @ ./src/app/shared/nav/nav.component.ts
 @ ./src/app/shared/shared.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

The error seems to appear in this line:

background-image: url('assets/images/icon-search.png');

P.S: It was working fine on beta.31

[billdwhite]

Same thing here. Technically, at development time, the path is wrong because the file has not yet been compiled into the location it will be at runtime. So I'm assuming I need to specify the location in the configuration somewhere?

[hassanasad]

For reference my .angular-cli.json file has:

"assets": [
        "assets",
        "web.config"
      ],

(Which was working fine in beta.31 as mentioned earlier)

[billdwhite]

I've got the same; still getting the error

[armangevorgyan]

me too
@font-face { font-family: 'Segoe UI'; src: url('../assets/fonts/SegoeUI.eot'); src: url('../assets/fonts/SegoeUI.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/SegoeUI.woff') format('woff'), url('../assets/fonts/SegoeUI.ttf') format('truetype'); font-weight: normal; font-style: normal; }

ERROR in ./src/app/components/footer/footer.scss Module not found: Error: Can't resolve '../assets/fonts/SegoeUI.eot' in '/home/arman/Projects/AOP/src/app/components/footer' @ ./src/app/components/footer/footer.scss 6:83-121 6:144-182 @ ./src/app/components/footer/footer.ts @ ./src/app/index.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

[clydin]

CSS URL handling was changed. To replicate the behavior prior to beta.32, use a root relative URL (i.e., add a / to the beginning of each URL).

[billdwhite]

I tried that and it did compile with no errors, but then at runtime it was looking for 'assets' in the root of the url rather than in the root of the web context. So none of my images loaded.....

[hassanasad]

Thanks @clydin - it started working again for me by adding '/' before all relative URLs in the SCSS files.

@billdwhite do you have the 'assets' in your .angular-cli.json file as mentioned above?

[billdwhite]

Yes I do have that in my files. But I'm running the app from a subcontext (think http://myserver/myapp as opposed to http://myserver) so the path that results from using / before the relative urls results in it looking for http://myserver/assets/myimage.png which is wrong. (It needs to be http://myserver/my app/assets/myimage.png) so I'm guessing I'm missing some other config setting that tells it to adjust for that. Maybe base href or something but that seems to be set correctly for everything else in my app so I'm not sure what I'm missing. Again, setting the / does fix the compile errors but it just doesn't work at runtime.

[kunee]

I have the exact same behaviour as @billdwhite. Adding a slash maybe fixes the compilation error but it's no final solution and wasn't necessary in the past.

[billdwhite]

@filipesilva is it possible this was caused by your commit from 3 days back?

[filipesilva]

Yes it is likely related. I'll have a look.

[clydin]

url()'s in component stylesheets are now processed. This allows the CLI to hash the assets and supports long-term caching. However, the URL now needs to be build-time discoverable and the path must be relative to the component stylesheet for this to work. This also has the advantage that component based assets can be encapsulated within the component source location, if desired.

If you don't want them processed, a root relative URL will prevent this behavior. Unfortunately, this will currently conflict with custom base hrefs and deployUrls. This is in the process of being corrected.

Also of note is that global stylesheets already function in this manner.

[filipesilva]

First of all, apologies for the breakage. @clydin's answer above explains what happened well. Further clarification: 'root relative URLs' are those that start with /.

As to why this change... it was because component css did not support imports, and in fixing that we inadvertently also fixed url() inside css.

Before it didn't actually work insofar as images/etc where never processed. Now they are (as long as it's a relative url).

This also means that you can just put your images locally, side by side with your css. They will be correctly recognized and placed in the output directory, and even get hashes on prod builds. You don't need to put them in assets/ if you don't want to.

If you do want to put them in assets/, you can use a root relative path, one starting with /.

For instance, from src/app/component.css you can use the relative path url('../assets/image.jpg') or the absolute path url('/assets/image.jpg'.

I just pushed a PR that should fix base-href and deploy-url broken interaction: #4803.

[arntj]

@filipesilva Thanks for your clarification. However, I'm still having problem with images not being copied in production builds, see #4806. I don't know if this was fixed in your fix?

[romulo1984]

If url() is now processed, I believe @import should follow the same way.

In my less file I'm having to use two ways to reference a file.

@import "../../../assets/less/bootstrap/_variables.less";
background-image: url ('/assets/img/professional-02.jpg');

assets in the two cases above is the same folder, but I can not use /assets in @import.

[spark-studio]

Hi, one solution for me is, put some styles like this in:

styles.css
/* You can add global styles to this file, and also import other style files */

[nputhiyadath]

I am facing a similar problem with @angular/cli version 1.0.0.
I am using the path in sass as
background-image: url('/assets/images/account.png')
And this works fine with ng serve and I can see images. ng build also does not give any error. But after I build it, the main bundle has wrong path. It has

background-image: url('/./assets/images/account.png')

Note that I am using "ng build --env prod --base-href ." to build the project.

Does anyone know which version has the fix for this?

[bobrosoft]

Solved that by disabling of url(...) processing in css-loader plugin (I using external webpack config from angular2-webpack-starter). Described here webpack-contrib/extract-text-webpack-plugin#246 (comment)

[aliyeysides]

@billdwhite hey did you ever end up solving your issue? I'm facing the same scenario.

[billdwhite]

@aliyeysides that was so many months back that I'm not sure how I solved it. Regardless, I have been using ~ in my asset paths to like this:

@import '~assets/styles/variables.scss';

so maybe that will work for you to specify an assets folder in the root of the project that is running from a non-server root endpoint.

[sunarc-rahul]

[](ERROR in multi script-loader!.//jquery/dist/jquery.slim.js script-loader!.//popper.js/dist/umd/popper.min.js script-loader!.//bootstrap/dist/js/bootstrap.min.js
Module not found: Error: Can't resolve 'script-loader' in 'C:\rahul\angular\test\abc'
@ multi script-loader!.//jquery/dist/jquery.slim.js script-loader!.//popper.js/dist/umd/popper.min.js script-loader!.//bootstrap/dist/js/bootstrap.min.js

ERROR in multi script-loader!.//jquery/dist/jquery.slim.js script-loader!.//popper.js/dist/umd/popper.min.js script-loader!.//bootstrap/dist/js/bootstrap.min.js
Module not found: Error: Can't resolve 'script-loader' in 'C:\rahul\angular\test\abc'
@ multi script-loader!.//jquery/dist/jquery.slim.js script-loader!.//popper.js/dist/umd/popper.min.js script-loader!.//bootstrap/dist/js/bootstrap.min.js

ERROR in multi script-loader!.//jquery/dist/jquery.slim.js script-loader!.//popper.js/dist/umd/popper.min.js script-loader!.//bootstrap/dist/js/bootstrap.min.js
Module not found: Error: Can't resolve 'script-loader' in 'C:\rahul\angular\test\abc'
@ multi script-loader!.//jquery/dist/jquery.slim.js script-loader!.//popper.js/dist/umd/popper.min.js script-loader!.//bootstrap/dist/js/bootstrap.min.js

ERROR in multi .//bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve 'postcss-loader' in 'C:\rahul\angular\test\abc'
@ multi .//bootstrap/dist/css/bootstrap.min.css ./src/styles.css

ERROR in multi .//bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve 'postcss-loader' in 'C:\rahul\angular\test\abc'
@ multi .//bootstrap/dist/css/bootstrap.min.css ./src/styles.css

ERROR in multi ./src/polyfills.ts
Module not found: Error: Can't resolve '@ngtools/webpack' in 'C:\rahul\angular\test\abc'
@ multi ./src/polyfills.ts

ERROR in multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
Module not found: Error: Can't resolve '@ngtools/webpack' in 'C:\rahul\angular\test\abc'
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in Error: Child compilation failed:
Entry module not found: Error: Can't resolve 'raw-loader' in 'C:\rahul\angular \test\abc':
Error: Can't resolve 'raw-loader' in 'C:\rahul\angular\test\abc'

• compiler.js:76
  [abc]/[cli]/[html-webpack-plugin]/lib/compiler.js:76:16

• Compiler.js:280 Compiler.
  [abc]/[cli]/[webpack]/lib/Compiler.js:280:10

• Compiler.js:480
  [abc]/[cli]/[webpack]/lib/Compiler.js:480:13

• Tapable.js:202 next
  [abc]/[cli]/[tapable]/lib/Tapable.js:202:11

• CachePlugin.js:62 Compiler.
  [abc]/[cli]/[webpack]/lib/CachePlugin.js:62:5

• Tapable.js:206 Compiler.applyPluginsAsyncSeries
  [abc]/[cli]/[tapable]/lib/Tapable.js:206:13

• Compiler.js:477
  [abc]/[cli]/[webpack]/lib/Compiler.js:477:10

• Tapable.js:195 Compilation.applyPluginsAsyncSeries
  [abc]/[cli]/[tapable]/lib/Tapable.js:195:46

• Compilation.js:640 self.applyPluginsAsync.err
  [abc]/[cli]/[webpack]/lib/Compilation.js:640:19

• Tapable.js:195 Compilation.applyPluginsAsyncSeries
  [abc]/[cli]/[tapable]/lib/Tapable.js:195:46

• Compilation.js:631 self.applyPluginsAsync.err
  [abc]/[cli]/[webpack]/lib/Compilation.js:631:11

• Tapable.js:195 Compilation.applyPluginsAsyncSeries
  [abc]/[cli]/[tapable]/lib/Tapable.js:195:46

• Compilation.js:626 self.applyPluginsAsync.err
  [abc]/[cli]/[webpack]/lib/Compilation.js:626:10

• Tapable.js:195 Compilation.applyPluginsAsyncSeries
  [abc]/[cli]/[tapable]/lib/Tapable.js:195:46

• Compilation.js:622 sealPart2
  [abc]/[cli]/[webpack]/lib/Compilation.js:622:9

• Tapable.js:195 Compilation.applyPluginsAsyncSeries
  [abc]/[cli]/[tapable]/lib/Tapable.js:195:46

ERROR in multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:4200' in 'C:\rahul\angular\test\abc'
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
)
Please help me on this

[ululajib]

Please help me ...

npm run dev
@ dev /var/www/html/screp
npm run development
@ development /var/www/html/screp
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
95% emitting

ERROR Failed to compile with 1 errors 00:33:59

This dependency was not found:

/var/www/html/screp/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
To install it, you can run: npm install --save /var/www/html/screp/resources/assets/sass/app.scss
Asset Size Chunks Chunk Names
/js/app.js 4.12 kB 0 [emitted] /js/app

ERROR in ./resources/assets/js/app.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base"t > 0, attempted to resolve relative to "/var/www/html/screp/resources/assets/js"
at /var/www/html/screp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17

at Array.map ()
at Function.normalisePlugins (/var/www/html/screp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/var/www/html/screp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (/var/www/html/screp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/var/www/html/screp/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/var/www/html/screp/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/var/www/html/screp/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/var/www/html/screp/node_modules/babel-loader/lib/index.js:50:20)
at /var/www/html/screp/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/var/www/html/screp/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:437:13)
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss>
Module not found: Error: Can't resolve 'css-loader' in '/var/www/html/screp'
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

[xtgrant]

@filipesilva @romulo1984
Hi. In reference to @romulo1984 comment about

@import "../../../assets/less/bootstrap/_variables.less";
background-image: url ('/assets/img/professional-02.jpg');

assets in the two cases above is the same folder, but I can not use /assets in @import.

How would you add a root reference in @import?

For example:
Convert: @import "../../../assets/less/bootstrap/_variables.less";
To point to a common folder: @import "common/less/bootstrap/_variables.less";

Because in my current implementation this currently creates an error in saying it cannot resolve the path location.
Error:

Module build failed:
@import "common/variables";
      File to import not found or unreadable: common/variables.

I have defined the "common" path mapping in tsconfig.json:

"paths": {
        "common/*": [
            "app/common/styles*"
        ]
    }

and yes, "variables.scss" does exist in the "app/common/styles" folder.
Also, using the "~" infront of it does not work either.

[mseltene]

background-image: url('/assets/images/icon-search.png'); works on mine, add / to assests... so /assets... and also don't do background-image: url(""); empty source with double"" or single'' quotes, it gave me error saying ERROR in ./src/styles.css Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './.' in ......

[dcatoday]

Is this broken again in 1.7.0?

[rodrijuarez]

@dcatoday having the same problem as you in 1.7.0, I think it's broken again

[tkohr]

I still don't see a clean way, how to reference urls in sass with a relative path that works both in dev and prod (app not running in root directory).

If I reference my image and font urls with 'root relative urls' like url('/assets/some-font.ttf') everything works fine in dev but I can not run my app in a subfolder on the server.

If I use relative urls starting from my sass file like url('../fonts/some-font.ttf'), my dev environment works fine as well but all assets referenced in sass get packaged into the root of my app instead of the assets folder.

For reasons of our deployment process and prod environment I am not using base href, but HashLocationStrategy.

[woteska]

Guys, Google Mobile Friendly Test failed (https://search.google.com/test/mobile-friendly), because it was not able to find the background-image. This is how I started to search for a solution. Actually starting with '/' didn't help me at all... but starting with './' was the solution. (Angular 6)

[FrancescoBorzi]

I'm running Angular CLI version 6.2.4 and I still have the same issue reported before by @billdwhite:

Yes I do have that in my files. But I'm running the app from a subcontext (think http://myserver/myapp as opposed to http://myserver) so the path that results from using / before the relative urls results in it looking for http://myserver/assets/myimage.png which is wrong. (It needs to be http://myserver/my app/assets/myimage.png) so I'm guessing I'm missing some other config setting that tells it to adjust for that. Maybe base href or something but that seems to be set correctly for everything else in my app so I'm not sure what I'm missing. Again, setting the / does fix the compile errors but it just doesn't work at runtime.

this happens only in production and only when the app runs in a subdomain.

[matulkum]

Just want to add another vote.. because paths in my scss is also not working for me. If I do not absolute it works when running with ng serve but not in prduction and the other way around when I go relative. This the line in one of my components scss files: background-image: url("assets/bar.png");

EDIT:
actually I just found I had another bug in my scss, which was the real cause for it not working in production. I had:

background: cover #da4877;
background-image: url("/assets/bar.png");
background-size: cover;

after I changed the first line to background: #da4877; it works.

So please Ignore my vote on this ;)

[isahilpahuja]

I'm running Angular CLI version 6.2.4 and I still have the same issue reported before by @billdwhite:

Yes I do have that in my files. But I'm running the app from a subcontext (think http://myserver/myapp as opposed to http://myserver) so the path that results from using / before the relative urls results in it looking for http://myserver/assets/myimage.png which is wrong. (It needs to be http://myserver/my app/assets/myimage.png) so I'm guessing I'm missing some other config setting that tells it to adjust for that. Maybe base href or something but that seems to be set correctly for everything else in my app so I'm not sure what I'm missing. Again, setting the / does fix the compile errors but it just doesn't work at runtime.

this happens only in production and only when the app runs in a subdomain.

Hey, did you find any solution for this issue? I'm facing the same issue.

[Empereol]

@isahilpahuja , the workaround (not a proper solution) I've found is to move your image reference from the styles to the template. It feels icky but it "works."

So instead of:

// article.scss
.article__photo {
  background-image: url(assets/bacteria.svg);
}

do this instead:

<!-- article.html -->
<div class="article__photo" style="background-image: url(assets/bacteria.svg);"></div>

Though this workaround may not be reasonable if you're wanting to apply the background image to many elements.

Another possible workaround is to eject the webpack config and fiddle with the CSS file-loading, though I'm no webpack expert but I assume it could likely be done... Of course, at the expense of the ejected webpack config which I personally find intimidating...

[isahilpahuja]

@Empereol Thanks a lot! I moved it from styles to template and it worked. But still didn't able to find the reason why it was not working when placed in scss file.

[thorhunter1]

Any update on this? This problem has been there very long now and it's still not being addressed. I was not able to find clean way to reference assets in scss files that would work both for dev and production. Absolute path works in dev environment but not in prod when application is hosted in subdomain, relative path on the other hand forces me to reference different path depending on location of scss file.

[hieutranagi47]

The problem still is here - Jun 2019
But I found lukaszmn's solution can solve the issue with background: url("~src/assets/foo.svg") instead of url(/assets/foo.svg).

[fergardi]

This was working for me just fine in Angular7 with the url('/assets/foo.png'). As soon as I migrated to Angular 8 It broke again, and I must use url('~src/assets/foo.png').

Any news?

[julianpoemp]

Until now I have faced the same problem. url("/assets/...") worked well with ng serve but not on my production server with an different base-href than "/". It redirected to <domain>/assets/.. instead of <domain>/<subfolder>/assets (<domain>/<subfolder>/ is my base-href).

Now I can confirm the following using Angular 8:

• "/assets/..." in url() is an absolute path from the host URL.
• "assets/..." in url() is an relative path to the base-href you set.
• both are the absolute paths from the host URL, not from the base-href URL.

I'm now using just "assets/..." and it works for me on development and production.

EDIT: I don't know why, but my images are copied next to the assets folder but there are copies in my assets folder, too. Does anyone knows the reason?

[royling]

I'm now using just "assets/..." and it works for me on development and production.

EDIT: I don't know why, but my images are copied next to the assets folder but there are copies in my assets folder, too. Does anyone knows the reason?

@julianpoemp this is well explained above #4778 (comment), url() in component styles is processed.

[Paitum]

Problem

I am having a similar problem; ng serve works fine, but the CSS produced by ng build --base-href="./" transforms url()'s from url(/fonts/roboto/roboto-latin.woff2) to url(/./fonts/roboto/roboto-latin.woff2) (notice the root-relative slash). The desired output would be url(./fonts/roboto/roboto-latin.woff2) (a relative url) which should result in the browser loading it relative to the HTML's <base href="./">.

I have manually replaced the url(/./ with url(./ and seen the CSS load properly based on the <base href>, and am struggling to figure out how to configure the Angular CLI (6.2.9) to produce relative url()s.

More details:

We build artifacts without knowing where they will be deployed. Deploying artifacts involves setting the <base href> appropriately, so all resources are relative to the correct base.

I have read the responses by @clydin #4778 (comment), and @filipesilva #4778 (comment), but find them confusing because:

• my problem is with styles.css not a component
• those comments are over 2 years old
• there is talk about This is in the process of being corrected.
• confusing wording like fixed url(), does fixed mean "to resolve a problem" or "a non-relative path"

I have read (webpack-contrib/extract-text-webpack-plugin#246 (comment)) that disabling the url processing by the css-loader is a solution, but haven't tried it out yet. After 2 years of this problem, I would be surprised if the Angular CLI didn't have first-class support for this.

Does the Angular CLI have a solution to this problem, or is a custom Webpack Config the "correct" solution? If yes, then what version of the Angular CLI supports the solution (since we are using v6)?

[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.}