温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Angular6下使用ng-zorro-antd框架的坑

发布时间:2020-07-06 10:01:15 来源:网络 阅读:16936 作者:刺激乐天派 栏目:web开发

最近因为需要开发一个前后端分离的应用,一看angular6出来了,就立马想要用用看,所以立马确立了angular6+ng-zorro-antd的前端,但是在使用中发现,我没法引入相应的样式,看我的引入没有任何问题,通过1个多小时的查找资料,百度,分析,找出了这个坑。如下,现在项目也完成了也就来记录一下,希望有跟我一样问题的小伙伴可以免去一些麻烦。

https://github.com/angular/angular-cli/issues/10430

上面的链接是讲angular-cli 6.0的一些问题,包括了我这个问题,内容可以进入查看,便于理解。

1.angular6改变
        .angular-cli.json 变成 angular.json
        若干由根目录文件转移至 src 目录中

        ./karma.js 放入 src
        package.json 的 browserslist 节点转换成 ./src/browserslist 文件形式

        e2e 目录变化
        ./protractor.conf.js 放入 e2e
        e2e 目录增加 src 目录且将文件转移至该目录中,且注意相关路径
        目录文件结构变化并不是很大,也很好理解,可以自行对照。或者去查看angular6的版本说明。

2.ng-zorro是否支持angular6?
    http://ng.ant.design/docs/introduce/zh
    查看最新版本说明,是支持angular^6.0.0。

3.如何解决该问题
        a.如果不需要定制主题
            直接把angular.json文件中添加zorro的样式文件如下代码:
            "styles": ["node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css"]

        b.如果需要定制主题
            因为受限与https://github.com/angular/angular-cli/issues/10430的问题
            所以我们必须将less降级
            #npm i --save less@~2.7.0

            当依然遇到无法找到 ng-zorro-antd.less 文件时,相当程度是 less 路径因素,
            主要包括:
                                使用 cnpm 安装依赖包,其软链接破坏了实质的包路径,使用 npm 或 yarn。
                                ~@ng-zorro-antd 替换成 node_modules/ng-zorro-antd。

    备注:在确定好一个项目搭建框架之前,先要做好调研工作,不能一味追求最新版本,这样成本会很大的,如果问题越早发现了还好,能够及时的评估和解决,若是做到中途或者后面快结束发现就会很蛋疼。
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI