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

Question

New to this, and there are lots of examples of this issue but we don't have a webpack.config.js file so I'm not sure how to fix it!

We're using this Angular 4 project - https://github.com/ngrx/platform

And we need to import some React modules for an existing application we want to use in this project

We're getting an error when we try and build on the ...

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

Here is full error

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

Here is the package.json, not sure where to add the parts that will handle the ...

{
  "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"
    ]
  }
}

Here is the 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
    }
  }
}

Any help gratefully received, we've lost a day and half over this!

Answer 1

Since the example app relies on @angular-cli , you can add support for react by importing the module from any .ts file:

import * as React from 'react';

Make sure you install react as a module using npm :

npm install react --save

For type-safety and intelli-sense support, also install @types/react

npm install @types/react --save-dev