0
我已经将Angular 2中的材质设计项目更新为Angular 4，现在我遇到了一个非常奇怪的问题：在所有浏览器，除Mac上的FireFox外，占位符和文本在输入字段中不可见。从Angular 2更新到Angular 4后，md-input-container（Material Design）无法工作
这是它的外观在Chrome： App in Chrome
，这是它的外观在Firefox在Mac上： App in FireFox
当我运行应用程序，我没有得到任何错误。
这是我的systemjs.config.js样子：
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
Application: 'bin-debug',
// angular bundles
'@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
'@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',
// 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'
},
packages: {
Application: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
main:'./bundles/rx.min.js', defaultExtension: 'js'
}
}
});
})(this);
，这是我的package.json：
{
"name": "testApp",
"version": "0.0.1",
"dependencies": {
"@angular/animations": "^4.3.2",
"@angular/cdk": "^2.0.0-beta.8",
"@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",
"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",
"load-grunt-tasks": "^3.5.2",
"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"
}
}
是否有人有任何想法是怎么回事？我一直在研究这个问题很长一段时间，而且我已经没有想法了。
以下是关于组件的实现更多的代码： 的Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register CME - Pegasus Lectures</title>
<base href="/">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<link href="https://gitcdn.link/repo/angular/bower-material/master/angular-material.css" rel="stylesheet">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/hammerjs/hammer.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('Application').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<nl-ixms-app>Loading...</nl-ixms-app>
</body>
</html>
ApplicationModule.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { MdInputModule } from '@angular/material';
import { Application } from './components/Application';
@NgModule({
bootstrap: [ Application ],
declarations: [
Application
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
MdInputModule
],
providers: [
]
})
export class ApplicationModule {}
Application.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
moduleId: 'src/application/components/a',
providers: [ ],
selector: 'nl-ixms-app',
styleUrls: [ './Application.css' ],
templateUrl: './Application.html'
})
export class Application {
//----------------------------------------------------------------------------
//
// Constructor
//
//----------------------------------------------------------------------------
constructor() { }
//----------------------------------------------------------------------------
//
// LifyCycle Methods
//
//----------------------------------------------------------------------------
//-----------------------------------
// ngOnInit
//-----------------------------------
//noinspection JSUnusedGlobalSymbols
public ngOnInit(): void {
console.log('Application ready');
}
}
而且一个很小的应用.html
<md-input-container>
<input placeholder="email address"
mdInput
required
#email
type="email"
name="email">
</md-input-container>
你介意在你的视图中添加如何实现组件的片段吗？ – JSess
由于您从Angular 2移动到4，意味着您在Material版本中也有了很大的提升，与Angular2的最新兼容材料是beta 2，当前版本是beta 8.检查您是否正在导入模块[正确方式]（https ：//material.angular.io/guide/getting-started），如果你使用的是预编译的主题css文件的当前版本。 – Nehal
看起来你不应该把'cdk-builds'主版本与'@ angular/material'版本混合在一起，如果你想从'master'安装，你应该运行'npm install angular/material2-builds'。 – Edric