您如何将 angular 项目投入生产？

Question

这是我第一次使用 Angular，我正试图将我的网站投入生产，但是当我访问该网站时，我只得到 index.html 及其 CSS并且没有渲染。当我尝试访问 website/home 之类的路由时，出现未找到错误 ...

我已经使用 ng build --prod 并将 dist 内容放入 ecowebhosting

我不知道我需要把程序的哪一部分放在这里所以我对结构进行了屏幕截图：

That's my server dir

That's my project structure

这是我的 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));

如果您需要更多代码，请问我 =)

感谢帮助！！

Answer 1

我猜这是 URL 重写问题。如果您的网站位于 PHP 服务器上，则使用带有以下文本行的 .htaccess 文件

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]

如果您的网站在 windows 系统上，请将以下代码行添加到 web.config 文件

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

您如何将 angular 项目投入生产？

How do you put an angular project to prod?

production

routes

angular