您可能需要一个适当的加载器来处理此文件类型-带React的Angular 4

Question

这是个新手，有很多关于这个问题的例子，但是我们没有webpack.config.js文件，所以我不确定如何解决它！

我们使用的是Angular 4项目-- https://github.com/ngrx/platform

我们还需要为要在此项目中使用的现有应用程序导入一些React模块

当我们尝试在...上构建时，我们得到一个错误...

You may need an appropriate loader to handle this file type.
|   case REQUEST_GUIDE_FULFILLED:
|     return {
|       ...filterGuideData(action.guide),
|       isLoaded: true,
|     }

这是完整的错误

ERROR in ./showhow-admin/app/player/redux/reducers/domain/guide.js
Module parse failed: C:\workspace\showhowAdmin\platform\node_modules\source-map-loader\index.js!C:\workspace\showhowAdmin\platform\showhow-admin\app\player\redux\reducers\domain\guide.js Unexpected token (10:6)
You may need an appropriate loader to handle this file type.
|   case REQUEST_GUIDE_FULFILLED:
|     return {
|       ...filterGuideData(action.guide),
|       isLoaded: true,
|     }
 @ ./showhow-admin/app/player/redux/reducers/domain/index.js 7:0-29
 @ ./showhow-admin/app/player/redux/reducers/index.js
 @ ./showhow-admin/app/player/redux/setupStore.js
 @ ./showhow-admin/app/player/redux/setupFullStore.js
 @ ./showhow-admin/app/player/redux/index.js
 @ ./showhow-admin/app/player/player.module.ts
 @ ./showhow-admin/app/guides/components/guide-detail.ts
 @ ./showhow-admin/app/guides/components/index.ts
 @ ./showhow-admin/app/guides/guides.module.ts
 @ ./showhow-admin async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./showhow-admin/main.ts

这是package.json，不确定在哪里添加将处理...

