angular 打包及发布 http-server搭建服务器

maozuai~zi

已于 2022-06-24 08:38:46 修改

阅读量1k

点赞数

分类专栏： angular 文章标签： angular

于 2022-06-10 17:18:33 首次发布

本文链接：https://blog.csdn.net/qq_36557846/article/details/125225219

版权

angular 专栏收录该内容

44 篇文章

订阅专栏

打包优化方法

--build-optimizer
// Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.
// 使用“aot”选项时启用“@angular devkit/build optimizer”优化。

--vendor-chunkng
// Use a separate bundle containing only vendor libraries.
// 第三方组件单独打包

// 组合使用的打包方式
ng build --prod --aot --build-optimizer --vendor-chunkng

在package.json中配置build打包方法

"scripts":{
"build": "ng build --prod --aot --build-optimizer --vendor-chunkng",
}

在这里插入图片描述
以后不用每次写那么长的打包语句
使用npm run build

http-server搭建服务器

http-server是一个超轻量级web服务器，在目录下启动http-server即可访问网站

// 进入目录
cd dist/routrefuzi
// 启动http-server
http-server
// 访问网站
http://127.0.0.1:8080/home

在这里插入图片描述

打包后包太大的问题

解决方法：
1、刚开始使用的是ng build --prod 打包
但需要路由的写法：

const routes: Routes = [
  {
    path: 'home',
    // 使用() => import('./home/home.module').then(m => m.HomeModule) ng build --prod打包后会报错：Runtime compiler is not loaded
    // loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
    loadChildren: './home/home.module#HomeModule'
  }];