No placeholder or text in input field #6197
Description
Bug, feature request, or proposal:
I have updated a project from Angular 2 to Angular 4 and now I'm having a very strange issue: in all browsers, except FireFox on a Mac, the placeholder and text are not visible in an input field.
What is the expected behavior?
This is how it looks in FireFox on a Mac
What is the current behavior?
This is how it looks in Chrome, Safari and IE
What are the steps to reproduce?
This is my package.json
{
"name": "pegasus-ceRegistrar",
"version": "0.0.1",
"dependencies": {
"@angular/animations": "^4.3.2",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "^4.3.2",
"@angular/compiler": "^4.3.2",
"@angular/compiler-cli": "^4.3.2",
"@angular/core": "^4.3.2",
"@angular/forms": "^4.3.2",
"@angular/http": "^4.3.2",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.3.2",
"@angular/platform-browser-dynamic": "^4.3.2",
"@angular/platform-server": "^4.3.2",
"@angular/router": "^4.3.2",
"@angular/upgrade": "^4.3.2",
"@types/core-js": "^0.9.42",
"@types/hammerjs": "^2.0.34",
"@types/node": "^8.0.17",
"angular-in-memory-web-api": "^0.3.2",
"angular2-cookie": "^1.2.6",
"angular2-jwt": "^0.2.3",
"concurrently": "^3.5.0",
"core-js": "^2.4.1",
"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-shell": "^2.1.0",
"hammerjs": "^2.0.8",
"jwt-decode": "^2.2.0",
"lite-server": "^2.3.0",
"load-grunt-tasks": "^3.5.2",
"ng2-cookies": "^1.0.12",
"ng2-responsive": "^0.8.4",
"reflect-metadata": "^0.1.10",
"rollup": "^0.45.2",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-uglify": "^2.0.1",
"rxjs": "^5.4.2",
"systemjs": "^0.20.17",
"tslint": "^5.5.0",
"typescript": "^2.4.2",
"zone.js": "^0.8.16"
}
}
This is my systemjs.config.js
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
Application: 'bin-debug',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// CDK individual packages
'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'ng2-cookies': 'npm:ng2-cookies',
'ng2-responsive/bootstrap': 'npm:ng2-responsive/bootstrap',
'ng2-responsive/browsers': 'npm:ng2-responsive/browsers',
'ng2-responsive/config': 'npm:ng2-responsive/config',
'ng2-responsive/custom-sizes': 'npm:ng2-responsive/custom-sizes',
'ng2-responsive/devices': 'npm:ng2-responsive/devices',
'ng2-responsive/pixelratio': 'npm:ng2-responsive/pixelratio',
'ng2-responsive/responsive': 'npm:ng2-responsive/responsive',
'ng2-responsive/responsive-window': 'npm:ng2-responsive/responsive-window',
'ng2-responsive/useragent': 'npm:ng2-responsive/useragent',
'ng2-responsive': 'npm:ng2-responsive',
'ng-select': 'node_modules/ng-select'
},
packages: {
Application: {
main: './main.js',
defaultExtension: 'js'
},
'ng2-cookies': {
main: './ng2-cookies.js',
defaultExtension: 'js'
},
rxjs: {
main:'./bundles/rx.min.js', defaultExtension: 'js'
},
'ng2-responsive/bootstrap': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive/browsers': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive/config': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive/custom-sizes': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive/devices': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive/pixelratio': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive/responsive': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive/responsive-window': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive/useragent': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-responsive': {
main: './index.js',
defaultExtension: 'js'
},
'ng-select': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
})(this);
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 4.3.2
Material: 2.0.0-beta.8
OS: mac and windows
TypeScript: 2.4.2
Browsers: Chrome, Safari, IE
Is there anything else we should know?
I have created a new Angular-CLI project with material and that works fine. So it's not an issue in Angular or Material but something in my config files.
Does anybody have any idea what I'm doing wrong?