{
  "name": "@ngrx/platform",
  "version": "4.0.0",
  "description": "monorepo for ngrx development",
  "scripts": {
    "precommit": "lint-staged",
    "bootstrap": "lerna bootstrap",
    "build": "ts-node ./build/index.ts",
    "deploy:builds": "ts-node ./build/deploy-build.ts",
    "test:unit": "node ./tests.js",
    "test": "nyc yarn run test:unit",
    "clean": "git clean -xdf && yarn && yarn run bootstrap",
    "cli": "ng",
    "coverage:html": "nyc report --reporter=html",
    "example:start": "yarn run build && yarn run cli -- serve",
    "example:start:aot": "yarn run build && yarn run cli -- serve --aot",
    "example:test": "jest --watch",
    "example:build:prod": "yarn build && yarn cli -- build --aot -prod --base-href \"/platform/showhow-admin/\" --output-path \"./example-dist/showhow-admin\"",
    "ci": "yarn run build && yarn run test && nyc report --reporter=text-lcov | coveralls",
    "prettier": "prettier --parser typescript --single-quote --trailing-comma es5 --write \"./**/*.ts\"",
    "watch:tests": "chokidar 'modules/**/*.ts' --initial -c 'nyc --reporter=text --reporter=html yarn run test:unit'",
    "postinstall": "opencollective postinstall",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
    "release": "lerna publish --skip-npm --conventional-commits && npm run build"
  },
  "engines": {
    "node": ">=6.9.5",
    "npm": ">=4.0.0",
    "yarn": ">=0.27.5 <2.0.0"
  },
  "lint-staged": {
    "*.ts": [
      "yarn prettier",
      "git add"
    ]
  },
  "keywords": [
    "ngrx",
    "angular",
    "rxjs"
  ],
  "author": "Rob Wormald <robwormald@gmail.com>",
  "license": "MIT",
  "repository": {},
  "nyc": {
    "extension": [
      ".ts"
    ],
    "exclude": [
      "**/*.spec",
      "**/spec/**/*"
    ],
    "include": [
      "**/*.ts",
      "**/*.js"
    ]
  },
  "devDependencies": {
    "@angular/animations": "^4.2.0",
    "@angular/cli": "^1.2.0",
    "@angular/common": "^4.2.0",
    "@angular/compiler": "^4.2.0",
    "@angular/compiler-cli": "^4.2.0",
    "@angular/core": "^4.2.0",
    "@angular/forms": "^4.2.0",
    "@angular/http": "^4.2.0",
    "@angular/material": "^2.0.0-beta.7",
    "@angular/platform-browser": "^4.2.0",
    "@angular/platform-browser-dynamic": "^4.2.0",
    "@angular/platform-server": "^4.2.0",
    "@angular/router": "^4.2.0",
    "@ngrx/db": "^2.0.1",
    "@types/fs-extra": "^2.1.0",
    "@types/glob": "^5.0.30",
    "@types/jasmine": "2.5.45",
    "@types/jasminewd2": "^2.0.2",
    "@types/jest": "^20.0.2",
    "@types/jsplumb": "file:../../jsPlumb/types/jsplumb",
    "@types/jsplumbtoolkit": "file:../../jsPlumb/types/jsplumbtoolkit",
    "@types/node": "^7.0.5",
    "@types/ora": "^0.3.31",
    "@types/rimraf": "^0.0.28",
    "Aframe-Material": "https://github.com/etiennepinchon/aframe-material.git",
    "aframe": "0.6.1",
    "aframe-animation-component": "^3.2.5",
    "aframe-canvas": "0.0.6",
    "aframe-draw-component": "^1.5.0",
    "aframe-extras.grid": "^3.11.4",
    "aframe-html-shader": "^0.2.0",
    "aframe-look-at-component": "^0.6.0",
    "aframe-mouse-cursor-component": "^0.5.2",
    "aframe-react": "^4.3.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "chokidar": "^1.7.0",
    "chokidar-cli": "^1.2.0",
    "codelyzer": "^2.1.1",
    "conventional-changelog": "^1.1.4",
    "core-js": "^2.4.1",
    "coveralls": "^2.13.0",
    "cpy-cli": "^1.0.1",
    "deep-freeze": "^0.0.1",
    "fetch-jsonp": "^1.1.3",
    "fs-extra": "^2.1.2",
    "glob": "^7.1.1",
    "hammerjs": "^2.0.8",
    "husky": "^0.14.3",
    "jasmine": "^2.5.3",
    "jasmine-core": "~2.5.2",
    "jasmine-marbles": "^0.0.2",
    "jasmine-spec-reporter": "~3.2.0",
    "jest": "^21.0.2",
    "jest-preset-angular": "^3.0.1",
    "jest-zone-patch": "^0.0.7",
    "jsplumbtoolkit": "file:../../jsPlumb/jsplumbtoolkit.tgz",
    "jsplumbtoolkit-angular": "file:../../jsPlumb/jsplumbtoolkit-angular.tgz",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lerna": "^2.0.0",
    "lint-staged": "^4.0.3",
    "lodash": "^4.17.4",
    "module-alias": "^2.0.0",
    "ngrx-store-freeze": "^0.2.0",
    "normalizr": "^3.2.3",
    "nyc": "^10.1.2",
    "ora": "^1.2.0",
    "prettier": "^1.5.2",
    "prop-types": "^15.6.0",
    "protractor": "~5.1.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.14",
    "redux": "^3.7.2",
    "redux-observable": "^0.16.0",
    "reflect-metadata": "^0.1.9",
    "reselect": "^3.0.1",
    "rimraf": "^2.5.4",
    "rollup": "^0.50.0",
    "rxjs": "^5.4.0",
    "sorcery": "^0.10.0",
    "tincanjs": "^0.50.0",
    "ts-node": "^3.1.0",
    "tslib": "1.6.0",
    "tslint": "^4.4.2",
    "typescript": "^2.4.0",
    "uglify-js": "^2.8.22",
    "url-parse": "^1.1.9",
    "zone.js": "^0.8.12"
  },
  "dependencies": {
    "@angular/cdk": "^2.0.0-beta.8",
    "babel-preset-es2015": "^6.24.1",
    "opencollective": "^1.0.3"
  },
  "collective": {
    "type": "opencollective",
    "url": "https://opencollective.com/ngrx",
    "logo": "https://opencollective.com/opencollective/logo.txt"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/setup-jest.ts",
    "globals": {
      "ts-jest": {
        "tsConfigFile": "showhow-admin/tsconfig.spec.json"
      },
      "__TRANSFORM_HTML__": true
    },
    "transform": {
      "^.+\\.(ts|js|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js"
    },
    "testMatch": [
      "<rootDir>/showhow-admin/**/*.spec.ts"
    ],
    "moduleFileExtensions": [
      "ts",
      "js",
      "html",
      "json"
    ],
    "mapCoverage": true,
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "/modules/*.*/"
    ],
    "moduleNameMapper": {
      "^@ngrx/(?!db)(.*)": "<rootDir>/modules/$1"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx)"
    ],
    "modulePathIgnorePatterns": [
      "dist"
    ]
  }
}

这是Angular-cli.json

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "showhow-admin"
  },
  "apps": [
    {
      "root": "showhow-admin",
      "outDir": "example-dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "bc",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "showhow-admin/tsconfig.app.json"
    },
    {
      "project": "showhow-admin/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
      "inlineStyle": true,
      "inlineTemplate": true,
      "flat": true,
      "spec": false
    }
  }
}

感谢得到的任何帮助，我们已经为此损失了一天半！

Answer 1

由于示例应用程序依赖于@angular-cli，因此您可以通过从任何.ts文件导入模块来添加对react的支持：

import * as React from 'react';

确保使用npm将react作为模块安装

npm install react --save

要获得类型安全和智能支持，还需要安装@types/react

npm install @types/react --save-dev