web前端 10

IE浏览器报Promise未定义的错误,primeNG组件库在Angular2上的使用

By admin in web前端 on 2019年5月7日

背景:
一个vue-cli构建的vue项目,一个使用angular的项目,两个项目在其他浏览器一切正常,但是ie中会报Promise未定义的错误

第一:搭建一个新的Angular 2项目

    vue项目做完之后,在IE浏览器,或者360浏览器兼容模式下,根本显示不出来。(360浏览器分为极速模式以及兼容模式)兼容模式内核其实是IE浏览器(Trident内核),极速模式内核是谷歌浏览器(Chrommium内核)。

 

1、新创建一个Angular CLI项目(PC安装好node,npm Angular CLI ,通过百度查找安装方法)

  使用webstorm创建新的angular CLI项目,依次点击 New –>project—>
选中Angular CLI

web前端 1

其中Location是项目将要保存的问题,Node
interpreter是node.js安装的位置,Angular CLI:是angular
CLI安装的位置,我安装在全局global路径下。一般第一项需要指定路径之外,其余不需要改变。然后点击create就可以。

    有时候IE会报出红色的:web前端,‘vuex requires a Promise polyfill in this
browser.’
这表示不支持ES6的语法。

解决办法: 

2、生成的文件如下:

web前端 2

angular-cli.json :angular-cli的配置文件,

测试配置文件:karma.conf.js,

typescript的lin:t配置文件,

端到端的测试配置文件:protractor.conf.js,

导入es6模块的配置文件:polyfills.ts,

angular工程的main.ts引导启动文件,

全局样式style.css,

typescript配置文件:ts.config.json;

typescript的声明文件:typings.d.ts,

angular组建 app.components相关的css,html,ts。

    解决方法:在vue项目中引入:babel-polyfill

vue的项目:

3、当需要创建新的组件的时候可直接在点击一的app文件夹,

web前端 3

直接可新建一个组件,并且会自动配置好CSS,html
和ts文件,同时在app.modul.ts文件中会自动导入(如果要删除,需要手动删除该文件中导入的包).

1.首先下载babel-polyfill: 

  1.  npm install babel-polyfill
–save

第二: 开始搭建使用prime NG环境

        npm install –save-dev babel-polyfill

  2.  在main.ts中 import
“babel-polyfill”

4、至此已经新建完成一个完整的angular2项目,下面开始搭建如何使用primeNG

cd 到项目所在目录,

使用以下命令依次安装:

npm install primeng –save

npm install @angular/animations –save

npm install font-awesome@4.7.0 –save

安装过程中可能会出现错,根据提示信息进行修改。一般都能解决

2.引入(引入方式有三种,看情况选择):

  3.    如果使用了vuex,则在vuex的index.ts文件中也要  import
“babel-polyfill”,最好放在 import Vuex from ‘vuex’ 的前面

5、修改:angular-cli.json文件中的“styles”: 如下:

“styles”: [

“styles.css”,

“../node_modules/primeng/resources/primeng.min.css”,

“../node_modules/primeng/resources/themes/omega/theme.css”,

“../node_modules/font-awesome/css/font-awesome.min.css”

],

如图:

web前端 4

                1.require(“babel-polyfill”);

 

6、在app.module.ts中添加以下模块(如果有其他需要,还可以添加)

import {FormsModule} from “@angular/forms”;

import {HttpModule} from “@angular/http”;

import {BrowserAnimationsModule} from
“@angular/platform-browser/animations”;

import {ButtonModule, InputTextModule} from “primeng/primeng”;

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

HttpModule,

BrowserAnimationsModule,

InputTextModule,

ButtonModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

注意:不要重复添加,上下要一致

我在使用过程中添加了其他组件

web前端 5

*                2.import”babel-polyfill”;*

angular的项目:

7、在app.component.ts中添加

import {Component} from ‘@angular/core’;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’]

})

export class AppComponent {

constructor( ) { }

name: string;

message: string;

onClick() {

this.message = “Hello , ” + this.name;

}

}

web前端 6

*                3.module.exports={*

这个项目比较老,都是采用文件引入的方式,所以用import的方式会报错,这里解决办法:

8、在app.component.html中添加

web前端 7

*                            entry:[“babel-polyfill”,”./app/js”]*

  1.    npm install babel-polyfill
–save

第三:进行测试

在以上都完成之后,npm install  ,然后,npm start 
本地环境通过localhost:4200,一般是4200 ,在浏览器进行查看就可以

当需要其他primeNG组件(引用了其组件,但是没有导入相应的包,会报错),找到相应组件,然后导入依赖包就可以

*                };*

  2.    从  node_modules  文件夹下找到
_babel-polyfill@6.26.0@babel-polyfill  (名字根据版本号改变)下的  dist 
中  polyfill.min.js ,  将其拷贝到一个文件夹中,我这里是babel-polyfill

注:第三种方法适用于使用webpack构建的同学,加入到webpack配置文件(webpack.config.js)entry项中

  3.    在引入文件的index.html中引入即可,  <script src=”/babel-polyfill/polyfill.min.js”
type=”text/javascript”></script>

在vue脚手架cil中配置文件应该位于:

web前端 8

根目录下的build文件中

web前端 9

webpack.base.conf.js文件

不过vue建议直接在main.js中直接引用,方便快捷。

web前端 10

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有