声明项目的全局类型,同时不需要在各个Ts文件中import {XXX} from 'xxx' ,就能直接引用!方法是:
增加src/typings.d.ts文件 ,在文件中增加 interface IName { name:string ; } 的类型定义。
那么IName这个类型在所有的TS文件中自动可以访问 !
注意:不要在代码前增加 export 的关键字。
参考: 3rd Party Lib
通常我们在项目中引用第三方包,一种是import 方法,其代码最终是打包一起;一种是配置angular.json文件,其中有scripts : [] ,在里面增加相应的js完整路径达到引用js文件, 其代码不参与构建,会在首页加载时,做为普通的外挂脚本文件引入。
无论是打包在一起,还是外挂脚本,都是会增加初始加载的负担!比如echarts.js 有800kb的大小,在初始的登录页面,用户根本用不到图表的功能,甚至进入主界面的模块后,也不需要加载它, 当仅我在点击到某些有图表页面的页面时,才必须加载echarts.js文件。我们的项目代码通常会拆分成多个“功能模块”,每个模块负责一组功能相近的页面,这些模块可以懒加载,就是当路由到相关页面时,才去加载模块。
那么如何实现,在懒加载模块时,动态的引入一个依赖js文件?
这里用到两个技术:
1、解析路由守卫,参考官方文档, 路由守卫有三种:
2、动态插入js脚本。
先new Promise() 后,创建一个<script>的dom元素指向动态加载的js文件,并监听它的onload事件,然后把它插入到页面的头部。当加载成功后,让Promise对象resolve即可。
完整的代码:
先定义一个PreloadScriptResolver服务:
@Injectable({
providedIn: 'root'
})
export class PreloadScriptResolver implements Resolve<IPreloadScriptResult[]> {
// 1、全局可动态插入的js列表。
private scripts: any = {
echarts: { loaded: false, src: "assets/lib/echarts.min.js" },
canvasGauges: { loaded: false, src: "assets/lib/gauge.min.js" },
sockjs: { loaded: false, src: "assets/lib/sockjs.min.js" }
};
load(...scripts: string[]) {
const promises = scripts.map(script => this.loadScript(script));
return Promise.all(promises);
}
loadScript(name: string): Promise<IPreloadScriptResult> {
return new Promise((resolve, reject) => {
if (this.scripts[name].loaded) { // 防止多次加载
resolve({ script: name, loaded: true, status: 'Already Loaded' });
} else {
// 2、动态插入js文件
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.scripts[name].src;
script.onload = () => {
this.scripts[name].loaded = true;
resolve({ script: name, loaded: true, status: 'Loaded' });
};
script.onerror = (error: any) => reject({ script: name, loaded: false, status: 'Loaded Error:' + error.toString() });
document.head.appendChild(script);
}
});
}
// 3、解析守卫从当前路由的data.preloadScripts中取到依赖的js列表,并加载它们
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<IPreloadScriptResult[]> {
return this.load(...route.routeConfig.data.preloadScripts);
}
}
去相应模块的路由定义文件中:
const routes: Routes = [
{
path: "",
component: DashboardComponent,
resolve: {
preloadScripts: PreloadScriptResolver
},
data: {
preloadScripts: ["echarts", "canvasGauges", "sockjs"] // 5、传入当前路由依赖的js列表
},
children: [
{
path: "widgets",
。。。。。。
}