ANGULAR学习问题记录

1-Angular项目中 出现 NullInjectorError: No provider for HttpClient 的解决办法20190904
我在使用http发请求时出现上述问题，最后发现即使引入HttpClient ，仍然需要引入模块。
import { HttpClientModule } from ‘@angular/common/http‘;

2-parameter result implicitly has an any type
在angualr4的http get请求的回调函数中，result=>{} 会报此错误。语法上感觉毫无问题，经查询解决方案是
tsconfig.json 中 添加"noImplicitAny": false,

3-core.js:6486 ERROR SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (
我在函数中通过const response = JSON.parse(result); 解析后台响应数据时报该错误，因为后台返回的数据类型就是json，就不能在用该方法解析了，直接用返回值即可。

4-在angular中请求后台url报404，并且没有拼写错误
这是因为请求相对路径const url = “/customer/queryAllCustomers” 时，浏览器会自动在该url前面加上http://localhost:4200，即angular前台的域名和端口号，当然请求不到后台服务了。此时手动将url的补齐，浏览器就不会自动加上angular服务域名和端口了，如下
const url = “http://localhost:8080/customer/queryAllCustomers”;
每次加域名和端口有点麻烦，或许nginx可以解决这个问题，后续尝试。

5-Access to XMLHttpRequest at ‘http://localhost:8080/customer/queryAllCustomers’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
我们的项目是一个前后台分离项目，前台angular4，后台springboot。前后台独立部署，端口号都不一样，前台请求后台属于跨域访问了。springMVC解决该跨域请求问题的方法是在springboot的controller类上加注解 @CrossOrigin 。也可以在配置文件中配置跨域访问的路径。另外要注意前后台分离项目后台统一返回json数据，因此用RestController注解。
参考文件
https://www.cnblogs.com/fanshuyao/p/7168471.html

5-1前后端分离之后，每次通过angular请求后台，都会创建新的session，无法记录登录信息。
我们想要的是第一次登录，后台创建session之后，tomcat将sessionid放入cookie中，返回到前台。前台下次请求，cookie携带着sessionid，获取之前创建的session，这样就维持登录了。但是实际每次请求都会创建新的session，这是前后端跨域请求导致的，后台配置 @CrossOrigin 只是让前台可以访问后台了，但无法解决sessionid一致问题。
因为我们用的是angular框架，这里给出angular6的解决方案，在hhtpClient.post的请求可选参数中加一个字段
{headers: headers, withCredentials:true}
这样前后端sessionid就一致了。

6-如何在angular的响应中获取响应头部？angular4 Property ‘headers’ does not exist on type ‘Object’.
下面代码报上述编译错误
//let redirects = result.headers.getAll(‘REDIRECTYRL’);
改成下面之后，不会有编译错误，但执行时依然无法获取headers，追踪代码发现响应数据中无headers，那么如何获取我们在浏览器看到的headers呢？想重定向啊！
let redirects1 = result[‘headers’].getAll(‘REDIRECTYRL’);
不能这样写的原因是ng新版本get请求返回的类型是Observer类型，老版本返回Response类型。具体怎么重定向待后续研究Observer。

7-Invalid character found in the request target [/file/download?filePath=16366
出现这种错误一般是url中含有不合法字符，请仔细检查。

8-ERROR Error: Uncaught (in promise): Error: Cannot find module ‘./login/login.module.ts’
Error: Cannot find module ‘./login/login.module.ts’
新建的LoginModule需要在根模块中注入，在imports数组加LoginModule。
观察发现angualr通常imports数组引入模块，declarations数组引入组件Component。

9-ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:- Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.- There is corresponding configuration for the animation named @transitionMessages defined in the animations field of the `@Component
这种错误看提示是没导入某些模块，按提示倒入缺少的模块即可解决问题，不必纠结。

10-子组件引入报红
这是因为在使用子组件的子模块中未declarations该组件。非子模块中的组件使用未报错，是因为根组件中声明了该组件。例如，在我的shopping项目中，login模块中的组件只有在login模块声明了该组件，才能正常使用。

11-路由懒加载问题
这个问题困扰了我很久，仍未解决。不引入模块没问题，引入模块之后 / 不走默认配置路径

12-The Component ‘NavComponent’ is declared by more than one NgModule.
我在login模块和app模块都declarations导航栏NavComponent，报上述错误。聚stackover网友解答是要建一个公共模块， 我在公共模块ShareModule中如下配置，其它模块只需引入公共模块，无须declarations，便可使用导航栏NavComponent。
declarations: [
ExampleComponent,
],
exports: [
ExampleComponent,
]
但是上述修改，编译时汇报国际化错误，这表明根模块中的国际化配置，只管到根模块可路由直达的组件，子模块需要设置自己的国际化。因此公共模块中也需配置国际化。

13- Error: Quotes are not supported for evaluation!
Statement: //localhost:8080/file/download?fileId={{file.fileId}} located at
这是因为下面的属性绑定中不能用插值语句
<a [href]=“http://localhost:8080/file/download?fileId={{file.fileId}}” class=“file-download”>下载
应该把 href 的 [] 去掉，或者Url由ts文件拼接，在模板中绑定。
<a [href]=“http://localhost:8080/file/download?fileId={{file.fileId}}” class=“file-download”>下载