- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
更新
@developer033 提到后,我正在运行 npm run server:prod 并且应用程序正在 prod 模式下运行。但我不确定,如何验证它是否经过 AOT 优化?
如果我检查 main.bundle.js 以检查它是否有 main.browser.aot.ts 的代码:
我看到是 main.browser.ts 而不是 main.browser.aot.ts所以我不确定我是否在使用 AOT 构建。
原帖
好的,我可以使用 Webpack 在 AOT 模式下编译我的 Angular2 项目,它创建了两个文件夹,一个是“dist”,另一个是“compiled”,但我不确定编译后如何运行 AOT 项目。
构建命令:
"build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail"
编译后,我运行命令:
npm run webpack-dev-server
现在应用程序运行了,但我不确定它是否使用 AOT 编译代码。我在浏览器中看到 AOT 和非 AOT 应用程序没有区别。
tsconfig.webpack.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"baseUrl": "./src",
"outDir": "compiled",
"paths": {},
"lib": [
"es2015",
"dom"
],
"typeRoots": [
"node_modules/@types"
]
},
"exclude": [
"node_modules",
"dist",
"compiled",
"src/**/*.spec.ts",
"src/**/*.e2e.ts"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"angularCompilerOptions": {
"genDir": "compiled",
"skipMetadataEmit": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
main.browser.aot.ts:
import { platformBrowser } from '@angular/platform-browser';
import { decorateModuleRef } from './app/environment';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory';
if (ENV.toLocaleLowerCase() === 'production' || ENV.toLocaleLowerCase() === 'prod') {
enableProdMode();
}
export function main(): Promise<any> {
return platformBrowser()
.bootstrapModuleFactory(AppModuleNgFactory)
.then(decorateModuleRef)
.catch(err => console.error(err));
}
export function bootstrapDomReady() {
document.addEventListener('DOMContentLoaded', main);
}
bootstrapDomReady();
config/webpack.common.js:
const HMR = helpers.hasProcessFlag('hot');
const AOT = helpers.hasNpmFlag('aot');
const METADATA = {
title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
baseUrl: '/',
isDevServer: helpers.isWebpackDevServer()
};
module.exports = function(options) {
isProd = options.env === 'production';
return {
entry: {
'polyfills': './src/polyfills.browser.ts',
'vendor': './src/vendor.browser.ts',
'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts'
},
resolve: { extensions: ['.ts', '.js', '.json', '.css', '.scss'], modules: [helpers.root('src'), 'node_modules'], },
module: {
rules: [
{
test: /\.ts$/,
loaders: [
'@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
'awesome-typescript-loader',
{ loader: 'ng-router-loader', options: { loader: 'async-import', genDir: 'compiled', aot: AOT } },
'angular2-template-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
},{ test: /\.json$/, loader: 'json-loader'},
{ test: /\.woff(2)?(\?v=.+)?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?v=.+)?$/, use: 'file-loader' },
{ test: /bootstrap\/dist\/js\/umd\//, use: 'imports-loader?jQuery=jquery' },
{ test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] },
{ test: /\.(jpg|png|gif)$/, loader: 'file' },
],
},
plugins: [
new ngcWebpack.NgcWebpackPlugin({
disabled: !AOT,
tsConfig: helpers.root('tsconfig.webpack.json'),
resourceOverride: helpers.root('config/resource-override.js')
}),
new ExtractTextPlugin({ filename: 'initial.css', allChunks: true }),
new AssetsPlugin({ path: helpers.root('dist'), filename: 'webpack-assets.json', prettyPrint: true }),
new CheckerPlugin(),
new CommonsChunkPlugin({ name: 'polyfills', chunks: ['polyfills'] }),
new CommonsChunkPlugin({ name: 'vendor', chunks: ['main'], minChunks: module => /node_modules/.test(module.resource) }),
new CommonsChunkPlugin({ name: ['polyfills', 'vendor'].reverse() }),
new ContextReplacementPlugin( /angular(\\|\/)core(\\|\/)@angular/, helpers.root('src') ),
new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets', }, { from: 'src/meta', }, ]),
new HtmlWebpackPlugin({ template: 'src/index.html', title: METADATA.title, chunksSortMode: 'dependency', metadata: METADATA, inject: 'head',
//csp: "default-src 'self'; child-src 'none'; object-src 'none'"
}),
new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }),
new HtmlElementsPlugin({ headTags: require('./head-config.common') }),
new LoaderOptionsPlugin({}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
// Fix Angular 2
new NormalModuleReplacementPlugin( /facade(\\|\/)async/, helpers.root('node_modules/@angular/core/src/facade/async.js') ),
new NormalModuleReplacementPlugin( /facade(\\|\/)collection/, helpers.root('node_modules/@angular/core/src/facade/collection.js') ),
new NormalModuleReplacementPlugin( /facade(\\|\/)errors/, helpers.root('node_modules/@angular/core/src/facade/errors.js') ),
new NormalModuleReplacementPlugin( /facade(\\|\/)lang/, helpers.root('node_modules/@angular/core/src/facade/lang.js') ),
new NormalModuleReplacementPlugin( /facade(\\|\/)math/, helpers.root('node_modules/@angular/core/src/facade/math.js') ),
],
node: { global: true, crypto: 'empty', process: true, module: false, clearImmediate: false, setImmediate: false }
};
}
config/webpack.prod.js:
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
const API_HOST = process.env.HOST || 'localhost';
const API_PORT = process.env.PORT || 8080;
const METADATA = webpackMerge(commonConfig({ env: ENV }).metadata, { API_HOST: API_HOST, API_PORT: API_PORT,
ENV: ENV, HMR: false
});
module.exports = function(env) {
return webpackMerge(commonConfig({ env: ENV }), {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
filename: '[name].[chunkhash].bundle.js',
sourceMapFilename: '[name].[chunkhash].bundle.map',
chunkFilename: '[id].[chunkhash].chunk.js'
},
plugins: [
new WebpackMd5Hash(),
new DefinePlugin({'API_HOST': JSON.stringify(API_HOST), 'API_PORT': JSON.stringify(API_PORT),
'ENV': JSON.stringify(METADATA.ENV), 'NODE_ENV': JSON.stringify(METADATA.ENV), 'HMR': METADATA.HMR,
'process.env': {
'API_HOST': JSON.stringify(API_HOST), 'API_PORT': JSON.stringify(API_PORT),
'ENV': JSON.stringify(METADATA.ENV), 'NODE_ENV': JSON.stringify(METADATA.ENV), 'HMR': METADATA.HMR,
}
}),
new UglifyJsPlugin({
beautify: false, //prod
mangle: { screw_ie8: true, keep_fnames: true }, //prod
compress: { screw_ie8: true }, //prod
comments: false //prod
}),
new NormalModuleReplacementPlugin( /angular2-hmr/, helpers.root('config/modules/angular2-hmr-prod.js') ),
new LoaderOptionsPlugin({
debug: false,
options: {
tslint: { emitErrors: true, failOnHint: true, resourcePath: 'src' },
htmlLoader: { minimize: true, removeAttributeQuotes: false, caseSensitive: true,
customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
customAttrAssign: [/\)?\]?=/]
},
}
}),
],
node: { global: true, crypto: 'empty', process: false, module: false, clearImmediate: false, setImmediate: false }
});
}
Package.json:
{
"name": "angular2-webpack-starter",
"version": "5.1.1",
"description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
"keywords": [
"angular2",
"webpack",
"typescript"
],
"author": "Patrick Stapleton <patrick@angularclass.com>",
"homepage": "https://github.com/angularclass/angular2-webpack-starter",
"license": "MIT",
"scripts": {
"build:dev": "webpack --config config/webpack.dev.js --progress --profile",
"build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"ci": "npm run lint && npm test && npm run e2e",
"clean:dist": "npm run rimraf -- dist",
"clean:install": "npm set progress=false && npm install",
"clean:start": "npm start",
"clean": "npm cache clean && npm run rimraf -- node_modules dist",
"clean:aot": "npm run rimraf -- compiled",
"docker": "docker",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"e2e:live": "npm run e2e -- --elementExplorer",
"e2e": "npm run protractor",
"github-deploy:dev": "webpack --config config/webpack.github-deploy.js --progress --profile --github-dev",
"github-deploy:prod": "webpack --config config/webpack.github-deploy.js --progress --profile --github-prod",
"github-deploy": "npm run github-deploy:dev",
"lint": "npm run tslint \"src/**/*.ts\"",
"postversion": "git push && git push --tags",
"prebuild:dev": "npm run clean:dist",
"prebuild:prod": "npm run clean:dist",
"preclean:install": "npm run clean",
"preclean:start": "npm run clean",
"pree2e": "npm run webdriver:update -- --standalone",
"preversion": "npm test",
"protractor": "protractor",
"rimraf": "rimraf",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
"server:prod": "http-server dist --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "npm run server:dev",
"test": "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:prod": "npm run build:prod -- --watch",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch": "npm run watch:dev",
"build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail",
"webdriver-manager": "webdriver-manager",
"webdriver:start": "npm run webdriver-manager start",
"webdriver:update": "npm run webdriver-manager update",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
},
"dependencies": {
"@angular/animations": "^4.1.3",
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "^4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/platform-server": "4.1.3",
"@angular/router": "4.1.3",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/hmr": "~1.2.0",
"@angularclass/hmr-loader": "~3.0.2",
"animate.css": "^3.5.2",
"assets-webpack-plugin": "^3.4.0",
"bootstrap": "^4.0.0-alpha.6",
"bootstrap-loader": "^2.1.0",
"bootstrap-sass": "^3.3.7",
"core-js": "^2.4.1",
"error-stack-parser": "^2.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"font-awesome": "^4.7.0",
"font-awesome-sass-loader": "^2.0.1",
"http-server": "^0.10.0",
"ie-shim": "^0.1.0",
"ionicons": "^3.0.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"ng-snotify": "^1.1.6",
"ngc-webpack": "^2.0.0",
"normalize.css": "^7.0.0",
"primeng": "^4.0.1",
"resolve-url-loader": "^2.0.2",
"rxjs": "^5.0.0-rc.1",
"sourcemapped-stacktrace": "^1.1.6",
"stacktrace-gps": "^3.0.1",
"stacktrace-js": "^2.0.0",
"zone.js": "~0.8.11"
},
"devDependencies": {
"@angular/cli": "^1.1.0",
"@angular/compiler-cli": "^4.1.3",
"@ngtools/webpack": "^1.4.1",
"@types/hammerjs": "^2.0.33",
"@types/jasmine": "^2.2.34",
"@types/node": "^7.0.22",
"@types/protractor": "^4.0.0",
"@types/selenium-webdriver": "3.0.4",
"@types/source-map": "^0.5.0",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^2.2.15",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.1.3",
"codelyzer": "~3.0.1",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.28.4",
"exports-loader": "^0.6.4",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"gh-pages": "^1.0.0",
"html-webpack-plugin": "^2.21.0",
"imports-loader": "^0.7.1",
"istanbul-instrumenter-loader": "^2.0.0",
"json-loader": "^0.5.4",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.0",
"karma-remap-coverage": "^0.1.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.3",
"ng-router-loader": "^2.1.0",
"node-sass": "^4.5.3",
"parse5": "^3.0.2",
"postcss-loader": "^2.0.5",
"protractor": "^5.1.2",
"raw-loader": "0.5.1",
"resolve-url-loader": "^2.0.2",
"rimraf": "^2.5.2",
"sass-loader": "^6.0.5",
"script-ext-html-webpack-plugin": "^1.3.2",
"source-map-loader": "^0.2.1",
"string-replace-loader": "1.2.0",
"style-loader": "^0.18.1",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.2",
"ts-node": "^3.0.4",
"tslint": "^5.3.2",
"tslint-loader": "^3.5.3",
"typedoc": "^0.7.1",
"typescript": "2.3.4",
"url-loader": "^0.5.8",
"webpack": "^2.1.0-beta.25",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.1.0-beta.9",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^4.1.0"
},
"repository": {
"type": "git",
"url": "https://github.com/angularclass/angular2-webpack-starter.git"
},
"bugs": {
"url": "https://github.com/angularclass/angular2-webpack-starter/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
最佳答案
更新:
正如@developer033 所指出的,ng2-admin 最近更新为 Angular-cli 而不是 angular2-webpack-starter。
原答案:
发布完整答案
运行以下两个命令来构建和运行服务器(如@developer033 所述):
npm run build:prod (npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail)
npm run server:prod
在我的例子中,我在不同的地址同时运行 JIT 和 AOT 构建:
http://127.0.0.1:8080是JIT,其余是AOT
要验证您的构建是否为 AOT,请按照@Maximus 所述检查您的主 bundle 文件。您也可以暂时禁用 UglifyJsPlugin 优化代码,只是为了检查主包 js。
最后,我在 AOT 构建中遇到了以下错误:
"Uncaught TypeError: Cannot read property 'setGlobalVar' of null"
为了解决这个问题,我简单地评论了 disableDebugTools();在我的 environment.ts 文件中。
注意:
我用 angular2-webpack-starter 创建了项目模板对于 AOT,我提到了 ng2-admin
关于javascript - 如何使用 Webpack 运行 Angular 2 AOT,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44469206/
好的,所以我想从批处理文件运行我的整个工作环境... 我想要实现什么...... 打开新的 powershell,打开我的 API 文件夹并从该文件夹运行 VS Code 编辑器(cd c:\xy;
我正在查看 Cocoa Controls 上的示例并下载了一些演示。我遇到的问题是一些例子,比如 BCTabBarController ,不会在我的设备上构建或启动。当我打开项目时,它看起来很正常,没
我刚刚开始学习 C 语言(擅长 Java 和 Python)。 当编写 C 程序(例如 hello world)时,我在 ubuntu cmd 行上使用 gcc hello.c -o hello 编译
我在 php 脚本从 cron 开始运行到超时后注意到了这个问题,但是当它从命令行手动运行时这不是问题。 (对于 CLI,PHP 默认的 max_execution_time 是 0) 所以我尝试运行
我可以使用命令行运行测试 > ./node_modules/.bin/wdio wdio.conf.js 但是如果我尝试从 IntelliJ 的运行/调试配置运行它,我会遇到各种不同的错误。 Fea
Error occurred during initialization of VM. Could not reserve enough space for object heap. Error: C
将 Anaconda 安装到 C:\ 后,我无法打开 jupyter 笔记本。无论是在带有 jupyter notebook 的 Anaconda Prompt 中还是在导航器中。我就是无法让它工作。
我遇到一个问题,如果我双击我的脚本 (.py),或者使用 IDLE 打开它,它将正确编译并运行。但是,如果我尝试在 Windows 命令行中运行脚本,请使用 C:\> "C:\Software_Dev
情况 我正在使用 mysql 数据库。查询从 phpmyadmin 和 postman 运行 但是当我从 android 发送请求时(它返回零行) 我已经记录了从 android 发送的电子邮件是正确
所以这个有点奇怪 - 为什么从 Java 运行 .exe 文件会给出不同的输出而不是直接运行 .exe。 当 java 在下面的行执行时,它会调用我构建的可与 3CX 电话系统配合使用的 .exe 文
这行代码 Environment.Is64BitProcess 当我的应用单独运行时评估为真。 但是当它在我的 Visual Studio 单元测试中运行时,相同的表达式的计算结果为 false。 我
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
我写了一个使用 libpq 连接到 PostgreSQL 数据库的演示。 我尝试通过包含将 C 文件连接到 PostgreSQL #include 在我将路径添加到系统变量 I:\Program F
如何从 Jenkins 运行 Android 模拟器来运行我的测试?当我在 Execiute Windows bath 命令中写入时,运行模拟器的命令: emulator -avd Tester 然后
我已经配置好东西,这样我就可以使用 ssl 登录和访问在 nginx 上运行的 errbit 我的问题是我不知道如何设置我的 Rails 应用程序的 errbit.rb 以便我可以运行测试 nginx
我编写了 flutter 应用程序,我通过 xcode 打开了 ios 部分并且应用程序正在运行,但是当我通过 flutter build ios 通过 vscode 运行应用程序时,我得到了这个错误
我有一个简短的 python 脚本,它使用日志记录模块和 configparser 模块。我在Win7下使用PyCharm 2.7.1和Python 3.3。 当我使用 PyCharm 运行我的脚本时
我在这里遇到了一些难题。 我的开发箱是 64 位的,windows 7。我所有的项目都编译为“任何 CPU”。该项目引用了 64 位版本的第 3 方软件 当我运行不使用任何 Web 引用的单元测试时,
当我注意到以下问题时,我正在做一些 C++ 练习。给定的代码将不会在 Visual Studio 2013 或 Qt Creator 5.4.1 中运行/编译 报错: invalid types 'd
假设我有一个 easteregg.py 文件: from airflow import DAG from dateutil import parser from datetime import tim
我是一名优秀的程序员,十分优秀!