55168

How to integrate angular2-material (alpha 8.2) with angular2-Quickstart app

Question:

<strong>NOTE: I don't use Angular-CLI</strong>

<em>This plunker is working with <strong>Alpha-8.1</strong></em> : <strong><a href="https://plnkr.co/edit/qoZ3YCwSz0mQ5o974Dt0?p=preview" rel="nofollow">https://plnkr.co/edit/qoZ3YCwSz0mQ5o974Dt0?p=preview</a></strong>

<hr />

I have my quick-start app running without any issue.

<strong>Step 1</strong>: I updated <strong>package.json</strong> to include <strong>angular2-material</strong> and <strong>angular2-button</strong> packages.

<strong>package.json</strong>

{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", ... }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "systemjs": "0.19.27", ... ... //<<<<<<<<<<<<<<<<<<<<<Here>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> "@angular2-material/core":"2.0.0-alpha.8-2", "@angular2-material/button ":"2.0.0-alpha.8-2" //<<<<<<<<<<<<<<<<<<<<<Here>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^2.0.2", "typings":"^1.3.2" } } <hr />

<strong>Step 2</strong>: I ran <strong>npm install</strong>, I could see <strong>@angular-material</strong> folder under <strong>node_modules</strong> folder.

<hr />

<strong>Step 3</strong>: Updated <strong>systemjs.config.js</strong> to map <strong>@angular2/material</strong> package to <strong>node_modules</strong> <strong>umd.js</strong> file.

<strong>NOTE</strong> : <em>I have <strong>app: 'dist'</strong> to separate <strong>.map.js</strong> and <strong>.js</strong> files from <strong>.ts</strong> files</em>

<strong>systemjs.config.js</strong>

(function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'dist', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', ... ... //<<<<<<<<<<<<<<<<<<<<<Here>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> '@angular2-material/core': 'npm:@angular2-material/core/core.umd.js', '@angular2-material/button': 'npm:@angular2-material/button/button.umd.js', //<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this); <hr />

<strong>Step 4</strong>: Updated <strong>app.module.ts</strong>

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { MdButtonModule } from '@angular2-material/button'; //import { MdCardModule } from '@angular2-material/card'; @NgModule({ imports: [ BrowserModule,MdButtonModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } <hr />

<strong>Step 5</strong>: Updated <strong>app.component.ts</strong>

import { Component } from '@angular/core'; import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button'; @Component({ selector: 'my-app', template: `

My First Angular 2 App Live

<button md-raised-button>Button</button> ` }) export class AppComponent { } <hr />

<strong>Error</strong>:

<blockquote>

localhost/:16 Error: Error: XHR error (404 Not Found) loading <a href="http://localhost:3000/node_modules/@angular2-material/button/button.umd.js" rel="nofollow">http://localhost:3000/node_modules/@angular2-material/button/button.umd.js</a>(…)

</blockquote>

Answer1:

<strong>NOTE</strong>: <strong>integration of angular2-material with core angular2 app, not with Angular2-CLI.</strong>

I had a small typo, corrected it so now everything is working.

<strong>NOTE</strong>: Those who are facing some hurdles in integrating <strong>Angular2-material</strong> with <strong>core Angular2 app</strong>, can follow steps suggested in question itself.

I had already asked this question <strong>two times</strong> with earlier releases but nothing was working.

But finally, by following steps shown in question, <strong>you will be able to use <em>angular2-material</em> with <em>core angular2 app</em>.</strong>

Answer2:

I have tried with on more workaround which allow your to use button and stuff without importing separately in systemjs.config.js file

<strong>Step 1:</strong> Create package.json file

{ "name": "fist-angular-app", "version": "1.0.0", "author": "any name you want", "description": "this is the first angular app", "scripts": { "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", "tsc": "tsc", "tsc:w": "tsc -w", "lint": "tslint ./app/**/*.ts -t verbose", "lite": "lite-server", "typings": "typings", "postinstall": "typings install" }, "license": "ISC", "dependencies": { "@angular/common": "2.2.0", "@angular/compiler": "2.2.0", "@angular/core": "2.2.0", "@angular/forms": "2.2.0", "@angular/http": "2.2.0", "@angular/platform-browser": "2.2.0", "@angular/platform-browser-dynamic": "2.2.0", "@angular/router": "3.0.0", "angular-material": "^1.1.1", "bootstrap": "^3.3.6", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "jquery": "^3.1.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.23" }, "devDependencies": { "@types/hammerjs": "^2.0.33", "concurrently": "^2.2.0", "lite-server": "^2.2.0", "tslint": "^3.7.4", "typescript": "^2.0.2", "typings": "^1.0.4" }, "repository": {} }

<strong>Step 2:</strong> Use npm Command npm install

<strong>Step 3:</strong> Create systemjs.config.js file

<strong>Step 4:</strong>

/** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@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/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', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/material': 'npm:@angular/material/material.umd.js', // other libraries 'rxjs': 'npm:rxjs' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this);

<strong>Step 5:</strong> Use npm Command npm install @angular/material

<strong>Step 6:</strong> Add below in app.module.ts file

import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MaterialModule } from '@angular/material'; @NgModule({ imports: [ FormsModule, MaterialModule.forRoot(), ]) export class AppModule { }

<strong>Step 7:</strong> Check Below Folders in Project

<ol><li>node_modules</li> <li>node_module/@angulae/material</li> <li>node_modules/angular-material</li> <li>typing (if not available use npm for this)</li> </ol>

And it will start working

Recommend

  • Codename One - container.setScrollVisible(true) in the center of a BorderLayout
  • How to get selected text using android spinner wheel?
  • Preventing Internet-accessing-method from delaying a toast popup
  • How to achieve density/heat map effect in iOS (iPhone/iPad)?
  • .Net how to set IsReadOnly for a property for a usercontrol
  • Retrieving custom entities in CRM 4 C#
  • QueryOver - add restriction on primitive collection
  • Read specific column from Parquet without using Spark
  • Authorize Attribute Authentication with Postman in Web Api
  • Delete a ListItem by clicking the ImageView within the ListItem
  • Unable to run testNG tests from maven
  • git clone, upload-pack out of memory
  • Javascript inside HTML import not affecting imported HTML
  • playing mp3 from nsbundle
  • Swift manually rotate view controller
  • Arraylist of strings into one comma separated string
  • 'Edit' function for forum posts and such
  • Stop an element moving with padding on hover
  • Add font awesome icon to custom add to cart button in Woocommerce 3
  • How to write seo friendly url's using htaccess?
  • Create an average of multiple excel chart without the data source
  • Django, uWSGI & nginx: Process dies for “no reason”
  • using maven pom while creating jar:test-jar some times it says JAR will be empty - no content was ma
  • Neo4j…how to get a visual representation of my data?
  • Python 3x- Compression Makes File Bigger :(
  • how to run ejabberd with Erlang on Heroku?
  • How to use Streams api peek() function and make it work?
  • `$http:badreq Bad Request Configuration` - from angular post method, what is wrong here?
  • Bad automatic Triangulation with Mayavi for coloring a surface known only by its corner
  • Using Service Component Runtime
  • Sql - ON DUPLICATE KEY UPDATE
  • WPF custom control and direct content support
  • Creating random wired topology for given arbitrary number of nodes on NS2
  • Create/delete users from text file using Bash script
  • Time Complexity of Fibonacci Algorithm [duplicate]
  • How to check if object is null in Java?