您如何将 Angular 项目投入生产？答案

【问题标题】：How do you put an angular project to prod?您如何将 Angular 项目投入生产？
【发布时间】：2020-11-02 13:51:53
【问题描述】：

这是我第一次使用 Angular，我正在尝试将我的网站置于 prod 中，但是当我访问该网站时，我只得到 index.html 及其 CSS 而没有呈现 . 当我尝试访问网站/主页之类的路线时，出现 Not found 错误...

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

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

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

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

感谢您的帮助！！

【问题讨论】：

您使用的是哪个网络服务器？尝试在浏览器中打开网络选项卡以检查无法访问哪些文件。这不是角度问题，而是您的网络服务器配置。
有据可查：angular.io/guide/deployment
我收到此错误 Le chargement du module à l'adresse « keviintondo.com/polyfills-es2015.748bb1dcd6097c27f8ab.js » a été bloqué en raison d'un type MIME interdit (« text/html »)。可以吗？
您需要添加 URL 重写。如果您的网站在 php 系统（即 ubuntu 系统）上，则将 URL 重写代码添加到 .htaccess，或者如果您使用的是 windows 服务器（即 windows 7/8/10），则使用 URL 重写代码到 web.config

标签： angular routes production

【解决方案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>

【讨论】：