Angular universal - warning while running node.js - node.js

I have angular 7 site - which I have converted into server side rendering (referring mainly https://blog.angular-university.io/angular-universal/).
I am running site on AWS using 'foreever'. I aways see below error inside my foreever error log file:
(node:23488) [DEP0005] DeprecationWarning: Buffer() is deprecated due to
security and usability issues. Please use the Buffer.alloc(),
Buffer.allocUnsafe(), or Buffer.from() methods instead.
I have not used any kind of buffer in my code, so my guess is it might be coming from node modules I am using. From above log message I am unable to detect which module is having problem.
My current package.json looks like below:
"dependencies": {
"#angular/animations": "^7.0.0",
"#angular/common": "^7.0.0",
"#angular/compiler": "^7.0.0",
"#angular/core": "^7.0.0",
"#angular/forms": "^7.0.0",
"#angular/http": "^7.0.0",
"#angular/platform-browser": "^7.0.0",
"#angular/platform-browser-dynamic": "^7.0.0",
"#angular/platform-server": "^7.0.0",
"#angular/router": "^7.0.0",
"#nguniversal/express-engine": "^7.0.2",
"#nguniversal/module-map-ngfactory-loader": "^7.0.2",
"bootstrap": "^3.4.0",
"chart.js": "^2.7.3",
"core-js": "^2.6.1",
"express": "^4.16.2",
"font-awesome": "^4.7.0",
"fullcalendar": "^3.9.0",
"he": "^1.2.0",
"jquery": "^3.3.1",
"jw-angular-social-buttons": "^1.0.0",
"moment": "^2.23.0",
"ng2-validation": "^4.2.0",
"primeicons": "^1.0.0",
"primeng": "^6.1.7",
"prismjs": "^1.15.0",
"rxjs": "~6.3.3",
"ts-loader": "^5.3.2",
"webpack": "^4.28.3",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14",
"zone.js": "~0.8.26"
}
Is there any way to get more logs ? Can I neglect this error message for now?
Thanks in advance.
EDIT-
My package.json has following:
"build-both": "ng build --prod --output-path=dist/browser && ng run
ecokrypt-uiapp:server --configuration=publiclocal
--output-path=dist/server",
"webpack-server": "webpack --config webpack.server.config.js
--ouput dist/server.js --progress --colors",
"build-and-pack": "npm run build-both && npm run webpack-server",
When I build the application (npm run build-and-pack): I see following in my console: I see 2 warnings related to some System.Import()
> ecokrypt-uiapp#0.0.0 build-and-pack
/Users/manisha/projects/ecokrypt/repos/ecokrypt-uiapp
> npm run build-both && npm run webpack-server
> ecokrypt-uiapp#0.0.0 build-both
/Users/manisha/projects/ecokrypt/repos/ecokrypt-uiapp
> ng build --prod --output-path=dist/browser && ng run ecokrypt-uiapp:server
--configuration=publiclocal --output-path=dist/server
Date: 2019-01-22T06:03:27.567Z
Hash: 6cdc328f7a5e6deddab8
Time: 74400ms
chunk {scripts} scripts.121b013aaa5e9461a940.js (scripts) 632 kB [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry]
[rendered]
chunk {1} main.1c45daaf038705b9a051.js (main) 2.27 MB [initial] [rendered]
chunk {2} polyfills.8b3031f6891125c33792.js (polyfills) 58.2 kB [initial]
[rendered]
chunk {3} styles.64324cbe6f1a4899818f.css (styles) 325 kB [initial]
[rendered]
Date: 2019-01-22T06:03:52.985Z
Hash: 103ec2f268f0c9fbf2a1
Time: 22538ms
chunk {main} main.js, main.js.map (main) 2.75 MB [entry] [rendered]
> ecokrypt-uiapp#0.0.0 webpack-server
/Users/manisha/projects/ecokrypt/repos/ecokrypt-uiapp
> webpack --config webpack.server.config.js --ouput dist/server.js --progress
--colors
Hash: 8961a2409cb304bef9ec
Version: webpack 4.28.3
Time: 11323ms
Built at: 2019-01-22 11:34:05
Asset Size Chunks Chunk Names
server.js 9.82 MiB server [emitted] server
Entrypoint server = server.js
[./dist/server/main.js] 2.75 MiB {server} [built]
[./server.ts] 1.93 KiB {server} [built]
[./src lazy recursive] ./src lazy namespace object 160 bytes {server} [built]
[./src sync recursive] ./src sync 160 bytes {server} [built]
[buffer] external "buffer" 42 bytes {server} [built]
[crypto] external "crypto" 42 bytes {server} [built]
[events] external "events" 42 bytes {server} [built]
[fs] external "fs" 42 bytes {server} [built]
[http] external "http" 42 bytes {server} [built]
[https] external "https" 42 bytes {server} [built]
[net] external "net" 42 bytes {server} [built]
[os] external "os" 42 bytes {server} [built]
[path] external "path" 42 bytes {server} [built]
[timers] external "timers" 42 bytes {server} [optional] [built]
[url] external "url" 42 bytes {server} [built]
+ 587 hidden modules
WARNING in ./node_modules/#angular/core/fesm5/core.js 17170:15-36
System.import() is deprecated and will be removed soon. Use import()
instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# ./server.ts 6:13-37
WARNING in ./node_modules/#angular/core/fesm5/core.js 17182:15-102
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# ./server.ts 6:13-37

Late answer but better late then never...
It's an old package xhr2 used by webpack-cli, there is an open issue on github.
To solve the issue follow the suggestion on that tread: npm i xhr2 --save

Related

Webpack build failing

Im trying to learn mongodb and trying to start the server.
I have come a long way, and understand mutch more now, but this strange error i don´t now.
When i run npm run build i get some error i can figure it out.
> xxxx#1.0.0 build
> webpack -p
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\wamp\www\xxxx\node_modules\webpack\lib\util\createHash.js:135:53)
at ConcatenatedModule._createIdentifier (C:\wamp\www\xxxx\node_modules\webpack\lib\optimize\ConcatenatedModule.js:563:16)
at new ConcatenatedModule (C:\wamp\www\xxxx\node_modules\webpack\lib\optimize\ConcatenatedModule.js:445:27)
at C:\wamp\www\xxxx\node_modules\webpack\lib\optimize\ModuleConcatenationPlugin.js:250:26
at SyncBailHook.eval [as call] (eval at create (C:\wamp\www\xxxx\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:16)
at SyncBailHook.lazyCompileHook (C:\wamp\www\xxxx\node_modules\tapable\lib\Hook.js:154:20)
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1351:37
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\wamp\www\xxxx\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\wamp\www\xxxx\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.seal (C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1342:27)
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compiler.js:675:18
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1261:4
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\wamp\www\xxxx\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (C:\wamp\www\xxxx\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.finish (C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1253:28)
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compiler.js:672:17
at eval (eval at create (C:\wamp\www\xxxx\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1185:12
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1097:9
at process.processTicksAndRejections (node:internal/process/task_queues:77:11) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.12.1
PS C:\wamp\www\xxxx> Webpack build failing
This is the webpack config file:
const path = require("path");
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "src", "app"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/",
hashFunction: "sha256",
},
resolve: {
extensions: [".js", ".jsx"],
},
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.jsx?/,
loader: "babel-loader",
},
],
},
};
this is my dependencies
"dependencies": {
"#babel/core": "^7.11.6",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/register": "^7.11.5",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"axios": "^0.20.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.2",
"cors": "^2.8.5",
"eslint-plugin-react": "^7.20.6",
"express": "^4.17.1",
"history": "^4.7.2",
"md5": "^2.3.0",
"mongodb": "^3.6.1",
"mongoose": "^5.10.5",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"uuid": "^8.3.0",
"webpack": "^4.44.1"
and when i run npm run dev i get this error:
> xxxx#1.0.0 dev
> webpack-dev-server --open
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from C:\wamp\www\xxxx
i 「wds」: 404s will fallback to /index.html
i 「wdm」: wait until bundle finished: /
[BABEL] Note: The code generator has deoptimised the styling of C:\wamp\www\xxxx\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the
max of 500KB.
× 「wdm」: Hash: 69df8570757be8d1fecc
Version: webpack 4.46.0
Time: 8620ms
Built at: 2023-01-11 00:08:31
Entrypoint main =
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app 40 bytes {main} [built]
[./node_modules/ansi-html-community/index.js] 4.25 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.32 KiB {main} [built]
[./node_modules/react/index.js] 189 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.25 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 960 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.55 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 401 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/app/components/Main.jsx] 3.54 KiB {main} [built]
[./src/app/index.jsx] 198 bytes {main} [built]
+ 436 hidden modules
ERROR in chunk main [entry]
bundle.js
multi C:\wamp\www\xxxx\node_modules\webpack-dev-server\client\index.js?http://localhost:8080 C:\wamp\www\xxxx\src\app
error:0308010C:digital envelope routines::unsupported
i 「wdm」: Failed to compile.
And i dont now what to do.
I think the problem comes from Node version 18. We have some ways to solve it. You may downgrade your Node version to 16. Upgrade your Webpack version. Or a simple method is add the environment NODE_OPTIONS=--openssl-legacy-provider for your run script.
export NODE_OPTIONS=--openssl-legacy-provider
npm run dev

