2017-10-12 60 views
0

對此並不陌生,並且有很多這個問題的例子,但是我們沒有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 
    } 
    } 
} 

感激地收到任何幫助,我們已經失去了一天,一半以上!

+0

平臺種子不使用webpack - 它使用匯總。該錯誤似乎與webpack相關。你想使用webpack嗎? – pixelbits

+0

謝謝。我們不會嘗試使用webpack或更改任何內容。我們只是試圖讓它在那裏與反應文件進行編譯。除了嘗試引入React組件外,我們還沒有改變平臺。 – user5839

+0

很奇怪。顯然它的一個webpack錯誤..你是用'npm run build'構建的嗎? – pixelbits

回答

1

由於示例應用程序依賴於@angular-cli,您可以從任何的.ts文件導入模塊添加爲react支持:

import * as React from 'react'; 

確保安裝react作爲一個模塊使用npm

npm install react --save 

對於類型安全和智能感應支持,還可以安裝@types/react

npm install @types/react --save-dev 
+0

謝謝我們有這樣的一個。我編輯了這個問題。 – user5839

+1

hm不知道還有什麼問題呢。如果你嘗試了以上的東西,但它仍然無法正常工作,請告訴我... – pixelbits

+0

謝謝。這是同樣的問題。這是它無法處理的「......」傳播。 – user5839

相關問題