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文档中找到此信息。

Answer 2

我有一个类似的问题。涟漪图不起作用，工具提示的样式也怪异，不会出现在正确的位置。似乎我错过了所有以“ cdk-”开头的类。

如@gruuuvy所述，添加以下导入有效。

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

对我来说似乎很奇怪，我必须导入一个预制主题才能使这些功能正常工作。我在阅读documentation后发现，我缺少一个包含所有基本角形材料类别的包含项。

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

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

更新

2 个答案: