Setting Seed Project with Latest: Angular, Node/Express, Webpack, Typescript

Question

I've been going over tutorials by Maximilian on Udemy and I've hit a road block. I'm trying to setup a new project from scratch that's a node/express and angular 4 app. The problem, I think, is my script(s) in my package.json . I'm doing them exactly as the course suggests (course updated to Angular4 final); I'm trying to load the latest of all modules though.

My setup commands :

run express generator to generate shell and package.json

then

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

Here's my code :

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

    }
};

When I run npm run build:prod I get the following error:

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

I have scowered the web in search of practical means of putting together the latest Angular and Node/Express using webpack along with typescript. I've tried changing core-js to an earlier release. I cannot find much information on putting it all together.

My goal is to be able to be able to use npm run build for development (which works strangely, I'll post webpack.config.dev.js below) and use npm run build:prod for production (cleaning up files, generating my 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'}
                ]
            }
        ]

    }
});

Answer 1

将两个文件中的"target": "es5"更改为： "target": "es6"