grunt serve hangs on live:reload task - gruntjs

I am working on a webapp built by someone else...the commands to build and run are
npm install
bower install
grunt serve
I have used npm and bower with no problems before..everything seems to work until grunt reaches the 'connect:livereload" task, when the command line just hangs, with no error messages.
Below is the package.json file and the output from grunt serve -v:
(package.json)
{
"name": "app",
"version": "0.0.1",
"dependencies": {
"openlayers": "^3.14.2"
},
"devDependencies": {
"connect-livereload": "^0.5.3",
"grunt": "^0.4.5",
"grunt-bower-requirejs": "^2.0.0",
"grunt-browserify": "^4.0.1",
"grunt-connect-proxy": "^0.2.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-connect": "^0.10.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-handlebars": "^0.10.2",
"grunt-contrib-imagemin": "^0.9.4",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-less": "^1.2.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-jsbeautifier": "^0.2.10",
"grunt-jscs": "^1.8.0",
"grunt-jsdoc": "^0.6.7",
"grunt-karma": "^0.11.0",
"grunt-open": "^0.2.3",
"grunt-processhtml": "^0.3.8",
"grunt-requirejs": "^0.4.2",
"grunt-usemin": "^3.0.0",
"jit-grunt": "^0.9.1",
"jscs": "^1.13.1",
"jscs-stylish": "^0.3.1",
"jsdoc": "^3.3.2",
"jshint-stylish": "^2.0.0",
"karma": "^0.13.0",
"karma-chai": "^0.1.0",
"karma-chai-sinon": "^0.1.5",
"karma-chrome-launcher": "^0.1.12",
"karma-coverage": "^0.4.2",
"karma-firefox-launcher": "^0.1.6",
"karma-ie-launcher": "^0.2.0",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.0",
"karma-requirejs": "^0.2.2",
"mocha-xunit-zh": "0.0.3",
"phantomjs": "^1.9.17",
"requirejs": "^2.1.18",
"time-grunt": "^1.2.1"
},
"engines": {
"node": ">=0.12.0"
}
}
(verbose) output (starting at live:reload)
Running "connect:livereload" (connect) task
Verifying property connect.livereload exists in config...OK
File: [no files]
Options: protocol="http", port=9001, hostname="0.0.0.0", base=".", directory=nul
l, keepalive=false, debug=false, livereload=false, open=false, useAvailablePort=
false, onCreateServer=null, middleware=undefined
Here is the (non-verbose) output after running 'grunt serve':
$ grunt serve
Running "serve" task
Running "clean:server" (clean) task
>> 1 path cleaned.
Running "jshint:all" (jshint) task
√ No problems
Running "jscs:src" (jscs) task
No code style errors found.
>> 21 files without code style errors.
Running "createDefaultTemplate" task
Running "handlebars:compile" (handlebars) task
>> 1 file created.
Running "clean:dist" (clean) task
>> 1 path cleaned.
Running "createDefaultTemplate" task
Running "handlebars:compile" (handlebars) task
>> 1 file created.
Running "less:dist" (less) task
>> 1 stylesheet created.
Running "copy:env" (copy) task
Copied 1 file
Running "copy:ol" (copy) task
Copied 2 files
Running "configureProxies" task
Proxy created for: /api to 52.20.39.250:80
Running "connect:livereload" (connect) task
Here is gets stuck (at ' Running "connect:livereload" (connect) task')... no cursor or errors or any further output....
Here I would expect to see "Started connect web server on http://localhost:9001" and be able to view the app, but instead it hangs here, with no further output or errors until I force quit. Nothing is served to that port (I tried switching port numbers as a test in the grunt-task/config/connect file of the app, but no change)
Here is the Gruntfile:
'use strict';
module.exports = function (grunt) {
// show elapsed time at the end
require('time-grunt')(grunt);
// load all grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin',
configureProxies: 'grunt-connect-proxy'
});
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
grunt.initConfig({yeoman: yeomanConfig});
//load all custom task configs
grunt.loadTasks('grunt-tasks/config');
grunt.loadTasks('grunt-tasks/register');
grunt.registerTask('default', [
'jshint',
'jscs',
//'test',
'build'
]);
};
Here is the 'connect' file, in grunt-tasks/config:
module.exports = function(grunt) {
var SERVER_PORT = 9001;
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({
port: LIVERELOAD_PORT
});
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
grunt.config('connect', {
options: {
port: grunt.option('port') || SERVER_PORT,
hostname: '0.0.0.0'
},
proxies: [{
context: ['/api'],
host: 'HOST IP',
port: 80
}],
livereload: {
options: {
middleware: function (connect) {
return [
proxySnippet,
lrSnippet,
mountFolder(connect, '.tmp'),
connect().use(
'/node_modules',
connect.static('./node_modules')
),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
test: {
options: {
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
testInBrowser: {
options: {
middleware: function (connect) {
return [
proxySnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
dist: {
options: {
middleware: function (connect) {
return [
proxySnippet,
connect().use(
'/node_modules',
connect.static('./node_modules')
),
mountFolder(connect, yeomanConfig.dist)
];
}
}
}
});
}
One thing I noticed: when in the webapp for
lder of this project, my npm version is 2.14.20, but in my user folder, the npm version is 3.8.3 (in both directories, my version of Node is the same, 4.4.1) .. could this be a source of this problem? I just ran npm install npm -g in the webapp directory, but it did not change the version when viewed from that directory.

Related

Docker build image - glob error { Error: EPERM: operation not permitted, scandir

I'm attempting to build a Docker image of a React+TypeScript+NodeJS application built with Webpack 2.0, but I get the following error
> frontend#0.0.1 build /
> webpack -p --config configs/webpack.config.ts --env.build --env.sourceMap
{ isDev: false }
glob error { Error: EPERM: operation not permitted, scandir '/proc/1/map_files/55836c87b000-55836c897000'
errno: -1,
code: 'EPERM',
syscall: 'scandir',
path: '/proc/1/map_files/55836c87b000-55836c897000' }
Error: EPERM: operation not permitted, scandir '/proc/1/map_files/55836c87b000-55836c897000'
after running the following command
docker build -t frontend .
My package.json looks like this
"scripts": {
"clean": "rimraf build",
"build": "webpack -p --config configs/webpack.config.ts --env.build --env.sourceMap",
"dev": "webpack-dev-server --config configs/webpack.config.ts",
"dev:open": "webpack-dev-server --config configs/webpack.config.ts --open",
"lint": "tslint --project tsconfig.json && echo \"running stylelint\" &&./node_modules/stylelint/bin/stylelint.js \"src/**/*.scss\"",
"tsc": "tsc -p .",
"tsc:watch": "tsc -p . --noEmit -w",
"test": "jest --config jest.json",
"reinstall": "rm -rf node_modules && npm install",
"precommit": "npm run lint",
"prepush": "npm run lint & npm run tsc & npm run test",
"organize": "npm prune && npm dedupe && npm shrinkwrap --dev",
"deploy": "npm run build && npm run serve",
"serve": "NODE_ENV=production node server.ts"
},
"optionalDependencies": {
"fsevents": "*"
},
"dependencies": {
"#types/node": "^8.0.51",
"#types/prop-types": "^15.5.2",
"#types/react": "^16.0.22",
"#types/react-dom": "^16.0.3",
"#types/react-hot-loader": "^3.0.5",
"#types/react-redux": "^5.0.12",
"#types/react-router-dom": "^4.2.1",
"#types/react-router-redux": "^5.0.10",
"#types/redux": "^3.6.31",
"#types/webpack": "^3.8.1",
"#types/webpack-dev-server": "^2.9.2",
"#types/webpack-env": "^1.13.2",
"awesome-typescript-loader": "^3.3.0",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"history": "^4.7.2",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.4.2",
"morgan": "^1.9.0",
"node-sass": "^4.6.1",
"react": "^16.1.0",
"react-dom": "^16.1.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-webpack-plugin": "^0.9.0",
"ts-loader": "^3.1.1",
"ts-node": "^3.3.0",
"tslib": "^1.8.0",
"tslint": "^5.8.0",
"tslint-react": "^3.2.0",
"typescript": "^2.6.1",
"webpack": "^3.8.1"
},
"devDependencies": {
"#types/chai": "^4.0.4",
"#types/chai-as-promised": "7.1.0",
"#types/enzyme": "^3.1.4",
"#types/jest": "^21.1.6",
"babel-jest": "^21.2.0",
"webpack-dev-server": "^2.9.4",
"enzyme": "^3.1.1",
"husky": "^0.14.3",
"jest": "^21.2.1",
"jest-cli": "^21.2.1",
"react-test-renderer": "^16.1.0",
"ts-jest": "^21.2.1"
}
and my webpack.config.ts looks like this
const filePath = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const StyleLintPlugin = require('stylelint-webpack-plugin');
const PATHS = {
root: filePath.resolve(__dirname, '..'),
nodeModules: filePath.resolve(__dirname, '../node_modules'),
src: filePath.resolve(__dirname, '../src'),
build: filePath.resolve(__dirname, '../build'),
style: filePath.resolve(__dirname, '../src/style'),
images: filePath.resolve(__dirname, '../src/images')
};
const DEV_SERVER = {
historyApiFallback: true,
overlay: true,
stats: {
providedExports: false,
chunks: false,
hash: false,
version: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: true,
warnings: false,
publicPath: false
}
};
interface env {
build?: string;
sourceMap?: string;
awesome?: string;
}
module.exports = (env: env = {}) => {
const isBuild = !!env.build;
const isDev = !env.build;
const isSourceMap = !!env.sourceMap || isDev;
console.log({ isDev });
return {
cache: true,
devtool: isDev ? 'eval-source-map' : 'source-map',
devServer: DEV_SERVER,
context: PATHS.root,
entry: {
app: [
'./src/index.tsx',
],
},
output: {
path: PATHS.build,
filename: isDev ? '[name].js' : '[name].[hash].js',
publicPath: '/',
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
modules: ['src', 'node_modules'],
},
module: {
rules: [
{
test: /\.tsx?$/,
include: PATHS.src,
loader: (env.awesome ?
[
{
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true,
useTranspileModule: false,
sourceMap: isSourceMap,
},
},
] : [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
compilerOptions: {
'sourceMap': isSourceMap,
'target': isDev ? 'es2015' : 'es5',
'isolatedModules': true,
'noEmitOnError': false,
},
},
},
]
),
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.json$/,
include: [PATHS.src],
loader: { loader: 'json-loader' },
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader'
})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!sass-loader",
}),
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
loaders: [
'file-loader?hash=sha512&limit=1000&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false'
]
}
],
},
plugins: [
StyleLintPlugin(),
new ExtractTextPlugin('style.css'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDev ? 'development' : 'production'),
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: (module: any) => module.context && module.context.indexOf('node_modules') !== -1,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
}),
...(isDev ? [
new webpack.NamedModulesPlugin(),
] : []),
...(isBuild ? [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
beautify: false,
compress: {
screw_ie8: true,
warnings: false
},
comments: false,
sourceMap: isSourceMap,
}),
new HtmlWebpackPlugin({
template: './index.html',
}),
] : []),
],
stats: {
providedExports: false,
chunks: false,
hash: false,
version: false,
timings: false,
modules: false,
reasons: true,
children: false,
source: false,
warnings: true,
publicPath: false
},
performance: {
hints: "warning"
}
};
};
and my Dockerfile looks like this
FROM node:latest
COPY package.json package.json
COPY npm-shrinkwrap.json npm-shrinkwrap.json
RUN npm install --production
COPY . .
EXPOSE 8080
RUN npm run deploy
and finally I have a .dockerignore
Dockerfile
.dockerignore
.gitignore
README.md
build
node_modules
As far as I can tell this is a permissions issue. Is there something I can do to change permissions? I'm not even sure what process fails.
The map_files directory is a representation of the files a process currently has memory mapped by the kernel. This info is also contained in the maps file in the same directory.
As these files are a representation of memory, they change frequently. If a process creates a directory listing and then processes the list, the files might not exist by the time the process gets to them.
If the build is reporting files in /proc, a search has likely started from the / directory in the container and is recursively searching everything on the filesystem.
Use a directory other than / as the WORKDIR in your Dockerfile
FROM node:latest
WORKDIR /app
COPY package.json /app/package.json
COPY npm-shrinkwrap.json /app/npm-shrinkwrap.json
RUN npm install --production
COPY . /app/
EXPOSE 8080
RUN npm run deploy
This can also get this exact error if you accidentally hit Deny when OSX asks if you want to allow Docker to update files on your computer. For some reason, factory resetting docker and uninstalling/re-installing does not cause the prompt for these permissions to appear again.
I was able to fix the error by following these steps to grant Docker permissions to Documents where my code was stored.

