【发布时间】：2017-10-29 00:41:03
【问题描述】：
我一直在阅读 Maximilian 在 Udemy 上的教程，但遇到了障碍。我正在尝试从头开始设置一个新项目，它是一个 node/express 和 angular 4 应用程序。我认为问题在于我的package.json 中的脚本。我完全按照课程的建议做（课程更新到 Angular4 final）；我正在尝试加载所有模块中的最新模块。
我的设置命令：
运行 express generator 生成 shell 和 package.json
然后
npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next@angular/platform-server@next @angular/router@next @angular/animations@next --save
npm install --save zone.js rxjs core-js
npm install --save-dev @types/node @types/core-js
npm install --save-dev webpack webpack-merge angular2-template-loader awesome-typescript-loader del-cli html-loader typescript angular2-router-loader raw-loader
这是我的代码：
package.json
{
"name": "movie-list",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
"build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"
},
"dependencies": {
"@angular/animations": "^4.2.0-rc.1",
"@angular/common": "^4.2.0-rc.1",
"@angular/compiler": "^4.2.0-rc.1",
"@angular/compiler-cli": "^4.2.0-rc.1",
"@angular/core": "^4.2.0-rc.1",
"@angular/forms": "^4.2.0-rc.1",
"@angular/http": "^4.2.0-rc.1",
"@angular/platform-browser": "^4.2.0-rc.1",
"@angular/platform-browser-dynamic": "^4.2.0-rc.1",
"@angular/platform-server": "^4.2.0-rc.1",
"@angular/router": "^4.2.0-rc.1",
"body-parser": "~1.15.2",
"cookie-parser": "~1.4.3",
"core-js": "^2.4.1",
"debug": "~2.2.0",
"express": "~4.14.0",
"hbs": "~3.1.0",
"morgan": "~1.6.1",
"node-sass-middleware": "^0.11.0",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.4.0",
"serve-favicon": "~2.3.0",
"zone.js": "^0.8.11"
},
"devDependencies": {
"@types/core-js": "^0.9.41",
"@types/node": "^7.0.22",
"angular2-router-loader": "^0.3.5",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.3",
"del-cli": "^1.0.0",
"html-loader": "^0.4.5",
"raw-loader": "^0.5.1",
"typescript": "^2.3.3",
"webpack": "^2.6.1",
"webpack-merge": "^4.1.0"
}
}
tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"./node_modules/@types"
],"lib": [
"es6",
"dom"
]
}
}
tsconfig.aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./public/js/app"
},
"typeRoots": [
"./node_modules/@types"
],
"lib": [
"es6",
"dom"
],
"angularCompilerOptions": {
"skipMetadataEmit": true
}
}
webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');
module.exports = webpackMerge.smart(commonConfig, {
entry: {
'app': './assets/app/main.aot.ts'
},
output: {
path: path.resolve(__dirname + '/public/js/app'),
filename: 'bundle.js',
publicPath: '/js/app/',
chunkFilename: '[id].[hash].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
'awesome-typescript-loader',
'angular2-template-loader',
'angular-router-loader?aot=true'
]
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: false
})
]
});
webpack.config.common.js
var webpack = require('webpack');
module.exports = {
entry: {
'app': './assets/app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
},
{
test: /\.css$/,
use: [{ loader: 'raw-loader' }]
}
],
exprContextCritical: false
}
};
当我运行 npm run build:prod 时，我收到以下错误：
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2075:38: Property 'keyFor' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2079:37: Property 'match' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2083:39: Property 'replace' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2087:38: Property 'search' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2091:39: Property 'species' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2095:37: Property 'split' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2099:43: Property 'toPrimitive' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2103:43: Property 'toStringTag' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/@types/core-js/index.d.ts:2107:43: Property 'unscopables' does not exist on type 'SymbolConstructor'.
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" "build:prod"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movie-list@1.0.0 build:prod: `del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail
&& del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app
/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the movie-list@1.0.0 build:prod script 'del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progr
ess --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.
shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts''.
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 movie-list package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app
/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'ass
ets/app/**/*.ngstyle.ts'
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs movie-list
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls movie-list
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Kenny\AppData\Roaming\npm-cache\_logs\2017-05-28T17_02_43_104Z-debug.log
我已经浏览了网络，以寻找使用 webpack 和 typescript 将最新的 Angular 和 Node/Express 组合在一起的实用方法。我尝试将core-js 更改为较早的版本。我找不到太多关于将它们放在一起的信息。
我的目标是能够使用npm run build 进行开发（这很奇怪，我将在下面发布webpack.config.dev.js）并使用npm run build:prod 进行生产（清理文件，生成我的bundle.js )。
webpack.config.dev.js
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: path.resolve(__dirname + '/public/js/app'),
publicPath: '/js/app/',
filename: 'bundle.js',
publicPath: '/js/app/',
chunkFilename: '[id].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{loader: 'awesome-typescript-loader', options: {
transpileOnly: true
}},
{loader: 'angular2-template-loader'},
{loader: 'angular2-router-loader'}
]
}
]
}
});
【问题讨论】：
标签： javascript node.js angular typescript webpack