Angular 6 开发踩坑
栏目: JavaScript · 发布时间: 5年前
内容简介：因为缺少依赖包：然后使用引用模板：在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:路由详细教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- ABP开发框架前后端开发系列---（14）基于Winform的ABP快速开发框架
- Java开发人员的Flex开发
- Java开发人员的Flex开发
- 行为驱动开发让开发做正确事
- 让开发者专注于应用开发，OpenCenter 3.0 开发者预览版发布
- 让开发者专注于应用开发，OpenCenter 3.0 开发者预览版发布
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