Angular 5/ASP.NET - “No ResourceLoader implementation has been provided. Can't read the URL”

I'm trying to build a new Angular5/ASP.NET SPA on Visual Studio 2017. Therefore i created a .NET Core->ASP.NET Core-Web Application with Angular, which results in a project containing an Angular4 sample application.
Running this application is no problem at all, the problems start when i try to go on Angular 5 (5.0.1 or 5.0.0, does not matter) with this application.
After doing all necessary steps, the app runs fine in Debug mode. But trying to build and start it in Release (or deploy it to azure) leads to the following error:
An unhandled exception occurred while processing the request.
NodeInvocationException: No ResourceLoader implementation has been provided. Can't read the url "app.component.html"
Error: No ResourceLoader implementation has been provided. Can't read the url "app.component.html"
at Object.get (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:98069:15)
at DirectiveNormalizer.module.exports.DirectiveNormalizer._fetch (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:44087:43)
at DirectiveNormalizer.module.exports.DirectiveNormalizer._preParseTemplate (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:44142:29)
at DirectiveNormalizer.module.exports.DirectiveNormalizer.normalizeTemplate (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:44122:36)
at CompileMetadataResolver.module.exports.CompileMetadataResolver.loadDirectiveMetadata (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:55794:75)
at E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:74510:72
at Array.forEach (native)
at E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:74509:72
at Array.forEach (native)
at JitCompiler.module.exports.JitCompiler._loadModules (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:74506:75)
Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext()
What i do for moving to Angular5 is:
Change Versions in package.json for all Angular-Modules to 5.0.1, also go to newer version for typescript, rxjs, angular/cli and #ngtools/webpack (1.5.0 -> 1.8.0)
So my new package.json looks like this:
{
"name": "myAngularApp",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"#angular/animations": "^5.0.1",
"#angular/common": "^5.0.1",
"#angular/compiler": "^5.0.1",
"#angular/core": "^5.0.1",
"#angular/forms": "^5.0.1",
"#angular/http": "^5.0.1",
"#angular/platform-browser": "^5.0.1",
"#angular/platform-browser-dynamic": "^5.0.1",
"#angular/platform-server": "^5.0.1",
"#angular/router": "^5.0.1",
"#types/webpack-env": "^1.13.0",
"angular2-template-loader": "^0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "^3.2.1",
"bootstrap": "^3.3.7",
"css": "^2.2.1",
"css-loader": "^0.28.7",
"es6-shim": "^0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.2.1",
"json-loader": "^0.5.4",
"preboot": "^5.1.7",
"raw-loader": "^0.5.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.5.2",
"style-loader": "^0.19.0",
"to-string-loader": "^1.1.5",
"typescript": "^2.6.1",
"zone.js": "^0.8.18"
},
"devDependencies": {
"#angular/cli": "1.5.0",
"#angular/compiler-cli": "^5.0.1",
"#ngtools/webpack": "1.8.0",
"#types/chai": "4.0.1",
"#types/jasmine": "2.6.3",
"chai": "4.0.2",
"jasmine-core": "2.6.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-hot-middleware": "2.20.0",
"webpack-merge": "4.1.1"
}
}
Then i change AotPlugin in webpack.config.js to AngularCompilerPlugin
This is my webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('#ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },// '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
When i now start the application (performing npm install, then run webpack with --env.prod switch) with Release-config out of VS2017 i get the stacktrace above. The same thing happens when i deploy the application to Azure.
On localhost if i wait a few seconds and force-reload my browser, the application suddenly works. This does not work on Azure, which is kinda strange to me.
Do you have any suggestions what i might have done wrong or what i am missing?
I had the same issues for few days, I found a VS2017 - Angular 5 project in GitHub (don't have the exact URL), from which I have copied the webpack.config.js
I have also updated my Angular to 5.0.3
I than ran the 'dotnet publish' which worked (or 'dotnet publish -c Release')
The only problem I faced (and still facing) is during the complication, the compiler messes up the main-server.js, so as a workaround I have copied the main-server.js before the complication (10MB vs 2MB).
When running 'dotnet mydll.dll' - works great.
The webpack.config.js:
/*
* Webpack (JavaScriptServices) with a few changes & updates
* - This is to keep us inline with JSServices, and help those using that template to add things from this one
*
* Things updated or changed:
* module -> rules []
* .ts$ test : Added 'angular2-router-loader' for lazy-loading in development
* added ...sharedModuleRules (for scss & font-awesome loaders)
*/
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('#ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: ['.js', '.ts'] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// new BundleAnalyzerPlugin(),
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
exclude: ['./**/*.server.ts']
})
]),
devtool: isDevBuild ? 'cheap-eval-source-map' : false,
node: {
fs: "empty"
}
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
// resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
}),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({
compress: false,
mangle: false
}),
// Plugins that apply in production builds only
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
// switch to "inline-source-map" if you want to debug the TS during SSR
devtool: isDevBuild ? 'cheap-eval-source-map' : false
});
return [clientBundleConfig, serverBundleConfig];
};
EDIT -
In addition to the changes on the webpack.config.js, I did the following two changes which solved my problem!:
In index.cshtml:
change from
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
to:
<app>Loading...</app>
In boot.server.ts:
change from:
const zone = moduleRef.injector.get(NgZone);
to:
const zone: NgZone = moduleRef.injector.get(NgZone);
Read http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/ for more info.

