Closed
Description
🐞 bug report
Affected Package
The issue is caused by package @angular/material @angular/cli
Is this a regression?
Did this behavior use to work in the previous version?
Yes, the previous version in which this bug was not present was: @angular/cli 10.2.0, @angular/material 10.2.6
Description
After running ng build --prod and running the app from dist folder, the Material Icons are not rendered and they're displayed as text only.
It looks like the issue is in the generated dist/index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style type="text/css" title="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap">@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
<style type="text/css" title="https://fonts.googleapis.com/icon?family=Material+Icons">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}</style>
<link rel="stylesheet" href="styles.ee97cfed8d37f1f7db6b.css"></head>
<body class="mat-typography">
<wsa-root></wsa-root>
<script src="runtime.359d5ee4682f20e936e9.js" defer=""></script><script src="polyfills.9bf4dad123bd95dda86e.js" defer=""></script><script src="main.5e47e3685e9510010a74.js" defer=""></script></body>
</html>In previous version, the dist/index.html file was generated as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.6c74a7e65f155112b6ba.css"></head>
<body class="mat-typography">
<wsa-root></wsa-root>
<script src="runtime.acf0dec4155e77772545.js" defer></script><script src="polyfills.35a5ca1855eb057f016a.js" defer></script><script src="main.f9dfe992debe5a586ef2.js" defer></script></body>
</html>🔬 Minimal Reproduction
I successfully reproduced the issue in my repo https://github.com/luixaviles/web-speech-angular. Just follow the next steps:
git clone -b 11.0.0-rc.1 https://github.com/luixaviles/web-speech-angular.git
npm install
ng build --prod
http-server dist/web-speech-angular
Then verify in your browser and take a look into dist/index.html vs index.html file.
🔥 Exception or Error
🌍 Your Environment
Angular Version:
Angular CLI: 11.0.0-rc.1
Node: 12.16.1
OS: darwin x64
Angular: 11.0.0-rc.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1100.0-rc.1
@angular-devkit/build-angular 0.1100.0-rc.1
@angular-devkit/core 11.0.0-rc.1
@angular-devkit/schematics 11.0.0-rc.1
@angular/cdk 11.0.0-rc.0
@angular/material 11.0.0-rc.0
@schematics/angular 11.0.0-rc.1
@schematics/update 0.1100.0-rc.1
rxjs 6.5.5
typescript 4.0.5
Anything else relevant?
All relevant details are already described in the issue.