生产中缺少角材料形式样式/动画 [英] Angular material form styling/animations missing in production

查看：21
本文介绍了生产中缺少角材料形式样式/动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以mat-slide-toggle为例，在本地我看到HTML标签是这样的:

<div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>

但是在生产中，它缺少 Angular 属性:

<div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>

在生产中看起来是这样的:

它在本地看起来不错:

我遇到了与 input 等所有其他表单元素相同的问题.他们在生产中缺少 HTML 标记上的 ng* 属性.

https://material.angular.io/guide/getting-started:我在 main.ts 中有 import 'hammerjs';，在 app.module 中导入了 BrowserAnimationsModule，并运行了两者npm install --save @angular/material @angular/cdk @angular/animations 和 npm install --savehammerjs 本地.package.json 文件被推送到 Git 中，由生产下拉.

有谁知道我遗漏了什么或在哪里调查?也许我在桌面上全局安装了一些包，但没有将它包含在 package.json 中?

更新

我发现我的生产版本似乎缺少预构建的indigo-pink.css"文件.

我的 styles.scss 看起来像这样:

/* 你可以在这个文件中添加全局样式，也可以导入其他样式文件 */@import "src/assets/fonts/fonts.scss";@import "src/assets/old_css/some-css.min";@import "src/assets/old_scss/style";@import "./src/assets/old_scss/color.scss";@import "./src/assets/old_scss/variable.scss";@import "~@ng-select/ng-select/themes/material.theme.css";@import '~@angular/material/prebuilt-themes/indigo-pink.css';@import "./src/assets/scss/am.scss";

我意识到 ng-reflect 属性是调试属性.但我一直无法弄清楚为什么预构建的主题没有被构建到生产最小化的 CSS 文件中.

<小时>

我桌面上的 Angular CLI 版本:

Angular CLI:7.0.5节点:11.1.0操作系统:达尔文 x64角度:7.0.3... 通用、编译器、核心、表单、http、语言服务... 平台浏览器、平台浏览器动态、路由器套餐版本------------------------------------------------------------@angular-devkit/架构师 0.10.5@angular-devkit/build-angular 0.13.8@angular-devkit/build-optimizer 0.13.8@angular-devkit/build-webpack 0.13.8@angular-devkit/核心 7.0.5@angular-devkit/schematics 7.0.5@角度/动画 7.2.12@angular/cdk 7.3.7@angular/cli 7.0.5@angular/compiler-cli 7.2.9@angular/flex-layout 7.0.0-beta.24@角度/材料 7.3.7@angular/material-moment-adapter 7.3.6@ngtools/webpack 7.3.8@原理图/角度 7.0.5@原理图/更新0.10.5rxjs 6.3.3打字稿 3.1.6网络包 4.29.0

<小时>

我的构建脚本:

<预><代码>- echo 安装源 NPM 依赖项...- npm 安装- npm install -g @angular/cli- npm install -g gulp- echo Build 开始于`date`- ng build --prod --configuration=${BUILD_ENV} --build-optimizer- gulp purifyCSS//同步 S3

<小时>

我的package.json:

