Angular 6 开发踩坑

jemygraw 发布于2019-05-23 17:28 / 669人阅读

摘要：在工程中使用时候，先在的中添加依赖然后使用引用模板即可，如果图片没有刷新，尝试然后重启服务器。其中用来触发动画用来定义状态的转换用来定义样式，对应不同的，也定义在不同的中。

ng new project-name --style=scss --routing 初始化工程文件之后，如果运行 ng serve -o会出现如下错误:

</>复制代码 
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src");"node-sass"
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.sassLoader (/home/local/BROCELIA/zhli/WebstormProjects/ng6-project/node_modules/sass-loader/lib/loader.js:46:72)
ℹ ｢wdm｣: Failed to compile.

因为缺少依赖包：node-sass，但是只用sudo npm install node-sass是行不通的，需要使用：sudo npm install --save-dev --unsafe-perm node-sass才可以正常安装这个依赖包。

如果使用sudo初始化工程文件，文件夹会被锁定，导致webstorm无法获取权限无法编辑文本，所以在terminal中使用sudo chmod 777 ng6-project来给文件夹赋予所有权限，然后使用sudo chown -R zhli /home/local/BROCELIA/zhli/WebstormProjects 来给父文件夹赋予权限，此时就可以正常编辑文件了。

在Angular工程中使用Material icons时候，先在src/index.html的中添加依赖：

</>复制代码 
<link href="https://fonts.googleapis.com/icon"); rel="stylesheet">
<link href="https://fonts.googleapis.com/css"); rel="stylesheet">

然后使用引用模板：即可，如果图片没有刷新，尝试sudo npm install material-design-icons 然后 ng -serve -o重启服务器。

依赖安装指令集合：

</>复制代码 
// 动画依赖
sudo npm install @angular/animations@latest --save
// Material icons
sudo npm install material-design-icons

创建组件指令集合：

</>复制代码 
// 创建新组件
ng generate component details
// Request API 服务
ng generate service data

Angular 动画：

在app.module,ts中引用import {BrowserAnimationsModule} from "@angular/platform-browser/animations";并在import中添加BrowserAnimationsModule。然后在component中添加依赖import {trigger, style, transition, animate, keyframes, query, stagger} from "@angular/animations";并在@component标识符中定义动画。

</>复制代码 
animations: [
    trigger("listStagger", [
      transition("* <=> *", [
        query(
          ":enter",
          [
            style({ opacity: 0, transform: "translateY(-15px)" }),
            stagger(
              "50ms",
              animate(
                "550ms ease-out",
                // animate ("duration delay easing")
                style({ opacity: 1, transform: "translateY(0px)" })
              )
            )
          ],
          { optional: true }
        ),
        query(":leave", animate("50ms", style({ opacity: 0 })), {
          optional: true
        })
      ])
    ])

其中：

Trigger用来触发动画

transition用来定义状态的转换:open => close, close => open, * => open, * => close, close => *, open => *,void => *, ":enter", ":leave"

style用来定义样式，对应不同的state，也定义在不同的state中。样式的名称要用驼峰法命名：camelCase

</>复制代码 
state("open", style({
  height: "200px",
  opacity: 1,
  backgroundColor: "yellow"
})),

animate就是动画的定义

</>复制代码 
transition("open => closed", [
    animate("1s")
  ]),

query()用于在已经定义了动画的元素内部定义其他的动画,This function targets specific HTML elements within a parent component and applies animations to each element individually

tagger()用于在不同的动画之间定义timing gap,在不同的animation之间增加动画延迟

引用时，使用@来引用动画Trigger的名称:

...

;

Routing: 路由详细教程

GPU云服务器云服务器微信开发用阿里云什么配置服务器6 初踩坑类踩坑必踩坑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7291.html

angular2 + JSSDK的微信分享定制总结

摘要：本篇文章就记录我的做微信分享信息定制的过程和踩坑总结。但是，这就要求在每个组件中都加微信分享代码，会导致维护困难。在微信浏览器内打开任何网页，若不配置分享接口，微信会默认使用如下信息作为分享信息：默认标题：HTML的title 默认连接：当前页面的地址，即location.href 默认图片：会取当前页面body内最前面的一张符合条件的图片（尺寸必须大于300px × 300px...

qylost 2019-08-20 14:51 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
webpack v2升级踩坑笔记

摘要：从再到目前当红明星，前端模块打包技术日新月异，在今年月份和月份左右接连更新了和版本为了减少冗余模块，缩减文件大小，中也加入了关于的特征，可以查看知乎如何评价新引入的代码优化技术的讨论。从Grunt->gulp->webpack,再到目前当红明星rollup，前端模块打包技术日新月异，webpack在今年1月份和6月份左右接连更新了v2和v3版本,为了减少冗余模块，缩减bundle文件...

JayChen 2019-08-20 17:59 评论0 收藏0