酷酷是懒虫

这个屌丝很懒，什么也没留下！

热门标签

Angular11(Cli) 在打包 ng build 后的常见问题处理方案_angular项目使用ng build打包部署后报错

作者：酷酷是懒虫 | 2024-08-13 19:05:51

踩

angular项目使用ng build打包部署后报错

前言：

我自认为，到目前为止 Angular 框架始终保持着前端框架领域中的龙头老大位置，虽然在前端框架领域中有很出色的React.js和易上手的Vue.js框架。

从使用以上3个框架的情况来看，我个人更喜欢Angular，尤其是在支持使用TyptScript以后，当然React和Vue都有，而且各个框架都有自己的特色，所以在选择时要根据项目大小、需求等方面来选择合适的前端框架，这里就不多说了。

一、Angular11(Angular Cli)项目打包后，打开index.html页面是空白的问题

问题a：因为路由和文件路径不对引起的报错

解决方法1：

把项目工程 src 目录下的 index.html 文件中的 <base href="/"> 改为 <base href="./">


<!doctype html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <title>Angular8-Demo</title>
  <!-- <base href="/"> -->
  <base href="./">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
 
<body>
  <app-root></app-root>
</body>
 
</html>

解决方法2：

在打包时向打包命令的后面指定公共路径

ng build --prod --base-href ./

问题b：因为Angular11 在打包生成好的项目文件，需要在服务器环境下才能运行起来

解决方法1：

在执行 ng build 或 yarn run build 等打包命令后，默认会在项目工程根目录（和src同一级目录）下生成一个叫dist的目录，这个目录下会以当前项目名来命名的一个文件夹，在这个文件夹里的文件，就是项目在打包生成后的相关文件啦！

如果直接打开index.html文件，在浏览器中还是会显示空白页，还是会报错的，所以有要将这些代码文件上传到服务器上才能正常运行起来。

如果不上传服务器也可以用 npx hs 命令（npx是node环境中，在npm 5.2版后自带的）在本地启动一个服务器环境，启动方法如下：

(1)、先打开打包后的根目录（就是在dist / xxx项目名/目录）

(2)、在当前（打包后的根目录）目录中打开命令行工具，输入 npx hs

(3)、在浏览器地址栏中打开：http://127.0.0.1:8080/index.html 或 http://localhost:8080/index.html 就可以在本地运行起来啦！

解决方法2：

使用http-server，或者 live-server服务环境，来在本地运行项目：

http-server：http-server - npm

http-server：live-server - npm

(1)、用npm 或 yarn 工具全局安装一个服务器环境 http-server 或者 live-server


// 用 npm 安装 
npm install http-server -g  或 npm install live-server -g 
 
 
// 或 yarn 安装
yarn global add http-server 或 yarn global add live-server

(2)、打开打包后的根目录（就是在dist / xxx项目名/目录）

(3)、在当前（打包后的根目录）目录中打开命令行工具，根据安装的服务器环境：输入 http-server 或者 live-server

(4)、在浏览器地址栏中打开：http://127.0.0.1:8080/index.html 或 http://localhost:8080/index.html 也可以在本地运行起来哦！

二、Angular11(Angular Cli)项目打包的文件很大，甚至导致内存溢出、前端页面加载慢等问题。

主要原因是 Angular 为了在项目打包生成后，便于调试和问题的定位，所以就默认没有对项目打包生成后的文件(css，js等)进行压缩、增加文件版本号、还会多出对应的xxx.map文件等。

解决方法1：

(1)、在项目工程根目录（和src同一级目录）中打开angular.json文件，在architect -> build -> options项中添加如下代码


"optimization": true,   // 开启优化
"buildOptimizer": true,
"outputHashing": "all", // 文件名散列命名输出
"aot": true,
"sourceMap": false,     // 关闭生成调试映射文件
"extractLicenses": true,
"extractCss": true,     // CSS文件优化
"namedChunks": false,
"vendorChunk": false,

实例效果：