<代码>{姓名": ""，版本":0.0.0"，脚本":{"ng": "ng","start": "ng serve","build": "ng build","test": "ng 测试","lint": "ng lint","e2e": "ng e2e"},私人":真的，依赖关系":{"@angular/animations": "^7.2.12","@angular/cdk": "^7.3.7","@angular/common": "^7.0.3","@angular/compiler": "^7.0.3","@angular/core": "^7.0.3","@angular/flex-layout": "^7.0.0-beta.24","@angular/forms": "^7.0.3","@angular/http": "^7.0.3","@angular/material": "^7.3.7","@angular/material-moment-adapter": "^7.3.6","@angular/platform-b​​rowser": "^7.0.3","@angular/platform-b​​rowser-dynamic": "^7.0.3","@angular/router": "^7.0.3","@fancyapps/fancybox": "^3.5.6","@ng-bootstrap/ng-bootstrap": "^4.0.0","@ng-select/ng-select": "^2.3.6","@ngx-loading-bar/http-client": "^2.0.0-alpha.0","@ngx-translate/core": "^10.0.2","@ngx-translate/http-loader": "^3.0.1","@toverux/ngx-sweetalert2": "^4.0.0","@types/chartist": "^0.9.43","@types/googlemaps": "^3.30.11","@types/mixpanel": "^2.14.0","angular-archwizard": "^3.0.0","angular-highcharts": "^6.2.6","angulartics2": "^6.3.0","animate.css": "^3.7.0","图表": "^0.11.0","chartist-plugin-tooltip": "0.0.11","core-js": "^2.5.4","dayjs": "^1.7.7","font-awesome": "^4.7.0","hammerjs": "^2.0.8","highcharts": "^6.2.0","humanize-duration": "^3.15.3","jquery": "^3.3.1","mixpanel-browser": "^2.22.4","时刻": "^2.24.0","ng-animate": "^0.3.4","ng-click-outside": "^4.0.0","ng-scrollreveal": "^2.2.0","ngx-bootstrap": "^3.0.1","ngx-chartist": "^1.0.3","ngx-cookie-service": "^1.0.10","ngx-google-places-autocomplete": "^2.0.3","ngx-modal-dialog": "^3.0.0","ngx-order-pipe": "^2.0.1","ngx-分页": "^3.2.1","ngx-slick": "^0.2.1","ngx-slick-carousel": "^0.4.1","ngx-sweetalert2": "^0.2.7","node-sass": "^4.11.0","nonblockjs": "^1.0.8","npm": "^6.7.0","pnotify": "^4.0.0-beta.2","滚动条": "^2.4.5","rxjs": "^6.3.3","scrollreveal": "^3.4.0","slick-carousel": "^1.8.1","sweetalert2": "^7.25.0","validatorjs": "^3.14.2",zone.js":^0.8.26"},开发依赖":{"@angular-devkit/build-angular": "^0.13.8","@angular/cli": "~7.0.5","@angular/compiler-cli": "^7.2.9","@angular/language-service": "^7.0.3","@types/bootstrap": "^4.1.2","@types/highcharts": "^5.0.34","@types/jasmine": "~2.8.6","@types/jasminewd2": "~2.0.3","@types/jquery": "^3.3.4","@types/node": "~8.9.4","@types/scrollreveal": "0.0.3","codelyzer": "~4.2.1","gulp": "^3.9.1","gulp-purifycss": "^0.2.0","jasmine-core": "~2.99.1","jasmine-spec-reporter": "~4.2.1","karma": "^2.0.4","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "~1.4.2","karma-jasmine": "~1.1.1","karma-jasmine-html-reporter": "^0.2.2","ngx-page-scroll": "~5.0.0","量角器": "^5.4.2","ts-node": "~5.0.1","tslint": "~5.9.1","打字稿": "~3.1.6","webpack-bundle-analyzer": "^3.0.3"}}

解决方案

我在 这篇博文.

我结合了这两件事:

<块引用>

您可以直接在styles.css 文件中包含预先构建的angular-material-theme.@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

注意@angular"前面缺少~".

<块引用>

在 angular.json 文件中更新以下内容.

样式":[{输入":node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"},源代码/样式.css"] ```

我最初尝试过这个，但没有用:

样式":["node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",源代码/样式.css"]

我不确定两者是否都需要.我注意到有关从导入中删除~"的博客文章和 stackoverflow 问题，但我还没有遇到 "styles": [ { "input": "node_modules/..." } ]之前.我没有从 Angular Material 文档中找到此信息.

Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this:

<div
  class="mat-slide-toggle-ripple mat-ripple"
  mat-ripple=""
  ng-reflect-centered="true"
  ng-reflect-radius="20"
  ng-reflect-animation="[object Object]"
  ng-reflect-disabled="false"
  ng-reflect-trigger="[object HTMLLabelElement]">
  <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>
</div>

However in production, it's missing the Angular attributes:

<div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="">
  <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>
</div>

It looks like this in production:

It looks right locally:

I face the same issue with all the other form elements like input. They are missing the ng* attributes on the HTML tag in production.

https://material.angular.io/guide/getting-started: I have import 'hammerjs'; in main.ts, imported BrowserAnimationsModule in app.module, and ran both npm install --save @angular/material @angular/cdk @angular/animations and npm install --save hammerjs locally. The package.json file is pushed into Git, which production pulls down.

Does anyone know what I'm missing or where to investigate? Maybe I installed some package globally on my desktop and didn't include it in the package.json?

Update

I found that my production build seems to be missing the pre-built 'indigo-pink.css` file.

My styles.scss looks like this:

/* You can add global styles to this file, and also import other style files */

@import "src/assets/fonts/fonts.scss";
@import "src/assets/old_css/some-css.min";
@import "src/assets/old_scss/style";

@import "./src/assets/old_scss/color.scss";
@import "./src/assets/old_scss/variable.scss";

@import "~@ng-select/ng-select/themes/material.theme.css";
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import "./src/assets/scss/am.scss";

I realized the ng-reflect attributes are debug attributes. But I haven't been able to figure out why the pre-built theme isn't being built into the production minimized CSS file.

