angular知识点

IE不能正常显示

Polyfill

// import 'classlist.js'; // Run `npm install --save classlist.js`.

// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

browserslist

最后一行,移除 not

IE 9-11 # For IE 9-11 support, remove 'not'.

tsconfig.json

target: es2015 代表文件被编译为 es2015,将其修改为 ES5。

"target":"es5",

参考:https://zhuanlan.zhihu.com/p/98022887 

页面刷新404

原因:找不到路由地址

找到app.module.ts文件,这个是根模块。在模块中加入HashLocationStrategy和LocationStrategy服务。

import {PathLocationStrategy, LocationStrategy} from '@angular/common';

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy]

IE 缓存问题(get到数据不更新界面)

Header中添加:

'If-Modified-Since' : 'Mon, 26 Jul 1997 05:00:00 GMT';

'Cache-Control' : 'no-cache';

'Pragma' : 'no-cache';

ngx-translate

https://www.jianshu.com/p/9c3834b9feed

如何在Angular中使用可编辑的配置文件

作者:尊重

原文链接:https://zhuanlan.zhihu.com/p/53623574

来源:知乎

为配置设定定义 TypeScript 接口

export interface IAppConfig {

env:{name:string;};

appInsights:{instrumentationKey:string;};

logging:{console:boolean;appInsights:boolean;};

aad:{requireAuth:boolean;tenant:string;clientId:string;};

apiServer:{metadata:string;rules:string;};

}

创建 JSON 配置文件

assets\config\config.dev.json

"env": { "name": "DEV" },

"appInsights": { "instrumentationKey": "" }, 

"logging": { "console": true, "appInsights": false }, 

"aad": { "requireAuth": true,

"tenant": "", 

"clientId": "" }, 

"apiServer": { "metadata": "https://metadata.demo.com/api/v1.0/", 

"rules": "https://rules.demo.com/api/v1.0/" }

}

继续使用带有 Angular CLI 构建的 environment.ts 文件

创建一个服务以读取配置文件

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { environment } from '../environments/environment';

import { IAppConfig } from './models/app-config.model';

@Injectable()

export class AppConfig { 

static settings: IAppConfig; 

constructor(private http: HttpClient) {} 

load() { 

const jsonFile = `assets/config/config.${environment.name}.json`;

 return new Promise((resolve, reject) => { this.http.get(jsonFile).toPromise().then((response : IAppConfig) => {

 AppConfig.settings = response;

 resolve();

 }).catch((response: any) => {

 reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);

 }); }); }}

于应用创建前加载配置文件

import { APP_INITIALIZER } from '@angular/core';

import { AppConfig } from './app.config';

export function initializeApp(appConfig: AppConfig) { return () => appConfig.load();}@NgModule({

imports: [ , , , ], 

declarations: [ . . . ], 

providers: [

AppConfig, { provide: APP_INITIALIZER, useFactory: initializeApp, deps: [AppConfig], multi: true }

 ], bootstrap: [ AppComponent ]})export class AppModule { }

你可能感兴趣的:(angular知识点)