I am trying to make use of google material input control in angular2 but I keep getting the below error in browser console.
:
I've checked my 'node_modules' folder and I see it does contain 'rxjs' folder but there is only 'operator' folder and not 'operators' folder so I can understand it's unable to find index.js or first.js. From the error, it looks as though the reference to this unavailable folder seems to be inside zone.js but I couldn't find it.I also tried using the latest 'rxjs' version i.e 5.5.2 with no luck.
Can you see anything else that's wrong here?
Thanks in advance.
I've got the some of the below code from https://material.angular.io/
package.json
{
"name": "aspnet",
"version": "0.0.0",
"scripts": {
"postinstall": "typings install",
"typings": "typings"
},
"license": "ISC",
"devDependencies": {
"typings": "0.8.1"
},
"dependencies": {
"@angular/cdk": "^5.0.0-rc.1",
"@angular/common": "^5.0.2",
"@angular/compiler": "^5.0.2",
"@angular/core": "^5.0.2",
"@angular/forms": "^5.0.2",
"@angular/http": "^2.0.0-rc.1",
"@angular/material": "^5.0.0-rc.1",
"@angular/platform-browser": "^5.0.2",
"@angular/platform-browser-dynamic": "^5.0.2",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"angular2-in-memory-web-api": "0.0.9",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.4.3",
"systemjs": "^0.19.27",
"zone.js": "^0.8.18"
}
}
system.config.js
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
'app': 'app',
// angular bundles
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common/bundles/common-http.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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
'@angular/material/core': 'npm:@angular/material/bundles/material-core.umd.js',
'@angular/material/input': 'npm:@angular/material/bundles/material-input.umd.js',
'@angular/material/form-field': 'npm:@angular/material/bundles/material-form-field.umd.js',
'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
'@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
'@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.4.3',
'rxjs/operators': 'npm:rxjs@5.4.3/operators/index.js',
'tslib': 'npm:tslib/tslib.js',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api@0.4/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.4.2/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
meta: {
'./*.ts': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
test.ts
import { Component } from '@angular/core';
@Component({
selector: 'testSelector',
template: `
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="test" value="test">
</mat-form-field>
</form>`
})
export class testComponent { }
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { testComponent} from './test';
import { MatInputModule } from '@angular/material/input';
@NgModule({
imports: [
BrowserModule,
FormsModule,
MatInputModule
],
declarations: [
testComponent
],
providers: [
],
bootstrap: [testComponent]
})
export class AppModule { }
html:
<testSelector></testSelector>
