How do you put an angular project to prod?

Question

That's my first time with Angular, and I'm trying to put my website in prod, but when I access the site, I only get index.html with its CSS and no render of . When I try to access a route like website/home I get a Not found error ...

I've use ng build --prod and put dist content into ecowebhosting

I don't know what part of the program I need to put here so I made screen shoot of the structure:

That's my server dir

That's my project structure

here's my main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { AccueilComponent } from './app/accueil/accueil.component';
import { NavBarComponent } from './app/nav-bar/nav-bar.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

If you need more code, ask me =)

Thanks for the help !!

Answer 1

I guess this is URL rewriting issue. If your website is on the PHP server then use .htaccess file with following line of text

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d  
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]  

If your website is on the windows system then please add following line of code to the web.config file

<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <rule name="Angular Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
            
        </rules>
        <outboundRules>
            
        </outboundRules>
    </rewrite>
    <httpProtocol>
        <customHeaders>
            <add name="X-UA-Compatible" value="IE=Edge" />
        </customHeaders>
    </httpProtocol>
</system.webServer>