0
我試圖讓webpack-dev-server啓動並運行後，我得到了一個「hello world」Angular2應用程序開始工作我沒有開始實施對更大的應用程序的更改。世界您好測試和更大的應用程序之間的主要區別是，我在我的tsconfig.json目標ES6：Webpack開發者服務器失敗ES6 awesome-typescript-loader
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude":[
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
包的其餘部分是相同的兩個項目：
"scripts": {
"start": "webpack-dev-server --inline --progress --port 10100",
},
"author": "me",
"license": "ISC",
"dependencies": {
"@angular/animations": "^4.0.2",
"@angular/common": "^4.0.2",
"@angular/compiler": "^4.0.2",
"@angular/core": "^4.0.2",
"@angular/forms": "^4.0.2",
"@angular/http": "^4.0.2",
"@angular/platform-browser": "^4.0.2",
"@angular/platform-browser-dynamic": "^4.0.2",
"@angular/router": "^4.0.2",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.23",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"rxjs": "^5.3.0",
"tether": "^1.4.0",
"zone.js": "^0.8.5"
},
"devDependencies": {
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.2",
"babili-webpack-plugin": "0.0.11",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"null-loader": "^0.1.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"style-loader": "^0.16.1",
"to-string-loader": "^1.1.5",
"typescript": "^2.2.2",
"typings": "^2.1.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2",
"webpack-merge": "^4.1.0"
}
我webpack.common.js ：
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: {
configFileName: '../tsconfig.json'
}
},
'angular2-template-loader'
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.ProvidePlugin({
'jQuery': 'jquery',
'window.jQuery': 'jquery',
'Tether': 'tether',
'window.Tether': 'tether'
})
]
};
和webpack.dev.js：
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
publicPath: 'http://localhost:10100/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
我有以下typings.json：
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.9.0+20170324193834",
"node": "registry:dt/node#7.0.0+20170322231424"
}
}
的main.ts我認爲這是相當簡單：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
的polyfills.ts：
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV !== 'production' && process.env.ENV !== 'staging') {
// Development and test
Error['stackTraceLimit'] = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}
而且：
// Angular
import '@angular/animations';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
import '@angular/forms';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import '@ng-bootstrap/ng-bootstrap';
import 'jquery';
import 'tether';
import 'bootstrap';
我知道我必須導入bootstrap.css和font-awesome css文件，但我不認爲這不應該阻止網站加載。我得到的錯誤與重複的標識符有關，或者無法加載某些模塊。一些例子是：
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:2684:22
TS2451: Cannot redeclare block-scoped variable 'S_IWOTH'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:2687:22
TS2451: Cannot redeclare block-scoped variable 'S_IXOTH'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:2911:18
TS2300: Duplicate identifier 'TLSSocket'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:3285:10
TS2300: Duplicate identifier 'Utf8AsciiLatin1Encoding'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:3286:10
TS2300: Duplicate identifier 'HexBase64Latin1Encoding'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:3287:10
TS2300: Duplicate identifier 'Utf8AsciiBinaryEncoding'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:3288:10
TS2300: Duplicate identifier 'HexBase64BinaryEncoding'.
而且
[at-loader] ..\carlos\node_modules\@angular\platform-browser\animations\src\animation_renderer.d.ts:1:53
TS2307: Cannot find module '@angular/animations/browser'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ..\carlos\node_modules\@angular\platform-browser\animations\src\providers.d.ts:8:276
TS2307: Cannot find module '@angular/animations/browser'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ..\carlos\node_modules\@angular\router\upgrade\src\upgrade.d.ts:9:31
TS2307: Cannot find module '@angular/upgrade/static'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ..\carlos\node_modules\awesome-typescript-loader\dist\checker\checker.d.ts:1:1
TS2688: Cannot find type definition file for 'node'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ..\carlos\node_modules\awesome-typescript-loader\dist\checker\send.d.ts:1:1
TS2688: Cannot find type definition file for 'node'.
如果我的目標ES5然後我得到相關的HTML模板，但沒有什麼重大的17個錯誤，所以我不知道我是否有使用其他裝載機TS在ES6上？