Angular 8 web app failing to deploy to heroku

I feel like my Angular app is fully setup for deploying to Heroku, but for some reason it just hangs during the build process and never continues - eventually resulting in a Build Failed message, but no logs.
Here is an excerpt of the heroku logs --tail:
-----> Build
Detected both "build" and "heroku-postbuild" scripts
Running heroku-postbuild
> flux-admin#1.0.0 heroku-postbuild /tmp/build_d18bae1ef2310aacfb6851eddfeab6d1
> ng build --prod
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {0} runtime-es2015.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main-es2015.b5ce220634282bd1233e.js (main) 1010 kB [initial] [rendered]
chunk {1} main-es5.b5ce220634282bd1233e.js (main) 1.08 MB [initial] [rendered]
chunk {2} polyfills-es2015.2987770fde9daa1d8a2e.js (polyfills) 36.4 kB [initial] [rendered]
chunk {3} polyfills-es5.df1101cc1e7b588877f8.js (polyfills-es5) 122 kB [initial] [rendered]
chunk {4} styles.c1cdb3f05888558b2d70.css (styles) 60.6 kB [initial] [rendered]
Date: 2019-11-23T15:43:44.636Z - Hash: 80ca71603894ea5db348 - Time: 114953ms
That is where it just hangs.
Here is my package.json file:
"name": "flux-admin",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-prebuild": "",
"heroku-postbuild": "ng build --prod"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~7.3.3",
"#angular/cli": "~8.3.19",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/compiler-cli": "^8.2.14",
"#angular-devkit/build-angular": "~0.803.19",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/material": "^7.3.3",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"core-js": "^2.5.4",
"path": "^0.12.7",
"rxjs": "~6.5.3",
"express": "^4.17.1",
"rxjs-compat": "^6.4.0",
"tslib": "^1.9.0",
"typescript": "~3.5.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular/cli": "~8.3.19",
"#angular/compiler-cli": "^8.2.14",
"#angular/language-service": "~8.2.14",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
},
"engines": {
"node": "11.10.0",
"npm": "6.13.1"
}
My server.js file is the following:
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/flux-admin'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/flux-admin/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
Just in case I also added a Procfile:
web: node server.js
When I try and run ng build --prod --aot locally - it does complete successfully, so it just seems to not go onto the next step in the heroku deployment process (which I believe would be the start script).
Anything obvious wrong with my setup?
UPDATE
After multiple attempts to try and get this deployed - I ended up degrading back to Angular 7, and it deployed with no problem!
I believe the issue must stem with the new way the ng build --prod --aot is run in Angular 8, but I am not at all sure why or what the cause is. So for now, I will just continue using Angular 7 and post a bug report.

