Möglicherweise benötigen Sie einen geeigneten Loader für diesen Dateityp - Angular 4 mit React

Neu, und es gibt viele Beispiele für dieses Problem, aber wir haben keine Datei webpack.config.js, also bin ich nicht sicher, wie man es repariert!Möglicherweise benötigen Sie einen geeigneten Loader für diesen Dateityp - Angular 4 mit React

Wir werden diese Angular-4-Projekt verwenden - https://github.com/ngrx/platform

Und wir müssen einige für eine bestehende Anwendung Reagieren Module importieren wir in diesem Projekt

Wir bekommen einen Fehler verwenden möchten, wenn wir versuchen, und bauen auf die ...

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

Hier ist voller Fehler

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

Hier die package.json ist, nicht sicher, wo die Teile hinzuzufügen, die der Griff ...

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

ist die Winke 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 
    } 
    } 
}

Jede Hilfe dankbar empfangen, wir haben einen Tag und eine Hälfte davon verloren!

Quelle

2017-10-12 user5839

Der Plattform-Seed verwendet kein Webpack - es verwendet Rollup. Der Fehler scheint webpackbezogen zu sein. Versuchen Sie, das Webpack zu verwenden? – pixelbits

Danke. Wir versuchen nicht, Webpack zu verwenden oder etwas zu ändern. Wir versuchen nur, es mit react-Dateien zu kompilieren. Wir haben die Plattform überhaupt nicht verändert, abgesehen von dem Versuch, eine React-Komponente einzuführen. – user5839

Sehr seltsam. Offensichtlich ist es ein Webpack-Fehler .. bauen Sie mit 'npm run build'? – pixelbits

Da die Beispiel-App auf @angular-cli beruht, können Sie Unterstützung für react durch den Import des Moduls von jedem .ts-Datei hinzufügen:

import * as React from 'react';

Stellen Sie sicher, react als Modul installieren npm mit:

npm install react --save

Für Typsicherheit und intelli-Sense-Unterstützung, installieren Sie auch @types/react

npm install @types/react --save-dev

Quelle

2017-10-12 02:52:04 pixelbits

Danke, wir haben eine davon. Ich habe die Frage bearbeitet. – user5839

hm nicht sicher, was könnte das Problem noch. Wenn Sie die oben genannten Dinge versucht haben, und es immer noch nicht funktioniert, lassen Sie es mich wissen ... – pixelbits

Danke. Es ist das gleiche Problem. Es ist die "..." Verbreitung, die es nicht behandeln kann. – user5839

Möglicherweise benötigen Sie einen geeigneten Loader für diesen Dateityp - Angular 4 mit React

Antwort

Verwandte Themen