使用Angular Materials

Question

我投降......

我尝试做的就是为我的公司制作一个逐步的演练，如何生成一个新的 Angular 4 项目并添加 Angular Materials < / strong>它...我无法做到。

我观看过PluralSight视频，阅读说明书，谷歌用Google搜索，但我只是被依赖项所束缚，最终只留下了一个不会运行的项目。

这是我有多远......

我已根据Angular网站上的示例创建了一个新的Angular项目：

git clone https://github.com/angular/quickstart AngularDemo
cd AngularDemo
npm install 

我修改了 app.module.ts 文件，允许我们使用ngModel（严重？！默认不包含这些内容？！）

import { AppComponent }  from './app.component';
import { FormsModule } from '@angular/forms';   //  We want to use ngModel !

@NgModule({
  imports:      [ BrowserModule, FormsModule ],

好的，到目前为止一切都很好 该应用运行良好。

现在，我想要包含Angular Materials。我使用他们网站上描述的命令：

npm install @angular/material @angular/animations --save

以下屏幕截图显示了那里的问题...

如您所见，Materials依赖于@angular/core@4.0.3

我以为我可以将其添加到我的项目中（使用--save参数），但这是不允许的。

我以为我可以全局添加（使用-g参数），但这也是不允许的。

所以，好吧，我只是正常添加它：

npm install @angular/core@4.0.3 

为什么我会收到错误（请参阅编号＆＃34; 3＆＃34;上面），抱怨@angular/core@4.0.3依赖于错误，错误，@angular/core@4.0.3？

我还看到@angular/animations@4.2.3报告我必须安装@angular/core@4.2.3（请参见上面屏幕截图中的第4位），所以，好吧，让我们这样做......

npm install @angular/core@4.2.3 

在这一点上，事情变得更加混乱......

所以，我的@angular/core@4.2.3在某种程度上无效，@angular/router@4.0.3需要@angular/core@4.0.3 ......但是......但......我安装了这个...

在这一点上，我开始谷歌搜索地狱，找到StackOverflow的建议，尽管他们只有5-6个月大，现在已经过时了，并把我的头发拉了出来。

如果我尝试使用npm start来查看项目现在处于什么状态，我会收到大量错误......

实际上，如果我尝试npm install @angular/core@4.2.3 --save，这似乎可行并修改我的package.json文件：

"dependencies": {
    "@angular/animations": "^4.2.3",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "^4.2.3",

然而，我仍然看到有关@angular/core@4.2.3的未满足依赖关系的错误。

我应该说，我遵循了StackOverflow的提示，尝试更新打字稿，安装Jasmine和Hammer，并在我的app.module.ts文件中包含这些提示..

npm install typescript@2.3.2 --save 
npm install --save-dev @types/jasmine
npm install hammerjs 
npm install @types/hammerjs --save-dev

...加上我确保我的systemjs.config.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',  

......但....底线......我投降了。

对于我设法摆脱的每一个错误，另外5个错误出现在它的位置。

从Angular网站将Angular Materials添加到默认启动项目时需要采取哪些步骤..？

git clone https://github.com/angular/quickstart AngularDemo

感谢阅读...

这些东西绝对令人费解，它还没有完全准备好＃34;而且我浪费了大量的时间无处可去。我想念Angular 1的简单......; - ）

Answer 1

只是为了证实我的发现（并保存其他任何角色受害者免受我所见过的问题）......

请勿使用以下命令作为Angular应用程序的起点。

git clone https://github.com/angular/quickstart AngularDemo

一些Angular自己的教程页面仍然建议这是一个有效的起点......它不是!!

如果您使用npm install方法，那么添加Angular Materials非常简单。

Angular Materials tutorial只有一个问题：

在＆＃34;第4步：包含主题＆＃34;，它告诉您：

To get started with a prebuilt theme, include the following in your app's index.html:

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

这不起作用。

在我的Windows 7笔记本电脑上，它反复告诉我它无法找到这个.css文件，即使我将其复制到与我的 index.html 相同的文件夹中，试图从那里包括它。

相反，您必须将此行添加到styles.css文件中：

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

（叹气。）

我选错了一周放弃啤酒......

（过了一会儿......）

我刚注意到我的哑教程应用程序现在可以在Chrome上使用Angular Materials，但在IE11中悄然引发异常。

值得庆幸的是，通过一点谷歌搜索来解决这个问题很简单。您只需要打开polyfills.ts并取消注释几行：

但是再一次，这是一个阻止所有IE11用户都能够使用Angular Materials的问题......为什么他们的入门教程中没有提到这个？

我选错了一周放弃胶水嗅探......