Error running Angular 5 SPA in Visual Studio 2017

When I try to run my SPA which is referencing Angular 5 with .net core 2, I receive the following error message;
An unhandled exception occurred while processing the request.
NodeInvocationException: StaticInjectorError(e)[s -> i]:
StaticInjectorError(Platform: core)[s -> i -> InjectionToken DocumentToken]:
Right-hand side of 'instanceof' is not an object
TypeError: StaticInjectorError(e)[s -> i]:
StaticInjectorError(Platform: core)[s -> i -> InjectionToken DocumentToken]:
Right-hand side of 'instanceof' is not an object
at bt (C:\....\ClientApp\dist\main-server.js:92:81462)
at vt (C:\....\ClientApp\dist\main-server.js:92:81337)
at nn (C:\....\ClientApp\dist\main-server.js:92:104108)
at nn (C:\....\ClientApp\dist\main-server.js:92:104227)
at rn (C:\....\ClientApp\dist\main-server.js:92:103904)
at Ce (C:\....\ClientApp\dist\main-server.js:92:77511)
at We.insertToken (C:\....\ClientApp\dist\main-server.js:92:80723)
at C:\....\ClientApp\dist\main-server.js:92:84001
at Rt (C:\....\ClientApp\dist\main-server.js:92:84016)
at Qe (C:\....\ClientApp\dist\main-server.js:92:78997)
Can anyone point out what this means,a sI have tried looking on the internet for a solution with no success.
My packages.json file is as follows;
{
"name": "Services.Public",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"bootstrap": "4.0.0",
"core-js": "^2.5.3",
"jquery": "3.2.1",
"popper.js": "1.14.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.20"
},
"devDependencies": {
"#angular/cli": "^1.6.3",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#angular/platform-server": "^5.0.0",
"#angular-devkit/core": "^0.4.6",
"#ngtools/webpack": "^1.10.2",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"#types/webpack-env": "1.13.5",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.3",
"awesome-typescript-loader": "4.0.1",
"codelyzer": "^4.0.1",
"extract-text-webpack-plugin": "v4.0.0-alpha.0",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"html-loader": "0.4.5",
"html-webpack-plugin": "^3.0.7",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"to-string-loader": "1.1.5",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "^2.7.2",
"webpack": "^4.2.0",
"webpack-addons": "^1.1.5",
"webpack-cli": "^2.0.12",
"webpack-hot-middleware": "2.21.2",
"webpack-merge": "4.1.2"
}
}
The output I get from running webpack --config ./webpack.config.vendor.js is;
Hash: b39fc415a48442d6bfc65aba8dd7f82786abce7b
Version: webpack 4.2.0
Child
Hash: b39fc415a48442d6bfc6
Time: 15305ms
Built at: 2018-3-22 14:08:33
Asset Size Chunks Chunk Names
vendor.js 1.12 MiB 0 [emitted] [big] vendor
vendor.css 174 KiB 0 [emitted] vendor
Entrypoint vendor [big] = vendor.js vendor.css
WARNING in ./node_modules/#angular/core/esm5/core.js
6558:15-36 Critical dependency: the request of a dependency is an expression
# ./node_modules/#angular/core/esm5/core.js
# dll vendor
WARNING in ./node_modules/#angular/core/esm5/core.js
6578:15-102 Critical dependency: the request of a dependency is an expression
# ./node_modules/#angular/core/esm5/core.js
# dll vendor
WARNING in ./node_modules/#angular/core/esm5/core.js
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# dll vendor 6558:15-36
WARNING in ./node_modules/#angular/core/esm5/core.js
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# dll vendor 6578:15-102
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
vendor.js (1.12 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
vendor (1.29 MiB)
vendor.js
vendor.css
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/bootstrap/dist/css/bootstrap.css:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
Child
Hash: 5aba8dd7f82786abce7b
Time: 20483ms
Built at: 2018-3-22 14:08:38
Asset Size Chunks Chunk Names
vendor.js 1.27 MiB 0 [emitted] vendor
Entrypoint vendor = vendor.js
WARNING in ./node_modules/#angular/core/bundles/core.umd.js
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# dll vendor 6596:15-36
WARNING in ./node_modules/#angular/core/bundles/core.umd.js
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# dll vendor 6616:15-102
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
So only warnings, and the output of running the `webpack` command is;
webpack : (node:7008) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
At line:1 char:1
+ webpack
+ ~~~~~~~
+ CategoryInfo : NotSpecified: ((node:7008) Dep....hooks` instead:String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError
Hash: 58a796a24931610be875f5c7580494b98900c7b1
Version: webpack 4.2.0
Child
Hash: 58a796a24931610be875
Time: 8565ms
Built at: 2018-3-22 14:10:02
Asset Size Chunks Chunk Names
main-client.js 28 KiB 0 [emitted] main-client
main-client.js.map 99.8 KiB 0 [emitted] main-client
Entrypoint main-client = main-client.js main-client.js.map
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
Child
Hash: f5c7580494b98900c7b1
Time: 8333ms
Built at: 2018-3-22 14:10:02
Asset Size Chunks Chunk Names
main-server.js 2.73 MiB 0 [emitted] main-server
Entrypoint main-server = main-server.js
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
I have tried cleaning the cache and reinstalling all modules with no success.
Thank you in advance, and any help is appreciated.
Are you using UseWebpackDevMiddleware() in your Setup.cs file?
I ran into this issue just recently, and it appears to be related to using that configuration. Try commenting it out and see what happens.
UseWebpackDevMiddleware() runs on aspnet-webpack which has not been updated to be compatible with Webpack 4. You'll want to hold off on using it until it gets updated.

Webpack returns error in CI - TS2688: Cannot find type definition file for 'reflect-metadata'

I have a simple nodejs dictionary application that use webpack for client side module management and concatination of scripts. Everything works fine in my local machine. Now I am doing some experiments with CI in Azure. During this experiments with Azure's continous delivery options using CI from visualstudio.com, I have encounter the following error when executing webpack task (I am using the webpack task from the marketplace). Can anyone help me out?
The webpack build task specific log file says:
2017-07-31T13:44:16.2307812Z ##[section]Starting: webpack
2017-07-31T13:44:16.2307812Z ==============================================================================
2017-07-31T13:44:16.2307812Z Task : webpack
2017-07-31T13:44:16.2307812Z Description : bundle your assets, scripts, images, styles
2017-07-31T13:44:16.2307812Z Version : 3.0.19
2017-07-31T13:44:16.2307812Z Author : Dealogic
2017-07-31T13:44:16.2307812Z Help : [More information](https://marketplace.visualstudio.com/items?itemName=Dealogic.webpack-vsts-extension) [webpack](https://webpack.github.io/)
2017-07-31T13:44:16.2307812Z ==============================================================================
2017-07-31T13:44:16.4428024Z webpack
2017-07-31T13:44:16.4447837Z webpackConfigLocation: ./webpack.browser.config.js
2017-07-31T13:44:16.4447837Z treatErrorsAs: warnings
2017-07-31T13:44:16.4447837Z treatWarningsAs: warnings
2017-07-31T13:44:16.4447837Z workingFolder: d:\a\1\s
2017-07-31T13:44:16.4447837Z webpackModuleLocation: null
2017-07-31T13:44:16.4457843Z webpack module resolution started
2017-07-31T13:44:16.7987854Z webpack module resolution finished
2017-07-31T13:44:16.7987854Z webpack config resolution started
2017-07-31T13:44:16.7997851Z webpack config resolution finished
2017-07-31T13:44:16.7997851Z compilation of the webpack project is started
2017-07-31T13:44:17.3707894Z
2017-07-31T13:44:17.3707894Z [at-loader] Using typescript#2.4.2 from typescript and "tsconfig.json" from d:\a\1\s\client\tsconfig.json.
2017-07-31T13:44:17.3707894Z
2017-07-31T13:44:19.1378300Z
2017-07-31T13:44:19.1378300Z [at-loader] Checking started in a separate process...
2017-07-31T13:44:19.5368391Z
2017-07-31T13:44:19.5368391Z [at-loader] Checking finished with 1 errors
2017-07-31T13:44:19.5428397Z compilation of the webpack project is done
2017-07-31T13:44:19.5498387Z Hash: 1f80fddb56bf16ebb0f6
2017-07-31T13:44:19.5498387Z Version: webpack 3.4.1
2017-07-31T13:44:19.5498387Z Time: 2631ms
2017-07-31T13:44:19.5498387Z Asset Size Chunks Chunk Names
2017-07-31T13:44:19.5498387Z app-bundle.js 146 kB 0 [emitted] main
2017-07-31T13:44:19.5498387Z app-bundle.js.map 179 kB 0 [emitted] main
2017-07-31T13:44:19.5498387Z [4] ./node_modules/inversify/lib/annotation/decorator_utils.js 2.56 kB {0} [built]
2017-07-31T13:44:19.5498387Z [5] ./node_modules/inversify/lib/utils/guid.js 352 bytes {0} [built]
2017-07-31T13:44:19.5498387Z [7] ./node_modules/inversify/lib/inversify.js 1.93 kB {0} [built]
2017-07-31T13:44:19.5498387Z [8] ./client/src/Dependency/DependencyIdentifiers.js 395 bytes {0} [built]
2017-07-31T13:44:19.5498387Z [11] ./node_modules/reflect-metadata/Reflect.js 48 kB {0} [built]
2017-07-31T13:44:19.5498387Z [14] ./node_modules/inversify/lib/syntax/constraint_helpers.js 1.48 kB {0} [built]
2017-07-31T13:44:19.5498387Z [15] ./node_modules/inversify/lib/planning/metadata_reader.js 962 bytes {0} [built]
2017-07-31T13:44:19.5498387Z [16] ./client/src/index.ts 1.29 kB {0} [built]
2017-07-31T13:44:19.5498387Z [17] ./client/src/Dependency/DependencyManager.js 983 bytes {0} [built]
2017-07-31T13:44:19.5498387Z [18] ./client/src/Services/WordFetcherImpl.js 2.18 kB {0} [built]
2017-07-31T13:44:19.5498387Z [45] ./node_modules/inversify/lib/annotation/post_construct.js 722 bytes {0} [built]
2017-07-31T13:44:19.5498387Z [46] ./node_modules/process/browser.js 5.42 kB {0} [built]
2017-07-31T13:44:19.5498387Z [48] ./client/src/Utils/UriUtils.js 356 bytes {0} [built]
2017-07-31T13:44:19.5498387Z [49] ./client/src/Services/OxfordHelper.js 1.29 kB {0} [built]
2017-07-31T13:44:19.5498387Z [50] ./client/src/Services/DictionaryService.js 2.13 kB {0} [built]
2017-07-31T13:44:19.5498387Z + 36 hidden modules
2017-07-31T13:44:19.5498387Z
2017-07-31T13:44:19.5498387Z ERROR in [at-loader] TS2688: Cannot find type definition file for 'reflect-metadata'.
2017-07-31T13:44:19.5568407Z ##[warning]webpack partially succeeded
2017-07-31T13:44:19.5568407Z ##[warning]webpack: [at-loader] TS2688: Cannot find type definition file for 'reflect-metadata'.
2017-07-31T13:44:19.5568407Z webpack summary section markdown file creation is started
2017-07-31T13:44:19.5568407Z webpack sumamry section markdown file is created with the name 'd:\a\1\s\webpack.webpack.result.md'
2017-07-31T13:44:20.0895996Z ##[section]Finishing: webpack
Here is the dependencies fragment from the package.json
"dependencies": {
"async": "^2.5.0",
"compression": "^1.7.0",
"express": "^4.15.3",
"inversify": "^4.2.0",
"reflect-metadata": "^0.1.10",
"request": "^2.81.0"
},
"devDependencies": {
"#types/async": "^2.0.40",
"#types/compression": "0.0.33",
"#types/express": "^4.0.36",
"#types/jasmine": "^2.5.53",
"#types/node": "^8.0.14",
"#types/request": "^2.0.0",
"awesome-typescript-loader": "^3.2.1",
"jasmine": "^2.6.0",
"jasmine-console-reporter": "^1.2.7",
"typescript": "*",
"typings": "^2.1.1",
"webpack": "^3.0.0"
}
What could be wrong?
Try installing reflect-metadata #types: https://www.npmjs.com/package/#types/reflect-metadata
npm i -D #types/reflect-metadata
Maybe you should add it on tsconfig.json, depends on your current configuration.
It was more of a MS TFS issue. When I changed Agent from "Hosted VS2017" to "Hosted Linux Preview" everything worked fine!
Not sure what is going on under the hood.

Angular2 : After npm update, my app is broken

I have a problem with my angular 2/cli project.
I have done an update of my npm packages but after that, when I'm using ng serve, I get theses errors :
Time: 12752ms
chunk {0} main.bundle.js, main.bundle.map (main) 45.3 kB {2} [initial] [rendered]
chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 20.6 kB {3} [initial] [rendered]
chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.52 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
ERROR in AppModule is not an NgModule
ERROR in ./src/app/shared/guards/unauth-guard.ts
Module build failed: Error: /Users/nicolas/Desktop/Dilit/seller-app/src/app/shared/guards/unauth-guard.ts (16,8): Property 'take' does not exist on type 'AngularFireAuth'.)
at _checkDiagnostics (/Users/nicolas/Desktop/Dilit/seller-app/node_modules/#ngtools/webpack/src/loader.js:116:15)
at /Users/nicolas/Desktop/Dilit/seller-app/node_modules/#ngtools/webpack/src/loader.js:141:17
# ./src/app/app.module.ts 23:0-59
# ./src/app/index.ts
# ./src/main.ts
# multi main
ERROR in ./src/app/shared/guards/auth-guard.ts
Module build failed: Error: /Users/nicolas/Desktop/Dilit/seller-app/src/app/shared/guards/auth-guard.ts (17,8): Property 'take' does not exist on type 'AngularFireAuth'.)
at _checkDiagnostics (/Users/nicolas/Desktop/Dilit/seller-app/node_modules/#ngtools/webpack/src/loader.js:116:15)
at /Users/nicolas/Desktop/Dilit/seller-app/node_modules/#ngtools/webpack/src/loader.js:141:17
# ./src/app/app.module.ts 24:0-55
# ./src/app/index.ts
# ./src/main.ts
# multi main
ERROR in ./src/app/application/application.component.ts
Module not found: Error: Can't resolve 'application.frame.component.html' in '/Users/nicolas/Desktop/Dilit/seller-app/src/app/application'
# ./src/app/application/application.component.ts 39:18-61
# ./src/app/app.module.ts
# ./src/app/index.ts
# ./src/main.ts
# multi main
ERROR in ./src/app/application/dashboard/dashboard.component.ts
Module not found: Error: Can't resolve 'dashboard.component.html' in '/Users/nicolas/Desktop/Dilit/seller-app/src/app/application/dashboard'
# ./src/app/application/dashboard/dashboard.component.ts 63:18-53
# ./src/app/app.module.ts
# ./src/app/index.ts
# ./src/main.ts
# multi main
ERROR in ./src/app/application/dashboard/dashboard.component.ts
Module not found: Error: Can't resolve 'dashboard.component.scss' in '/Users/nicolas/Desktop/Dilit/seller-app/src/app/application/dashboard'
# ./src/app/application/dashboard/dashboard.component.ts 64:17-52
# ./src/app/app.module.ts
# ./src/app/index.ts
# ./src/main.ts
# multi main
ERROR in ./src/app/application/campaign/campaign.component.ts
Module not found: Error: Can't resolve 'campaign.component.html' in '/Users/nicolas/Desktop/Dilit/seller-app/src/app/application/campaign'
# ./src/app/application/campaign/campaign.component.ts 81:18-52
# ./src/app/app.module.ts
# ./src/app/index.ts
# ./src/main.ts
# multi main
ERROR in ./src/app/application/campaign/campaign.component.ts
Module not found: Error: Can't resolve 'campaign.component.scss' in '/Users/nicolas/Desktop/Dilit/seller-app/src/app/application/campaign'
# ./src/app/application/campaign/campaign.component.ts 82:17-51
# ./src/app/app.module.ts
# ./src/app/index.ts
# ./src/main.ts
# multi main
webpack: bundle is now VALID.
Even if I return to my old package.json config, I can't build my project.
These is my package.json :
{
"name": "seller-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.4.1",
"#angular/compiler": "2.4.1",
"#angular/core": "2.4.1",
"#angular/forms": "2.4.1",
"#angular/http": "2.4.1",
"#angular/platform-browser": "2.4.1",
"#angular/platform-browser-dynamic": "2.4.1",
"#angular/router": "3.4.1",
"#types/node": "^6.0.53",
"angularfire2": "^2.0.0-beta.7-pre",
"core-js": "^2.4.1",
"firebase": "^3.6.4",
"ng2-img-cropper": "^0.7.6",
"ng2-toastr": "^1.3.2",
"rxjs": "5.0.2",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"#angular/compiler-cli": "2.4.1",
"#types/jasmine": "2.5.40",
"#types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.4",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.7.0",
"karma": "1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.4.0",
"protractor": "4.0.14",
"ts-node": "2.0.0",
"tslint": "4.2.0",
"typescript": "~2.1.4",
"webdriver-manager": "11.1.0"
}
}
Thanks for your help
I got the same error when upgrading TypeScript to 2.1.4. The error exists when downgrading to TypeScript 2.1.1. The error disappears when downgrading to TypeScript 2.0.8.

Resources