Angular deploy still see Page not found

Support
,
1

I have used Netlify for a while now and I still do not understand why sometimes the Angular projects that I am deploying are working and sometimes they are not.
I am pretty sure there is something I am doing in some configuration that sometimes I am integrating and sometimes not.

By the way, in each one of the listed websites below, has the build command set to ‘ng build --prod’ and the ‘dist’ folder set, and this is why I am getting crazy to find the issue (I am not gonna attach each one of them, the one below is just as example for each website listed below).
Capture2

These are examples of an Angular projects working correctly:

But those are examples of Angular projects not working correctly:

Each one of them is coming from a GitHub repository that you can fork freely.

I need to clarify, that all the builds from Netifly are giving me “Published” and there is no error in the logs for any of the above websites.

Also, for each of the listed websites, I can download the package, that Netlify platform is generating, with the built files; and in each package there are correctly all the built files and if I run them in my local machine they are all working fine.

Finally, another problem I have found that is not really related with the main issue in this post, but I want to mention as well, is that if I set ‘NODE_ENV’ variable in Netlify setting, the build is trying to install everything except Node and for this reason, when the angular cli command is run, the build is failing (because there is no Node that gets it).

I hope this is sufficiently clear, to understand the issue I am having and help someone getting a hint on how to fix that. I am available to get more information if needed.

1 Like
2

Hey, first thing which I see straight ahead is your publish directory. New Angular versions handle multiple applications per project so by default your app build ends up in dist/app-name. Can you confirm you have configured correct publish directories?

3

So why some projects are working and some other not?

Anyway, I have tried a couple of the above examples that are not working and still, even changing the “dist” folder adding the project name (in the example attached is “add-to-basket”), the websites are not working and in the end the build is failing.

Capture6
Capture6864×538 14.9 KB

4

This issue is still open, can anyone support me in understanding where I am making mistakes?

5

Hi, @Ferie, I checked one of the non-working sites.

This page is a 404:

https://temperature-converters.netlify.app/

That is because the there is no /index.html file in that deploy. Instead the index.html file is the subdirectory convertitoretemperature as /convertitoretemperature/index.html.

This means the following URL works:

https://temperature-converters.netlify.app/convertitoretemperature/

However, if you look at the HTML, it references all the files without convertitoretemperature:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Temperature Converter</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.aaab470972859e318473.css"></head>

    <body>
        <app-root></app-root>
    <script src="runtime-es2015.0dae8cbc97194c7caed4.js" type="module"></script><script src="runtime-es5.0dae8cbc97194c7caed4.js" nomodule defer></script><script src="polyfills-es5.177e85a9724683782539.js" nomodule defer></script><script src="polyfills-es2015.f332a089ad1600448873.js" type="module"></script><script src="main-es2015.cd529ba4ad31d5b815ab.js" type="module"></script><script src="main-es5.cd529ba4ad31d5b815ab.js" nomodule defer></script></body>
</html>

This file does not exist: https://temperature-converters.netlify.app/styles.aaab470972859e318473.css

That file is also in the subdirectory and is actually found here:

https://temperature-converters.netlify.app/convertitoretemperature/styles.aaab470972859e318473.css

The solution for that will be to change the publish directory to the correct directory. My best guess is that the publish directory should be dist/convertitoretemperature instead of just dist.

Regarding the NODE_ENV environment variable, what are you setting that to? Often, setting this to “production” will break builds as the build depends on developer dependencies. Setting NODE_ENV=production prevents the developer dependencies from being installed and therefore breaks the build.

If there are other questions or concerns, please let us know.

6

Thanks for your feedback, @luke.

While reading all your hypotheses, I find out that, as I was supposing, the problem was my side, in my configurations.

The real problem was in angular.json file where I did not changed the project name: initially the project name was convertitoretemperature so all the references made by angular had that name. After some time, the project name was changed to converters but without changing it in angular.json. So, the build was successful but was generated in a folder that was not referenced in Netlify, as you have found.

Fixing the project names, and the others relative instances in angular.json, now the temperature converter project is working.

The same issue was also present in the other initially “non-working” projects that I have mentioned in the original post.

Now, I have another question for you: in all of those that were “non-working” projects, I had to fix also the “Publish directory” in the “Deploy setting” here on Netlify, like you suggested. BUT, in the original 2 “working projects” (https://essence-global-interview-exercise.netlify.app/ and https://matrimonio-annarita-e-riccardo.netlify.app/) the “Publish directory” in the “Deploy setting” here on Netlify, is set simply to “dist/”.

So the question is: why those 2 are still working and the others need the specific project directory? (Angular version are different for, so I do not think that this is depending on Angular).

7

Hey @Ferie,

I think this is simply because of where the HTML-ready pages are being stored. It’s not the same across the board and, as such, the “Publish directory” must be changed to match :slight_smile:

8

After some tests, I think I can answer my last question: “why sometimes the original projects are working without specifying the ‘Publish Directory’ on Netlify ‘Deploy setting’?”

The answer is pretty simple and always depends on wrong configurations in the projects. In angular.json there is a node called outputPath that even without me touching it, sometimes is set to dist/ in the original working examples, in the originally wrong paths, it was set to dist/<project-name> (and the wrong project name, was the main issue explained in the previous post).

So to answer generally to the issue: the “Publish directory” in the “Deploy setting” on Netlify must mach the outputPath in angular.json.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "<PROJECT-NAME>": {
            ...
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/<PROJECT-NAME>",
                        ...
                    }
                    ...
                }
                ...
            }
            ...
        }
        ...
    }
}

And this means that “Publish directory” on Netlify can be simply dist/ if in the outputPath there is just dist.

Thanks everyone for the support, we finally found the issue :smiley:

2 Likes
9

Thanks for the solution. I had this same situation

1 Like
10

Glad this was helpful for you, @PatrickPrakash :netliconfetti:

11

Thank you for mentioning the issue and solving it too, it was really helpful.

1 Like
12

I found another approach

image

I added the site name from actual folder here

1 Like