Angular 6 開發踩坑

jemygraw 發布于2019-05-23 17:28 / 610人閱讀

摘要：在工程中使用時候，先在的中添加依賴然后使用引用模板即可，如果圖片沒有刷新，嘗試然后重啟服務器。其中用來觸發動畫用來定義狀態的轉換用來定義樣式，對應不同的，也定義在不同的中。

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 初踩坑類踩坑必踩坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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