Angular material 表格 styling/animations 在生产中缺失
Angular material form styling/animations missing in production
以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:
我在 main.ts 中有 import 'hammerjs';，在 app.module 中导入了 BrowserAnimationsModule，在本地 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"
}
}
我在 this blog post 中找到了解决方案。
我结合了这两件事：
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"
]
我不确定两者是否都需要。我注意到有关从导入中删除“~”的博客文章和 Whosebug 问题，但我之前没有遇到过 "styles": [ { "input": "node_modules/..." } ]。我没有从 Angular Material 文档中找到此信息。
我遇到了类似的问题。涟漪图不起作用，工具提示的样式也很奇怪，不会出现在正确的位置。好像我错过了所有以“cdk-”开头的 类。
如@gruuuvy 所述，添加以下导入有效。
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
为了让这些东西起作用，我不得不导入一个预建主题，这对我来说似乎很奇怪。我发现，阅读 documentation，我缺少一个包含所有基本 angular material 类.
的包含
// 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();
以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:
我在 main.ts 中有 import 'hammerjs';，在 app.module 中导入了 BrowserAnimationsModule，在本地 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"
}
}
我在 this blog post 中找到了解决方案。
我结合了这两件事：
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"
]
我不确定两者是否都需要。我注意到有关从导入中删除“~”的博客文章和 Whosebug 问题，但我之前没有遇到过 "styles": [ { "input": "node_modules/..." } ]。我没有从 Angular Material 文档中找到此信息。
我遇到了类似的问题。涟漪图不起作用，工具提示的样式也很奇怪，不会出现在正确的位置。好像我错过了所有以“cdk-”开头的 类。
如@gruuuvy 所述，添加以下导入有效。
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
为了让这些东西起作用，我不得不导入一个预建主题，这对我来说似乎很奇怪。我发现，阅读 documentation，我缺少一个包含所有基本 angular material 类.
的包含// 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();