0
- Je suis en train de construire mon application angulaire en utilisant webpack.
- donc j'ai parlé ce lien https://medium.com/@aikeru/getting-started-with-angular-2-webpack-typescript-788b793d7771
- i créé un webpack.config.js au niveau package.json et je package.json inclus cette ligne "bundle": "webpack"
- wh en cours Je NPM run bundle Je suis confronté à une erreur Objet de configuration invalide. Webpack a été initialisé à l'aide d'un objet de configuration qui ne correspond pas au schéma de l'API.
- pouvez-vous me dire comment y remédier.
- fournir mon code et eror ci-dessous
structure des dossiersconstruction application angulaire avec webpack en voyant moyen forum
- webapp
- app
- app.module.ts
- package.json
-webpack.config.js
app.module.ts
import './rxjs-extensions';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import {Base} from './components/base/base';
import {players} from './components/jumping/user';
require('./directives/yep-nope.controller');
require('./services/github-status.service');
require('./controllers/dashboard.controller');
import {
Routes,
RouterModule,
Router,
ActivatedRoute,
CanActivateChild,
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "@angular/router";
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
routing,
MultiselectDropdownModule,
AccordionModule
],
declarations: [
AppComponent,
Base,
jumping,
players
],
providers: [
SPORTSService],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
package.json
{
"name": "SPORTS",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"test": "tsc && concurrently \"karma start karma.conf.js\"",
"bundle": "webpack"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"@types/underscore": "^1.8.1",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"latest-version": "^2.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"jasmine-core": "~2.4.1",
"jasmine-expect": "^3.0.1",
"jasmine-jquery": "^2.1.1",
"karma": "^1.2.0",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-coverage": "^1.1.1",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"karma-jquery": "^0.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^2.1.4",
"karma-typescript-preprocessor": "^0.3.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"webpack": "^3.7.1"
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
devtool: 'source-map',
debug: true,
verbose: true,
displayErrorDetails: true,
context: __dirname,
stats: {
colors: true,
reasons: true
},
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'my-app': './src/my-app/app.ts'
},
resolve: {
extensions: ['', '.ts', '.js'],
root: __dirname,
modulesDirectories: ['node_modules']
},
module: {
preLoaders: [{
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
'node_modules/rxjs'
]
}],
loaders: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
}
],
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'polyfills']
})
],
output: {
path: 'src',
filename: '[name].bundle.js',
sourceMapFilename: '[name].bundle.map',
//chunkFilename: '[id].[chunkhash].chunk.js'
}
};
erreur
$ npm run bundle
> [email protected] bundle C:\Users\webcomponent\src\main\webapp
> webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'displayErrorDetails'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
displayErrorDetails: ...
}
})
]
- configuration.module has an unknown property 'preLoaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
Options affecting the normal modules (`NormalModuleFactory`).
- configuration.output.path: The provided value "src" is not an absolute path!
- configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
- configuration.resolve.extensions[0] should not be empty.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "bundle"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] bundle: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] bundle script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sports package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs sports
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls sports
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\webcomponent\src\main\webapp\npm-debug.log
hey mis à jour mon code en suivant votre lien mais je suis face même erros ... fournir ma part de changement de code seul que je l'ai fait pour le plugin '' ' plugins: [ nouvelle webpack.LoaderOptionsPlugin ({ debug : true, Options: { contexte: __dirname } }) ], '' ' –
Si vous n'êtes pas intéressant dans 2 angulaire particulier, alors il ne vaut pas même essayer de résoudre tous les problèmes (vous aurez plus un par un) D'autre part, Angular CLI crée automatiquement une configuration entièrement fonctionnelle pour votre application. Donc, je recommande d'aller avec Angular 4 à la place. –
est-il possible de mettre à jour pour webpack ... de sorte que je vais apprendre le webpack aussi –