Стиль / анимация формы углового материала отсутствуют в производстве

Взяв в качестве примера 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. Им не хватает атрибутов ng* в HTML-теге в рабочей среде.

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

какая у вас версия angular-cli?

imanshu15 09.04.2019 20:30

@ imanshu15 Я обновил вопрос, включив в него версию.

gruuuvy 09.04.2019 20:32

попробуйте построить --prod --build-optimizer=false

imanshu15 09.04.2019 20:33

@ imanshu15 Я могу попробовать, но почему это вызывает проблемы?

gruuuvy 09.04.2019 20:39

Я также обновил пост своим скриптом сборки.

gruuuvy 09.04.2019 20:39

Вы также можете добавить свой пакет json?

imanshu15 09.04.2019 20:43

@imanshu15 imanshu15 Я обновил package.json.

gruuuvy 09.04.2019 22:01
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
7
1 357
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я нашел решение в этот пост в блоге.

Я сделал комбинацию обеих этих вещей:

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

Обратите внимание на отсутствие «~» перед «@angular».

Update the following in angular.json file.

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

У меня была аналогичная проблема. Рябь не работала, а всплывающие подсказки имели странный стиль и не появлялись в нужном месте. Казалось, что я пропустил все классы, начинающиеся с "cdk-".

Добавление следующего импорта сработало, как упоминал @gruuuvy.

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

Мне показалось странным, что мне пришлось импортировать готовую тему, чтобы все это работало. Я узнал, читая документация, что мне не хватает включения, которое содержит все основные классы угловых материалов.

// 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();

Другие вопросы по теме