Angular6打包的那些事

CocoaChina 发布于2019-07-25 14:28 / 2347人阅读

摘要：在看看的配置下其中可以防止刷新的问题。这样我的可以用一个做代理，同时访问我的两个项目，两个项目。他们的地址是项目博客项目写着玩的，前端比较差以上可以说是解决了很大部分的坑了。

Angular在升级到6的时候，多了许多新的功能，比如ng命令，在从5升级到6的时候是无痛升级的，但是升级到了6之后，也有许多地方做了改变，比如Angular的设置，Angular的base-path等，通过在一台机器上部署多个Angular的单页应用，来说明这些问题。

angular 打包,缩小包体积命令

ng build --prod --aot
来源 
来源网站打不开了，但是找到一个不错的博客

angular 6新的设置方式,我想在Angular新建项目的时候使用yarn而不是npm

You should update the article.
With @angular/cli version 6+ it will be
SET GLOBAL: ng config —g cli.packageManager npm
SET LOCAL: ng config cli.packageManager npm
GET: ng config cli.packageManager
The diff is:

No more get/set commends, only config and get/set is inferred.

needs to prefix cli properties with cli. because there are other things now, from devkit…

base-path设置

这个设置(见词知意)可以让项目添加一个新的URL前缀，比如默认是/，你可以设置成/blog
在angular.json文件中找到projects->todo-web(项目名字)->architect->build->options下新增:

"baseHref": "/todo/",
"deployUrl": "/todo/"

项目打包上传到服务器

我的项目在服务器上的位置: /todo/todo

我还有另一个angular的项目位置在: /blog/blog, 他们的项目结构是相同的。
在看看nginx的配置(server下)：

其中try_files可以防止Angular刷新404的问题。

这样我的可以用一个Nginx做代理，同时访问我的两个web项目，两个api项目。
他们的地址是:

[TODO项目]https://kazma233.me/life/

[博客项目, 写着玩的，前端比较差]https://kazma233.me/blog/

以上可以说是解决了很大部分的坑了。

GPU云服务器云服务器云服务器那些事 angular6 那些奇怪的错误云计算的股票有那些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40133.html

angular6根据environments配置文件更改开发所需要的环境

摘要：前端开发过程中，我们常常需要根据需求去运行或者打包不同环境的代码，幸运的是，给我们提供了配置，但是的配置方式和的其他版本的配置方式是有所不同的，下面我就分别介绍在测试预生产环境下实现配置。前端开发过程中，我们常常需要根据需求去运行或者打包不同环境的代码，幸运的是，angular给我们提供了environments配置，但是angular6.x的配置方式和angular的其他版本的配置...

seasonley 2019-08-23 15:39 评论0 收藏0
Angular6的服务和依赖注入

摘要：把组件和服务区分开，以提高模块性和复用性。而要把这些任务委托给各种服务。它只会通过依赖注入让你能更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。 Angular 把组件和服务区分开，以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。理想情况下，组件的工作只管用户体验，而不用顾及其它。它应该提供用于数据绑定的属性和...

sugarmo 2019-08-22 18:18 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 评论0 收藏0