CODEWITHSUNDEEP
javascriptnode.jsangularangular-material2
anirban karak
anirban karak

Reputation: 740

Angular 4 material project is not compiling

I am new to the angular. I have made the set up for angular project.First time when i fired the ng serve --open command , it opened the url and was working fine. After that i have installed angular material .Now if i run the application it is taking me the new browser tab. But showing compilation error. Could someone please help me to sort out the exact issue. I was trying this past 3 hours. please help.

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
npm install --save hammerjs npm install --save @angular/flex-layout@latest

enter image description here

my 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 { }

my 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"
  }
}

My 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>

My style.scss

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';


body { 
  padding: 0; 
  margin: 0; 
  font-family: Roboto, sans-serif; 

}

Upvotes: 0

Views: 838

Answers (2)

Richard Matsen
Richard Matsen

Reputation: 23543

See Getting Started With Angular Material 2 (September 4, 2017)

  1. Custom Material Module

Prior to Angular Material 2 Beta 3, there was a global MaterialModule that could be imported in the app module to make the components available. The downside to that is that tree-shaking is not efficient enough to remove all the unused code.

MaterialModule has therefore been deprecated in favor of defining a project-specific custom material module where you import and export only the needed components. Here’s what our module can look like:

Unfortunately the official guide is a not as explicit as the above article. You need to go through each component you use and import the module for for it, then add it to the imports section of AppModule.

Looks like you are just using Toolbar, so the only module you need is MdToolbarModule. 

import { MdToolbarModule } from '@angular/material';

@NgModule({
  imports: [
    ...
    MdToolbarModule,
  ],

Essentially, as the article above explains, you 'roll-your-own' MaterialModule. The main purpose seems to be avoiding deploying of unused material components in your app.

Upvotes: 2

Al-Mothafar
Al-Mothafar

Reputation: 8219

Actually, MaterialModule is not importable anymore, you need to import the only module that you want, you can see this info here:

CHANGELOG.md#breaking-changes

So, if you want material, import only the component module that you want, you can see the components list here: https://material.angular.io/components

as for example, if I want material input, you go to API tab see what you want to import:

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 { }

And this is the official plunker example: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd?p=preview

Anyway, I don't see where you are using the material component in your HTML, so not sure which one you want to use.

Upvotes: 1

Related Questions