角度材料形成生产中缺少的样式/动画

Question

以mat-slide-toggle为例，在本地我看到HTML标签如下所示：

<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>

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

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

在生产中看起来像这样：

它看起来在当地：

我和所有其他形式元素（如input）面临同样的问题。他们缺少生产中HTML标签的ng*属性。

https://material.angular.io/guide/getting-started：我在import 'hammerjs';有main.ts，在BrowserAnimationsModule进口app.module，并在当地运行npm install --save @angular/material @angular/cdk @angular/animations和npm install --save hammerjs。 package.json文件被推入Git，生产下降。

有谁知道我错过了什么或在哪里调查？也许我在桌面上全局安装了一些软件包，并没有将它包含在package.json中？

更新

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

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

/* 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";

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

---

我的桌面上的Angular CLI版本：

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

---

我的构建脚本：

            - 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

---

我的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"
  }
}

Answer 1

我在this blog post找到了解决方案。

我做了这两件事的组合：

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

注意“@angular”前面缺少“〜”。

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

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

我原本试过这个，但它不起作用：

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

我不确定两者是否都是必需的。我注意到有关从导入中删除“〜”的博客帖子和stackoverflow问题，但我之前没有遇到过"styles": [ { "input": "node_modules/..." } ]。我没有从Angular Material文档中找到这些信息。