您可能需要一个合适的加载程序来处理这种文件类型 - 使用React的Angular 4
问题描述：
对此并不陌生，并且有很多这个问题的例子，但是我们没有webpack.config.js文件，所以我没有肯定如何解决它！您可能需要一个合适的加载程序来处理这种文件类型 - 使用React的Angular 4
我们使用这个角4项目 - https://github.com/ngrx/platform
我们需要导入一些模块做出反应，因为我们想在这个项目中使用
，当我们尝试我们得到一个错误的现有应用程序并建立在...
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 <[email protected]>",
"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/([email protected])"
],
"modulePathIgnorePatterns": [
"dist"
]
}
}
这里是角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
}
}
}
感激地收到任何帮助，我们已经失去了一天，一半以上！
答
由于示例应用程序依赖于@angular-cli，您可以从任何的.ts文件导入模块添加为react支持：
import * as React from 'react';
确保安装react作为一个模块使用npm：
npm install react --save
对于类型安全和智能感应支持，还可以安装@types/react
npm install @types/react --save-dev
平台种子不使用webpack - 它使用汇总。该错误似乎与webpack相关。你想使用webpack吗？ – pixelbits
谢谢。我们不会尝试使用webpack或更改任何内容。我们只是试图让它在那里与反应文件进行编译。除了尝试引入React组件外，我们还没有改变平台。 – user5839
很奇怪。显然它的一个webpack错误..你是用'npm run build'构建的吗？ – pixelbits