[英]Angular 4 material project is not compiling
我是新手。 我已經為角度項目進行了設置。當我第一次觸發ng serve --open命令時,它打開了url並且運行良好。 之后,我安裝了角材。現在,如果我運行該應用程序,它將帶給我新的瀏覽器選項卡。 但是顯示編譯錯誤。 有人可以幫我解決確切的問題。 我過去3個小時一直在嘗試。 請幫忙。
npm install-保存@ angular / material @ angular / cdk
npm install-保存@ angular / animations
npm install --save Hammerjs npm install --save @ angular / flex-layout @ latest
我的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import 'hammerjs';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MaterialModule,
FlexLayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我的package.json
{
"name": "con-fusion",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.4.3",
"@angular/cdk": "^2.0.0-beta.11",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/flex-layout": "^2.0.0-beta.9",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "^2.0.0-beta.11",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.3",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
我的app.component.html
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
<md-toolbar color="primary"> <span>Ristorante Con Fusion</span> </md-toolbar>
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
我的style.scss
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
}
請參閱Angular Material 2入門( 2017年9月4日 )
- 定制材料模塊
在Angular Material 2 Beta 3之前 ,有一個全局MaterialModule可以導入到應用程序模塊中以使組件可用。 不利的一面是,搖樹的效率不足以刪除所有未使用的代碼。
因此,不建議使用MaterialModule,而是定義一個特定於項目的自定義材料模塊,在其中僅導入和導出所需的組件。 我們的模塊如下所示:
不幸的是,官方指南沒有上述文章那么明確。 您需要遍歷使用的每個組件並為其導入模塊,然后將其添加到AppModule的imports部分。
看起來您只是在使用工具欄,因此您唯一需要的模塊是MdToolbarModule。
import { MdToolbarModule } from '@angular/material';
@NgModule({
imports: [
...
MdToolbarModule,
],
本質上,正如上面的文章所述,您可以“自行開發” MaterialModule。 主要目的似乎是避免在應用程序中部署未使用的材料組件。
實際上, MaterialModule
不再可導入,您需要導入所需的唯一模塊,您可以在此處查看此信息:
因此,如果需要材料,則僅導入所需的組件模塊,您可以在此處看到組件列表: https : //material.angular.io/components
例如,如果要輸入材料,請轉到“ API”選項卡,查看要導入的內容:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import 'hammerjs';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatMenuModule,
FlexLayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
這是官方的punker示例: http ://plnkr.co/edit/o077B6uEiiIgkC0S06dd?p=preview
無論如何,我看不到您在HTML中使用的材質組件,因此不確定要使用哪個組件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.