问题笔记——Angular篇由于使用Angular框架进行项目的开发，过程或多或少都遇到一些问题，习惯性使用记事本记录，

由于使用Angular框架进行项目的开发，过程或多或少都遇到一些问题，习惯性使用记事本记录，后面再收集整理，因此把一些常用到整理出来，包括了1.x至8版本的一些问题。

多环境配置

angular 7 打包部署后，刷新出现404问题

根因：同题解决：在App.module.ts 中增加 import { HashLocationStrategy,LocationStrategy } from "@angular/common"; 服务提供商中引入： providers: [{ provide: NZ_I18N, useValue: en_US },{provide:LocationStrategy, useClass: HashLocationStrategy}], 这是因为：访问angular站点会自动在根节点后面加一个#锚点，解决刷新报404错误

angualr 7 请求出现跨域

问题：如图

根因：当在进行跨域请求的时候，跨域请求的话浏览器HTTP请求会自动发出一个预检请求，即OPTIONS请求，访问[服务器]是否允许该请求，返回允许该域名进行请求的相关信息后会再发出GET或者POST请求，[服务器]如果没有没有针对OPTIONS请求进行单独处理，会出现 provisional headers are shown，阻止了请求的正常加载。

ng update 2.0 问题及解决办法

Package "tslint-language-service" has an incompatible peer dependency to "typescript" (requires ">= 2.3.1 < 3", would install "3.2.4").

根因：当前typescript 版本低，解决：npm i typescript@3.2.4

选择时间ng-change 不生效

出现根因：时间控件重写了ng-change问题解决方法：

由于onchange与焦点获取和失去相同，使用ng-blur代替ng-change
使用原生onchange="angular.element(this).scope().xxController.xxFn();

angular 5升级到angular6过程

由于安装angular-cli 为最新版，项目当中用的是v5，所以需要升级过程：

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
npm install –save-dev @angular/cli@latest
ng update @angular/core

angular1.6阻止路由

根因：因用户没有权限，通过URL也可以跳转至该页面

解决方法：因其使用ui-router——管理状态来管理路由Controllers控制器，其提供了$stateChangeStart;

State Change Events 状态改变事件

$stateChangeStart——当模板开始解析之前触发，而使用event.preventDefault()可以阻止模板解析的发生，可以通过该方法对用户判断是否有权限。无则禁止跳转

*参考：bubkoo.com/2014/01/01/…

angular location.serach()更改URL参数，以便刷新页面保持状态

根因：解决方法：参考：https://github.com/angular-ui/ui-router/issues/1079

    // 使用 "hack"临时禁用搜索on设置查询参数，设置reloadOnSearch的 state状态为false,防止重新加载控制器
      $state.current.reloadOnSearch = false;
    // 更新的参数设置
      $location.search('orderId', vm.orderId);    
   // 然后re-enable重新加载。
      $timeout(function () {
        $state.current.reloadOnSearch = undefined;
      });

待续

问题笔记——Angular篇