grunt watch is not replacing sass file.please suggest me what i am doing wrong here

I am trying to watch sass changes but I am not be able to see any changes on main.css whenever I update on sass files.Can some please suggest me what I am doing wrong here I am new to grunt js .
{
"name": "test-scss",
"version": "0.1.0",
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-watch": "^1.0.0"
},
"scripts": {
"build-css": "node-sass --include-path scss sass/style.scss css/main.css"
}
}
/// here is my gruntjs file configuration
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
livereload: true
},
sass: {
files: ['**/*.scss'],
task: ['sass']
},
html: {
files: ['*.html']
}
},
sass: {
dist: {
files: {
'css/main.css': 'sass/style.scss'
}
}
},
connect: {
sever: {
options: {
keepalive: true,
hostname: 'localhost',
port: 3003,
base: '.',
open: true,
watch: true,
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['sass', 'watch', 'connect']);
};
Grunt watch is a blocking task so grunt connect is never reached.
grunt-contrib-connect blocks only if keepalive: true is set otherwise it runs as long as grunt is running. As grunt watch runs indefinitely you do not need to force grunt-contrib-connect to "keepalive"
To fix.
keepalive: false //turn off keepalive
Move watch blocking task to execute last
grunt.registerTask('default', ['sass','connect','watch']);
If you absolutely need to run two blocking tasks together you can use a plugin like grunt-concurrent
https://stackoverflow.com/a/42319772/3656963
Or call each task separately using 2 command lines.
Also fix typo: task: ['sass'] to tasks: ['sass']

How do I use grunt-run to run a npm script?

How do I run my 'test' npm script using Grunt? It says here that I can do it using grunt-run.
package.json
.
.
"scripts": {
"test": "jest"
},
"jest": {
"preset": "jest-exponent"
}
.
.
.
"devDependencies": {
"babel-jest": "^17.0.0",
"babel-preset-react-native": "^1.9.0",
"grunt": "^1.0.1",
"grunt-run": "^0.6.0",
"jest-exponent": "^0.1.3",
"jest-react-native": "^17.0.0",
"react-test-renderer": "^15.3.2"
}
Gulpfile.js - boilerplate code
module.exports = function(grunt) {
grunt.initConfig({
run: {
options: {
// Task-specific options go here.
},
your_target: {
cmd: 'executable',
args: [
'arg1',
'arg2'
]
}
}
})
}
What is the point of Grunt/Gulp if you can just use npm scripts? They require a lot less set up and do the same thing.
not sure if that will helps you, you need install first the task grunt-exec, in my sample i am runing a node server.js
this in my config.
Gruntfile.js
config.exec = {
run_server: 'node server.js'
}
grunt.registerTask('serve', ['exec:run_server']);
package.json
"grunt-exec": "^1.0.1",

Gruntfile.js watch

So I'm making my own Wordpress Framework, and am utilizing grunt and sass. I'm newer at grunt and sass, but experienced enough with grunt to kind of know what I'm doing, but I've used LESS in the past and not Sass.
I'm taking the Gruntfile.js file from roots.io as a starting point. Everything I have is correct as far as I know, but I'm not too sure about a couple of things. I removed the js stuff because I'm not going to be watching for it, and I added grunt-contrib-sass.
When running grunt watch I get this error:
grunt watch
/Gruntfile.js:22
watch: {
^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
Below is my Gruntfile.js and my package.json
Gruntfile.JS
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
version: {
options: {
file: 'lib/scripts.php',
css: 'assets/css/main.min.css',
cssHandle: 'su_styles'
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/main.min.css': [
'assets/scss/app.scss'
]
}
}
},
watch: {
sass: {
files: [
'assets/scss/*.scss',
'assets/scss/foundation/*.scss'
],
tasks: ['sass', 'version']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: false
},
files: [
'assets/css/main.min.css',
'templates/*.php',
'*.php'
]
}
},
clean: {
dist: [
'assets/css/main.min.css'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-wp-version');
grunt.loadNpmTasks('grunt-contrib-sass');
// Register tasks
grunt.registerTask('default', [
'clean',
'version',
'sass'
]);
grunt.registerTask('dev', [
'watch'
]);
};
package.json - with some stuff taken out to preserve a bit of privacy
{
"name": "sudoh",
"version": "1.0.0",
"author": "Brandon Shutter <brandon#brandonshutter.com>",
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-wp-version": "~0.1.0",
"grunt-contrib-sass": "~0.5.0"
}
}
Thanks for your help ahead of time.
It seems there wasn't anything wrong with my setup. My code editor (Brackets) added hidden characters for whatever reason and was causing a syntax error. Switching over to Sublime and saving the file again allowed it work perfectly.
Thanks for the help everyone.

Resources