Here is my project folder structure：
project
|--Gruntfile.js
|--build
|--public
|--|--js
|-----|--lib
|-----|--module
|-----|--main.js
my build config is in the Gruntfile.js
requirejs: {
compileProject: {
baseUrl: 'js',
appDir: 'public',
dir: 'build',
modules: [
{ name: 'main'}
],
paths: {
main: 'main',
jquery: 'lib/jquery-1.10.0.min.js'
}
}
}
but when I run it, the terminal tell me wrong:
Running "requirejs:compileProject" (requirejs) task
[Error: Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".
however I have already set the dir value, so what's wrong with my code?
Your requirejs options should be specified within options:
requirejs: {
compileProject: {
options : {
baseUrl: 'js',
appDir: 'public',
dir: 'build',
modules: [
{ name: 'main'}
],
paths: {
main: 'main',
jquery: 'lib/jquery-1.10.0.min.js'
}
}
}
}
Related
Prior to upgrading to Angular 11, I ran my unit tests with code coverage via the following command:
ng test --project my-app --code-coverage true
When I upgraded my project to Angular 11, I was still able to do my code coverage tests, but I started getting a message saying "'karma-coverage-istanbul-reporter' usage has been deprecated since version 11". It asked me to install karma-coverage and update karma.conf.js. So I did what it asked. I installed karma-coverage and karma via this command:
npm install karma karma-coverage --save-dev
As a result, I see in my package.json, under devDependencies, the entries for karma:
"karma": "^5.2.3",<br>
"karma-coverage": "^2.0.3"
I updated my karma.conf.js file. The following is what exists, everything was as it was originally except for my comments:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'), // NEWLY ADDED
// ORIGINALLY HERE NOW REMOVED require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
reporters: ['progress', 'kjhtml', 'coverage'],
// coverageIstanbulReporter NO LONGER HERE
//coverageIstanbulReporter: {
// dir: require('path').join(__dirname, '../../coverage/my-app'),
// reports: ['html', 'lcovonly', 'text-summary'],
// fixWebpackSourcePaths: true
//},
// coverReporter NEWLY ADDED
coverageReporter: {
dir: 'build/reports/coverage',
reporters: [
{ type: 'html', subdir: 'report-html' },
{ type: 'lcov', subdir: 'report-lcov' }
]
},
// THE FOLLOWING REMAINED AS IS
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
Having made this update, two things are happening and I can't figure out why.
When I run my normal code coverage command, I get the following error: "Server start failed on port 9876: Error: karma-coverage must be installed in order to run code coverage." I did install it, as my package.json indicates, but for some reason my project doesn't recognize this. In addition, if I add back the karma-coverage-istanbul-reporter require method to my conf.js file, coverage works fine, but I still get that deprecation message. Can anyone explain to me why I may be getting this error?
When I run my tests without coverage, I now get multiple warnings that I never got before, like: "Unable to determine file type from the file extension, defaulting to js.
To silence the warning specify a valid type for C:/Angular/my-project/projects/my-app/src/app/app.component.spec.ts in the configuration file." What would I need to do to resolve this?
EDIT: I found the answer. Inside the coverageReporter object, you need to add the fixWebpackSourcePaths property to true:
coverageReporter: {
dir: 'build/reports/coverage',
reporters: [
{ type: 'html', subdir: 'report-html' },
{ type: 'lcov', subdir: 'report-lcov' }
],
fixWebpackSourcePaths: true
},
The trick for me was to remove 'coverage' from the reporters. It should just be:
reporters: ['progress', 'kjhtml'],
The coverage report is then created as expected without weird warnings being thrown.
This seems to be the Angular way, have a look at the karma.conf.js generated by the ng new schematics.
Also, I found that the reporters must have a subdir field:
Doesn't work
reporters: [
{ type: 'html' }
}
Doesn't work
reporters: [
{ type: 'html', subdir: '' }
}
Works:
reporters: [
{ type: 'html', subdir: 'report-html' }
}
when i use webpack4.2.0, play 'run start', show errors follow:
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
ERROR in multi (webpack)-dev-server/client?http://localhost:8001 ./src
Module not found: Error: Can't resolve './src' in '/Users/xudengwei/projects/xudengwei/myOpenGithub/angular5-scaffold'
# multi (webpack)-dev-server/client?http://localhost:8001 ./src
ℹ ｢wdm｣: Failed to compile.
#
my configure as follow:
webpack.common.js:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/app/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: true
})
]
};
webpack.dev.js:
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(commonConfig, {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
module: {
rules: []
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: true
})
],
devServer: {
devServer: {
contentBase: './dist'
},
}
});
someone knows the reason?thanks
I also just get this error like you got and its was solved when i specify webpack config file. Try to add --config when you run webpack-dev-server. Ex. webpack-dev-server --config webpack.dev.js
what command did you run in the terminal? It looks to me like you used run start ./src and so it's complaining that it can't find the location ./scr
Try just running run start with no additional arguments. That did the trick for me
I want to use Webpack to compile files for my Django app on Heroku, and am using webpack-bundle-tracker to keep track of the modules created in webpack-stats.json. When I run webpack locally, it compiles all the files and bundles them into the output directory, no problem. But when I run webpack on Heroku, it shows me that all the chunks were emitted, but none of the files appear in the output directory. When I check the content of webpack-stats.json it always says "status" : "compiling".
Here's the content of my webpack.config.js.
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
context: __dirname,
entry: './assets/js/index',
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js',
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
loaders: [
{ test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react']
}
}
]
},
resolve: {
modulesDirectories: ['node_modules', 'bower_components'],
extensions: ['', '.js', '.jsx'],
},
}
I want webpack to bundle my assets the same way on heroku as it does on my local machine. How can I accomplish that?
I'm used to building a asset compilation system with Grunt or Gulp. Using Gulp's livereload and the Chrome livereload plugin, I have a pretty sweet system where it watches for changes of certain file types and reloads only the file that were changed. With ember-cli, when I change a CSS file, it just reloads the entire page, rather than just reloading the CSS file. This gets to be a pain when I'm trying to style a deeply nested process. Any ideas/thoughts on how to get this working with Ember CLI correctly?
I believe this is still a work in progress with Ember CLI and is planned for a future release, or is depending on a fix in Broccoli. See https://github.com/stefanpenner/ember-cli/issues/2371
What I've done to get around this probably isn't ideal, but I end up using grunt, and use a shell command to run ember build, copy the output to a different directory that is being served by another server (in my case IIS express), and then just manually watch my files.
Here are the snippets from my grunt file. I'm sure you can accomplish the same using Gulp.
shell: {
prod: {
command: 'ember build --environment production'
},
dev: {
command: 'ember build'
}
},
copy: {
dev: {
files: [{
src: '**',
dest: '../Server/Content/js',
cwd: 'dist/content/js',
expand: true
}, {
src: '**',
dest: '../Server/content/css',
cwd: 'dist/content/css',
expand: true
}, {
src: 'dist/index.html',
dest: '../Server/Views/Home/Root.cshtml'
}]
}
},
watch: {
dev: {
files: [
'app/**/*.js', 'app/**/*.hbs'
],
tasks: ['_buildDev'],
options: {
livereload: true
}
},
less: {
files: [
'app/**/*.less'
],
tasks: ['shell:dev', 'copy:dev']
},
css: {
files: [
'../Server/Content/css/**/*'
],
options: {
livereload: true
}
}
}
Official support is in the works, meanwhile try this ember-addon https://www.npmjs.com/package/ember-cli-styles-reloader
We have 2 different builds of our dojo application, using either ourapp.profile.js or ourapp.custom.profile.js which contain the dojo application build profile.
Apart from a few differences in the layers property the rest of these 2 files are virtually identical. What's the best way to share the common settings between these 2 files?
Here's a simplified example of one our application profiles
var profile = (function () {
'use strict';
return {
basePath: "../",
releaseDir: "../../../build",
releaseName: "js",
action: "release",
dirs: ["../css", "../css/font", "../img", "../img/icons", "../stylus/themes/common"],
packages: [
{
name: "dbootstrap",
location: "dbootstrap"
},
{
name: "dgrid",
location: "dgrid"
},
{
name: "dstore",
location: "dstore"
},
{
name: "dijit",
location: "dijit"
},
{
name: "dojo",
location: "dojo"
},
{
name: "dojox",
location: "dojox"
},
{
name: "ourapp",
location: "ourapp"
},
{
name: "lib",
location: "lib"
},
{
name: "xstyle",
location: "xstyle"
},
{
name: "specs",
location: "specs"
}
],
layers: {
"dojo/dojo": {
include: [
"dojo/dojo",
"dojo/i18n",
"dojo/domReady",
"ourapp/boot",
// more includes
...
],
customBase: true,
boot: true,
},
// other layers
...
},
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: 1,
stripConsole: "warn",
selectorEngine: "lite",
insertAbsMids: false,
staticHasFeatures: {
"config-deferredInstrumentation": 0,
// More settings
..
},
defaultConfig: {
hasCache: {
"dojo-built": 1,
"dojo-loader": 1,
"dom": 1,
"host-browser": 1,
"config-selectorEngine": "lite"
},
async: 1
}
};
})();
Ideally we'd like both files to share one common set of settings and just specify the parts that differ in our 2 application profiles.
Update:
This page talks about multiple profile sources so I'm going to try splitting out the common parts to another profile file then when building running something like:
>build.bat --profile ourapp.shared.profile.js --profile ourapp.profile.js
or
>build.bat --profile ourapp.shared.profile.js --profile ourapp.custom.profile.js
Has anyone tried something similar?
The approach suggested in the Update to the question does work, but isn't very well documented about how different profile properties are combined or replaced so required some trial and error as certain properties are treated differently.
What we have now is the profile shown in the question (ourapp.profile.js), and ourapp.custom.profile.js as follows:
var profile = (function () {
'use strict';
return {
basePath: "../",
releaseName: "js-custom",
packages: [
{
name: "ourapp",
location: "ourapp-custom"
}}
]
};
})();
Now for our custom build we run this from the command line:
build.bat --profile ourapp.profile.js --profile ourapp.custom.profile.js
The properties in ourapp.custom.profile.js replace those in ourapp.profile.js changing the release name to 'js-custom' and replace the standard ourapp package with an alternative one in ourapp-custom.