My Angular CLI version on my desktop:

Angular CLI: 7.0.5
Node: 11.1.0
OS: darwin x64
Angular: 7.0.3
... common, compiler, core, forms, http, language-service
... platform-browser, platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.5
@angular-devkit/build-angular      0.13.8
@angular-devkit/build-optimizer    0.13.8
@angular-devkit/build-webpack      0.13.8
@angular-devkit/core               7.0.5
@angular-devkit/schematics         7.0.5
@angular/animations                7.2.12
@angular/cdk                       7.3.7
@angular/cli                       7.0.5
@angular/compiler-cli              7.2.9
@angular/flex-layout               7.0.0-beta.24
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.6
@ngtools/webpack                   7.3.8
@schematics/angular                7.0.5
@schematics/update                 0.10.5
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.29.0

My build script:


            - echo Installing source NPM dependencies...
            - npm install
            - npm install -g @angular/cli
            - npm install -g gulp

            - echo Build started on `date`
            - ng build --prod --configuration=${BUILD_ENV} --build-optimizer
            - gulp purifyCSS
            // sync S3

My package.json:

{
  "name": "",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.12",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.3.7",
    "@angular/material-moment-adapter": "^7.3.6",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/router": "^7.0.3",
    "@fancyapps/fancybox": "^3.5.6",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@ng-select/ng-select": "^2.3.6",
    "@ngx-loading-bar/http-client": "^2.0.0-alpha.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@toverux/ngx-sweetalert2": "^4.0.0",
    "@types/chartist": "^0.9.43",
    "@types/googlemaps": "^3.30.11",
    "@types/mixpanel": "^2.14.0",
    "angular-archwizard": "^3.0.0",
    "angular-highcharts": "^6.2.6",
    "angulartics2": "^6.3.0",
    "animate.css": "^3.7.0",
    "chartist": "^0.11.0",
    "chartist-plugin-tooltip": "0.0.11",
    "core-js": "^2.5.4",
    "dayjs": "^1.7.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^6.2.0",
    "humanize-duration": "^3.15.3",
    "jquery": "^3.3.1",
    "mixpanel-browser": "^2.22.4",
    "moment": "^2.24.0",
    "ng-animate": "^0.3.4",
    "ng-click-outside": "^4.0.0",
    "ng-scrollreveal": "^2.2.0",
    "ngx-bootstrap": "^3.0.1",
    "ngx-chartist": "^1.0.3",
    "ngx-cookie-service": "^1.0.10",
    "ngx-google-places-autocomplete": "^2.0.3",
    "ngx-modal-dialog": "^3.0.0",
    "ngx-order-pipe": "^2.0.1",
    "ngx-pagination": "^3.2.1",
    "ngx-slick": "^0.2.1",
    "ngx-slick-carousel": "^0.4.1",
    "ngx-sweetalert2": "^0.2.7",
    "node-sass": "^4.11.0",
    "nonblockjs": "^1.0.8",
    "npm": "^6.7.0",
    "pnotify": "^4.0.0-beta.2",
    "rollbar": "^2.4.5",
    "rxjs": "^6.3.3",
    "scrollreveal": "^3.4.0",
    "slick-carousel": "^1.8.1",
    "sweetalert2": "^7.25.0",
    "validatorjs": "^3.14.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "~7.0.5",
    "@angular/compiler-cli": "^7.2.9",
    "@angular/language-service": "^7.0.3",
    "@types/bootstrap": "^4.1.2",
    "@types/highcharts": "^5.0.34",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.4",
    "@types/node": "~8.9.4",
    "@types/scrollreveal": "0.0.3",
    "codelyzer": "~4.2.1",
    "gulp": "^3.9.1",
    "gulp-purifycss": "^0.2.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngx-page-scroll": "~5.0.0",
    "protractor": "^5.4.2",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~3.1.6",
    "webpack-bundle-analyzer": "^3.0.3"
  }
}

解决方案

I found the solution in this blog post.

I did a combination of both these things:

You can directly include the pre-built angular-material-theme in the styles.css file. @import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Note the lack of "~" in front of "@angular".

Update the following in angular.json file.

"styles": [
  {
    "input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  },
  "src/styles.css"
] ```

I had originally tried this but it didn't work:

"styles": [
  "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
  "src/styles.css"
]

I'm not sure if both are required. I've noticed blog posts and stackoverflow questions regarding removing the "~" from the import, but I haven't come across "styles": [ { "input": "node_modules/..." } ] before. I didn't find this information from the Angular Material docs.

这篇关于生产中缺少角材料形式样式/动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