【发布时间】：2017-08-02 14:24:43
【问题描述】：
我已经将一个项目从带有 Material Design 的 Angular 2 更新到 Angular 4，现在我遇到了一个非常奇怪的问题：在所有浏览器中，除了 Mac 上的 FireFox，占位符和文本在输入字段中不可见。
这是它在 Chrome 中的外观： App in Chrome
这就是它在 Mac 上的 FireFox 中的外观： 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"
}
}
有人知道发生了什么吗？我已经研究这个问题很长时间了，但我的想法已经不多了。
这里有更多关于组件实现的代码： 索引.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 {}
应用程序.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');
}
}
还有一个非常小的 Application.html
<md-input-container>
<input placeholder="email address"
mdInput
required
#email
type="email"
name="email">
</md-input-container>
【问题讨论】：
-
您介意在视图中添加一个关于您如何实现该组件的 sn-p 吗？
-
自从您从 Angular 2 迁移到 4 后，意味着您在 Material 版本上也有了很大的飞跃，最后与 Angular2 兼容的 Material 是 beta 2，当前版本是 beta 8。检查您是否正在导入模块proper way，如果您使用的是当前版本的预建主题 css 文件。
-
看起来您不应该将
cdk-builds主版本与@angular/material的版本混合使用，如果您想从master安装，您应该运行npm install angular/material2-builds。 -
按照@Edric 的建议，我已经更改了我的 package.json 和 systemjs.config.js 以正确使用 Material 的发布版本。但这并不能解决问题。