XHR 오류 (404) 로딩 https://unpkg.com/[email protected]/operators/index.js/first.js

Question

angular2에서 Google 머티리얼 입력 컨트롤을 사용하려고하는데, 아래 브라우저 콘솔에서 오류가 발생했습니다.

가 :

내 'node_modules'폴더를 확인했고 나는 그것이 'rxjs'폴더를 포함하지 만이 유일한 '연산자'폴더가 아닌 볼 '사업자'폴더 그래서 나는 할 수 없습니다입니다 이해할 수 index.js 또는 first.js를 찾으십시오. 오류로 인해 사용할 수없는 폴더에 대한 참조가 zone.js 안에있는 것처럼 보입니다. 그러나 찾을 수 없습니다. 최신 'rxjs'버전, 즉 행운이없는 5.5.2를 사용해 보았습니다.

여기에 잘못된 것이 있습니까?

미리 감사드립니다.

나는 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.m odule.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> 

Answer 1

나는이 문제에 대한 해결책을 찾을 수 있었다. 이 문제는 system.config의 아래 줄에 있습니다.

'rxjs/operators': 'npm:rxjs@5.4.3/operators/index.js', 

나는 이것을 주석 처리했으며 작동하기 시작했습니다. rxjs의 일부 버전이 '운영자'를 지원하지만 내가 사용하고있는 것은 아닙니다. 당신은`사용하는 이유는 https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App