CODEWITHSUNDEEP
angularrxjsmaterial-designzone.js
virtualsante
virtualsante

Reputation: 203

XHR error (404) loading https://unpkg.com/[email protected]/operators/index.js/first.js

I am trying to make use of google material input control in angular2 but I keep getting the below error in browser console.

console error:

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:[email protected]',
            'rxjs/operators': 'npm:[email protected]/operators/index.js',
            'tslib': 'npm:tslib/tslib.js',
            'angular-in-memory-web-api': 'npm:[email protected]/bundles/in-memory-web-api.umd.js',
            'ts': 'npm:[email protected]/lib/plugin.js',
            'typescript': 'npm:[email protected]/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>

Upvotes: 1

Views: 1539

Answers (1)

virtualsante
virtualsante

Reputation: 203

I managed to find a solution to this problem. The issue was with the below line in system.config: 

'rxjs/operators': 'npm:[email protected]/operators/index.js',

I commented this out and it started working. I noticed some versions of rxjs support 'operators' but not the one I was working with.

Additionally, I found this article helpful in setting up google material using angular2: https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App

Upvotes: 1

Related Questions