(2)、在angular.json文件中添加好以后，执行如下打包命令：（命令就是在package.json中的scripts项中定义的那个key）


// 打包命令
ng build
 
// 或者
npm run build

解决方法2：

(1)、在项目工程根目录（和src同一级目录）中打开package.json文件，在scripts项中添加如下代码

"buildProd": "node --max-old-space-size=8000 node_modules\\@angular\\cli\\bin\\ng build --prod --build--optimizer --aot"

实例效果：

(2)、在package.json文件中添加好以后，再执行如下打包命令：（命令就是在package.json中的scripts项中定义的那个key）


// 打包并压缩
npm run buildProd

实例效果：

这样在打包生成后的css，js等文件就被压缩过了、也增加文件版本号、也没有xxx.map等文件啦！

三、Angular11(Angular Cli)项目打包之后，发布到服务器上，在跳转路由、或刷新页面时，报404 - Page Not Found问题。

由于Angular11 Cli 的路由默认是基于HTML5有历史记录的路由方式，在进行相应的路由(页面)跳转，刷新页面后，服务路由找不到URL上的页面地址，所以就会报 404 - Page Not Found。

要解决这个问题的话，就要把默认历史记录的路由方式换成哈希路由方式即可。

解决方法1：

修改发布服务器配置文件：

1、Nginx服务器


# 在Nginx服务器的conf/nginx.conf配置文件中添加如下代码即可
 
location / {
    try_files $uri $uri/ /index.html;
}
 
# 注：修改后nginx.conf配置文件后，一定要重启nginx服务，配置才能生效！！

# 开启前端请求API接口时，报跨域问题的配置


# 在Nginx服务器的conf/nginx.conf配置文件中添加如下代码即可。
 
http {
    # 设置指定可以请求的来源(域名)；（*表示允许所有域名访问，也可以指定可访域名）。
    add_header 'Access-Control-Allow-Origin' '*' always; 
 
    # 设置指定可以请求的方法；
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, DELETE, PUT, OPTIONS';
 
    # 设置指定可以请求的请求头；
    add_header 'Access-Control-Allow-Headers' '*'; # 'DNT, X-Mx-ReqToken, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Access-Control-Expose-Headers, Token, Authorization'
 
    # 当跨域请求需要携带cookie是，请求头中需要设置 Access-Control-Allow-Credentials: 'true'。
    # 注：当值为true时，Access-Control-Allow-Origin: 必须有明确的值(指定可访域名)，不能是通配符(*)。
    # add_header 'Access-Control-Allow-Credentials' 'true';
 
    # 防止页面在iframe中被嵌套: DENY(不允许)，SAMEORIGIN(允许相同域名页面)，ALLOW-FROM ' https://www.xxx.com'(指定来源)
    add_header X-Frame-Options SAMEORIGIN;
}
 
 
# 注：上面的配置是加在http配置项中，也可以加到server 或 location 的配置项中均可。
 
http {
 
    server {
 
        location / {
 
        }
    }
}
 
# 注：修改后nginx.conf配置文件后，一定要重启nginx服务，配置才能生效！！

2、IIS 服务器


// web.config文件
 
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          //将url中的参数设为 "/" 或者 "/index.html" 
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

解决方法2：

在开发项目工程根目的src / app / 的 app.module.ts 文件中添加Angular内置的哈希路由模块：


// 引入Angular内置的哈希模块
import { LocationStrategy, HashLocationStrategy } from "@angular/common";
 
 
// 把哈希模块注入到配置中
providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
],

实例效果：

解决方法3：

在开发项目工程根目的src / app / 的 app-routing.module.ts 文件中开启哈希路由方式：{useHash: true}


@NgModule({
  
 // imports: [RouterModule.forRoot(routes)], 
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
})

实例效果截图：

OK 就酱子！

有情链接：更多Angular (Cli) 学习Demo由此进入：https://github.com/MuGuiLin/Angular

Angular官网：Angular

Angular中文：Angular

Angular CLI ：Angular

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/976124