angular-cli: Module not found: Error: Can't resolve file

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).

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.

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: https://github.com/angular/angular-cli/pull/4803.

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…

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.

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.

when is set url like this , it has error: background-image: url(‘assets/img/1.jpg’);

if you used angular2-webpack-starter you can try like this, it works for me ! background-image: url(‘~assets/img/1.jpg’);

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.

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.

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?

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?

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

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?

according to base tag specification

The base URL to be used throughout the document for relative URL addresses. If this attribute is specified, this element must come before any other elements with attributes whose values are URLs. Absolute and relative URLs are allowed.

in angular-cli projects the base href is “/” (index.html) so all paths, including urls in css, and including relative and absolute paths, should have / appended to them. Instead, relative paths have ‘./’

The solution of manually adding ‘/’ for absolute paths is not good enough, since different server environments on different builds might differ in the wanted ‘base’ url.

I assume it’s a loader issue. Not sure how it plays with the rest of the configuration, but raw-loader follows this spec perfectly.

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 https://github.com/angular/angular-cli/issues/4778#issuecomment-280773798, and @filipesilva https://github.com/angular/angular-cli/issues/4778#issuecomment-280798718, 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 (https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/246#issuecomment-308438193) 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)?

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).

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 …

@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.

@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.

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?

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

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

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