我有一个 Angular 5 应用。当我尝试运行它时，我在npm start上收到以下错误。
Error: Cannot find module './topologicalSort'
我认为这与'webpack'有关，但我不知道如何解决该问题。
完整错误在这里...
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/app/socialFeed/socialFeed.component.scss
Module build failed: Error: Cannot find module './topologicalSort'
at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:476:23)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Development\TileCase\V4\TileCase.V4.UI\node_modules\postcss-modules-extract-imports\lib\index.js:15:24)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Development\TileCase\V4\TileCase.V4.UI\node_modules\css-loader\lib\processCss.js:14:22)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
@ ./src/app/socialFeed/socialFeed.component.scss 2:21-151
我的webpack通用文件看起来像这样...
/**
* @author: @AngularClass
*/
const helpers = require('./helpers');
/**
* Webpack Plugins
*
* problem with copy-webpack-plugin
*/
const DefinePlugin = require('webpack/lib/DefinePlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const ngcWebpack = require('ngc-webpack');
const buildUtils = require('./build-utils');
/**
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = function (options) {
const isProd = options.env === 'production';
const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);
const entry = {
polyfills: './src/polyfills.browser.ts',
main: './src/main.browser.ts'
};
Object.assign(ngcWebpackConfig.plugin, {
tsConfigPath: METADATA.tsConfigPath,
mainPath: entry.main
});
return {
/**
* The entry point for the bundle
* Our Angular.js app
*
* See: http://webpack.github.io/docs/configuration.html#entry
*/
entry: entry,
/**
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
mainFields: [ ...(supportES2015 ? ['es2015'] : []), 'browser', 'module', 'main' ],
/**
* An array of extensions that should be used to resolve modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
*/
extensions: ['.ts', '.js', '.json'],
/**
* An array of directory names to be resolved to the current directory
*/
modules: [helpers.root('src'), helpers.root('node_modules')],
/**
* Add support for lettable operators.
*
* For existing codebase a refactor is required.
* All rxjs operator imports (e.g. `import 'rxjs/add/operator/map'` or `import { map } from `rxjs/operator/map'`
* must change to `import { map } from 'rxjs/operators'` (note that all operators are now under that import.
* Additionally some operators have changed to to JS keyword constraints (do => tap, catch => catchError)
*
* Remember to use the `pipe()` method to chain operators, this functinoally makes lettable operators similar to
* the old operators usage paradigm.
*
* For more details see:
* https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md#build-and-treeshaking
*
* If you are not planning on refactoring your codebase (or not planning on using imports from `rxjs/operators`
* comment out this line.
*
* BE AWARE that not using lettable operators will probably result in significant payload added to your bundle.
*/
alias: buildUtils.rxjsAlias(supportES2015)
},
/**
* Options affecting the normal modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*/
module: {
rules: [
...ngcWebpackConfig.loaders,
/**
* To string and css loader support for *.css files (from Angular components)
* Returns file content as string
*
*/
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src', 'styles')]
},
/**
* To string and sass loader support for *.scss files (from Angular components)
* Returns compiled css content as string
*
*/
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: [helpers.root('src', 'styles')]
},
/**
* Raw loader support for *.html
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.html$/,
use: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
/**
* File loader for supporting images, for example, in CSS files.
*/
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
/* File loader for supporting fonts, for example, in CSS files.
*/
{
test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader'
}
],
},
/**
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: [
/**
* Plugin: DefinePlugin
* Description: Define free variables.
* Useful for having development builds with debug logging or adding global constants.
*
* Environment helpers
*
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
*/
// NOTE: when adding more properties make sure you include them in custom-typings.d.ts
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'AOT': METADATA.AOT,
'process.env.ENV': JSON.stringify(METADATA.ENV),
'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
'process.env.HMR': METADATA.HMR
}),
/**
* Plugin: CommonsChunkPlugin
* Description: Shares common code between the pages.
* It identifies common modules and put them into a commons chunk.
*
* See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
* See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
*/
new CommonsChunkPlugin({
name: 'polyfills',
chunks: ['polyfills']
}),
new CommonsChunkPlugin({
minChunks: Infinity,
name: 'inline'
}),
new CommonsChunkPlugin({
name: 'main',
async: 'common',
children: true,
minChunks: 2
}),
/**
* Plugin: CopyWebpackPlugin
* Description: Copy files and directories in webpack.
*
* Copies project static assets.
*
* See: https://www.npmjs.com/package/copy-webpack-plugin
*/
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'assets' },
{ from: 'src/meta'}
],
isProd ? { ignore: [ 'mock-data/**/*' ] } : undefined
),
/*
* Plugin: HtmlWebpackPlugin
* Description: Simplifies creation of HTML files to serve your webpack bundles.
* This is especially useful for webpack bundles that include a hash in the filename
* which changes every compilation.
*
* See: https://github.com/ampedandwired/html-webpack-plugin
*/
new HtmlWebpackPlugin({
template: 'src/index.html',
title: METADATA.title,
chunksSortMode: function (a, b) {
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
},
metadata: METADATA,
inject: 'body',
xhtml: true,
minify: isProd ? {
caseSensitive: true,
collapseWhitespace: true,
keepClosingSlash: true
} : false
}),
/**
* Plugin: ScriptExtHtmlWebpackPlugin
* Description: Enhances html-webpack-plugin functionality
* with different deployment options for your scripts including:
*
* See: https://github.com/numical/script-ext-html-webpack-plugin
*/
new ScriptExtHtmlWebpackPlugin({
sync: /inline|polyfills|vendor/,
defaultAttribute: 'async',
preload: [/polyfills|vendor|main/],
prefetch: [/chunk/]
}),
/**
* Plugin: HtmlElementsPlugin
* Description: Generate html tags based on javascript maps.
*
* If a publicPath is set in the webpack output configuration, it will be automatically added to
* href attributes, you can disable that by adding a "=href": false property.
* You can also enable it to other attribute by settings "=attName": true.
*
* The configuration supplied is map between a location (key) and an element definition object (value)
* The location (key) is then exported to the template under then htmlElements property in webpack configuration.
*
* Example:
* Adding this plugin configuration
* new HtmlElementsPlugin({
* headTags: { ... }
* })
*
* Means we can use it in the template like this:
* <%= webpackConfig.htmlElements.headTags %>
*
* Dependencies: HtmlWebpackPlugin
*/
new HtmlElementsPlugin({
headTags: require('./head-config.common')
}),
/**
* Plugin LoaderOptionsPlugin (experimental)
*
* See: https://gist.github.com/sokra/27b24881210b56bbaff7
*/
new LoaderOptionsPlugin({}),
new ngcWebpack.NgcWebpackPlugin(ngcWebpackConfig.plugin),
/**
* Plugin: InlineManifestWebpackPlugin
* Inline Webpack's manifest.js in index.html
*
* https://github.com/szrenwei/inline-manifest-webpack-plugin
*/
new InlineManifestWebpackPlugin(),
],
/**
* Include polyfills or mocks for various node stuff
* Description: Node configuration
*
* See: https://webpack.github.io/docs/configuration.html#node
*/
node: {
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
};
}
我的package.json看起来像这样...
{
"name": "tilecase",
"version": "4.0.0",
"description": "tilecase",
"keywords": [
"tilecase"
],
"author": "TileCase",
"homepage": "https://www.tilecase.com",
"license": "MIT",
"scripts": {
"build:aot:prod": "npm run clean:dist && npm run clean:aot && cross-env BUILD_AOT=1 npm run webpack -- --config config/webpack.prod.js --progress --profile --bail",
"build:aot": "npm run build:aot:prod",
"build:aot:dev": "cross-env BUILD_AOT=1 npm run build:dev",
"build:dev": "npm run clean:dist && npm run webpack -- --config config/webpack.dev.js --progress --profile",
"build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
"build:prod": "npm run clean:dist && npm run webpack -- --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"ci:aot": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:aot && npm run e2e",
"ci:jit": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:prod && npm run e2e",
"ci:nobuild": "npm run lint && npm test && npm run e2e",
"ci:testall": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
"ci:travis": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:aot && npm run e2e:travis",
"ci": "npm run ci:testall",
"clean:dll": "npm run rimraf -- dll",
"clean:aot": "npm run rimraf -- compiled",
"clean:dist": "npm run rimraf -- dist",
"clean:install": "npm set progress=false && npm install",
"clean": "npm cache clean --force && npm run rimraf -- node_modules doc coverage dist compiled dll",
"docker": "docker",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"docs:compodoc": "compodoc -p tsconfig.json",
"docs:compodoc:serve": "compodoc -p tsconfig.json -s",
"docs:compodoc:serve:watch": "compodoc -p tsconfig.json -s -w",
"e2e:live": "npm-run-all -p -r server:prod:ci protractor:live",
"e2e:travis": "npm-run-all -p -r server:prod:ci protractor:delay",
"e2e": "npm-run-all -p -r server:prod:ci protractor",
"github-deploy:dev": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubDev",
"github-deploy:prod": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubProd",
"github-deploy": "npm run github-deploy:dev",
"lint": "npm run tslint \"src/**/*.ts\"",
"node": "node",
"postinstall": "npm run webdriver:update",
"postversion": "git push && git push --tags",
"preclean:install": "npm run clean",
"preversion": "npm test",
"protractor": "protractor",
"protractor:delay": "sleep 3 && npm run protractor",
"protractor:live": "protractor --elementExplorer",
"rimraf": "rimraf",
"server:dev:hmr": "npm run server:dev -- --hotOnly",
"server:aot:dev": "cross-env BUILD_AOT=1 npm run server:dev",
"server:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --open --progress --profile --watch --content-base src/",
"server:prod": "http-server dist -c-1 --cors",
"server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "npm run server:dev",
"start:aot": "npm run server:aot:dev",
"test": "npm run lint && karma start",
"tslint": "tslint",
"typedoc": "typedoc",
"version": "npm run build",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:dev": "npm run build:dev -- --watch",
"watch:aot:dev": "npm run build:aot:dev -- --watch",
"watch:prod": "npm run build:prod -- --watch",
"watch:aot:prod": "npm run build:aot:prod -- --watch",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch": "npm run watch:dev",
"webdriver-manager": "node ./node_modules/protractor/bin/webdriver-manager",
"webdriver:start": "node ./node_modules/protractor/bin/webdriver-manager start",
"webdriver:update": "node ./node_modules/protractor/bin/webdriver-manager update",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
},
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/animations": "5.1.0",
"@angular/common": "5.1.0",
"@angular/compiler": "5.1.0",
"@angular/core": "5.1.0",
"@angular/forms": "5.1.0",
"@angular/http": "5.1.0",
"@angular/platform-browser": "5.1.0",
"@angular/platform-browser-dynamic": "5.1.0",
"@angular/platform-server": "5.1.0",
"@angular/router": "5.1.0",
"angular-svg-icon": "5.0.0",
"angular2-infinite-scroll": "0.2.9",
"angular2-jwt": "0.1.28",
"angular2-moment": "0.8.2",
"angular4-social-login": "1.1.1",
"angulartics2": "1.6.3",
"core-js": "2.5.1",
"googlemaps": "1.12.0",
"http-server": "0.10.0",
"ie-shim": "0.1.0",
"ng-inline-svg": "6.1.0",
"ng2-bootstrap": "1.2.6",
"ng2-file-upload": "1.3.0",
"ng2-img-cropper": "0.9.0",
"ng2-page-scroll": "3.2.3",
"ng2-social-share": "0.0.10",
"ng4-geoautocomplete": "0.1.0",
"ngx-facebook": "^2.4.0",
"reflect-metadata": "0.1.12",
"rxjs": "5.5.2",
"zone.js": "0.8.20"
},
"devDependencies": {
"@angular-devkit/build-optimizer": "0.0.32",
"@angular/compiler-cli": "5.0.1",
"@compodoc/compodoc": "1.0.0-beta.15",
"@ngtools/webpack": "1.9.5",
"@types/hammerjs": "2.0.34",
"@types/jasmine": "2.5.45",
"@types/node": "7.0.39",
"@types/source-map": "0.5.0",
"@types/uglify-js": "2.6.28",
"@types/webpack": "2.2.16",
"add-asset-html-webpack-plugin": "1.0.2",
"angular2-template-loader": "0.6.2",
"assets-webpack-plugin": "3.5.1",
"awesome-typescript-loader": "3.3.0",
"codelyzer": "2.1.1",
"copy-webpack-plugin": "4.0.1",
"cross-env": "5.0.0",
"css-loader": "0.28.11",
"exports-loader": "0.6.4",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.1",
"find-root": "1.0.0",
"gh-pages": "1.0.0",
"html-webpack-plugin": "2.28.0",
"imports-loader": "0.7.1",
"inline-manifest-webpack-plugin": "3.0.1",
"istanbul-instrumenter-loader": "2.0.0",
"jasmine-core": "2.9.1",
"karma": "1.6.0",
"karma-chrome-launcher": "2.0.0",
"karma-coverage": "1.1.1",
"karma-jasmine": "1.1.0",
"karma-mocha-reporter": "2.2.3",
"karma-remap-coverage": "0.1.4",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.4",
"ngc-webpack": "4.0.2",
"node-sass": "4.6.0",
"npm-run-all": "4.0.2",
"optimize-js-plugin": "0.0.4",
"parse5": "3.0.2",
"preload-webpack-plugin": "1.2.2",
"protractor": "5.1.1",
"raw-loader": "0.5.1",
"rimraf": "2.6.1",
"sass-loader": "7.0.0",
"script-ext-html-webpack-plugin": "1.8.5",
"source-map-loader": "0.2.1",
"string-replace-loader": "1.3.0",
"style-loader": "0.18.1",
"to-string-loader": "1.1.5",
"ts-node": "3.3.0",
"tslib": "1.9.0",
"tslint": "4.5.1",
"tslint-loader": "3.5.2",
"typedoc": "0.7.1",
"typescript": "2.5.2",
"uglifyjs-webpack-plugin": "1.0.1",
"url-loader": "0.5.8",
"webpack": "3.8.1",
"webpack-dev-middleware": "1.10.1",
"webpack-dev-server": "2.7.1",
"webpack-dll-bundles-plugin": "1.0.0-beta.5",
"webpack-merge": "4.1.0",
"webpack-svgstore-plugin": "3.0.0"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
答案 0 :(得分：1)
我建议您完全删除 node_modules 目录，然后从package.json
"css-loader": "0.28.11",
"sass-loader": "7.0.0",
之后，您运行npm install，然后再次运行它们：
npm install sass-loader node-sass webpack --save-dev
npm install --save-dev css-loader