Angular 6 开发踩坑
栏目: JavaScript · 发布时间: 7年前
内容简介：因为缺少依赖包：然后使用引用模板：在app.module,ts中引用
-
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??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module '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的<head>中添加依赖：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet"> 复制代码
然后使用引用模板： <i class="material-icons">account_circle</i>
即可，如果图片没有刷新，尝试 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')
]),
复制代码
This function targets specific HTML elements within a parent component and applies animations to each element individually <div [@triggerName]="expression">...</div>;
- Routing:路由详细教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
An Introduction to Probability Theory and Its Applications
William Feller / Wiley / 1991-1-1 / USD 120.00
Major changes in this edition include the substitution of probabilistic arguments for combinatorial artifices, and the addition of new sections on branching processes, Markov chains, and the De Moivre......一起来看看 《An Introduction to Probability Theory and Its Applications》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
Base64 编码/解码
Base64 编码/解码