Say I have a foo.ts and app.ts as follows:
foo.ts:
export interface Foo {
id: number;
label: string;
};
app.ts:
import {Foo} from './foo'
var myfoo: Foo = { "id": 1, "label": "One" };
console.log(JSON.stringify(myfoo));
After compiling, executing 'node app.js' from the command line runs as expected if I use "module"="commonjs" in my tsconfig.json. Cutting to the chase, what I would like to do is is use my Foo interface client-side with Angular 2, and server-side with node. Inconveniently, the Angular 2 quickstart I am modeling on here wants "module"="system" in tsconfig.json. This configuration causes an error when trying to run 'node app.js':
System.register([], function(exports_1) {
^
ReferenceError: System is not defined`
I have tried following the instructions for using systemjs with node on github, but at this point I am just mashing keys and could use some help. How do I either (a) get my app.ts code running on the server-side using systemjs, or alternately, (b) get the Angular 2 quickstart running with commonjs?
I am going to wrap this up with an answer, even if the question hasn't been up-voted. The solution appears to be to use Gulp to compile the common typescript code (like interface Foo) differently for the client ("module"="system") and the server ("module"="commonjs"). If there is a way to compile the typescript code in the OP with "module"="system" I'd still like to know. But it appears to be kind of academic since everyone manages their project with Gulp or something similar anyway.
Related
There is something wrong with the way I understand how to use classes in a Javascript module and export them, or some bad assumption I made about how nodejs works. Please help me understand this better. I wanted to write a module that exposed an object that will "store things safely." I have a file ("safestore.js") with this in it:
class Safestore {
constructor() {
console.log("SUCCESS!");
}
... // I defined other methods here...
}
exports.safestore = Safestore; // I tried this with `new Safestore` and `new Safestore()` too.
I run nodejs on my command line and then:
> ss = require('./safestore');
{ safestore: [Function] }
> s = ss.safestore('pwd','./encFile.enc');
ReferenceError: Safestore is not defined...
Why is it telling me that Safestore is not defined while executing the safestore function which is defined in the same file where Safestore is, actually defined?
The question does not contain enough information, although there is a clue. node and nodejs are two different pieces of software, and I was using the wrong one. I also didn't specify what version of nodejs I ran from my command line. When I ran it with node (instead of nodejs) I got errors that made sense and I was able to fix them.
Thanks to #Ethicist for listing the version of Node he used, as this got me to double check all those things.
I just need to remember that node and nodejs each do different things. Further research shows me that nodejs is a symlink to version 8.10.0 of node.js, and node is a symlink to the version that I set with nvm. I solved the problem permanently for myself with sudo rm /user/bin/nodejs and I'll remember, if I ever see an error that says nodejs doesn't exist, that it wants the old version of node.js.
I am trying to follow this tutorial using nodejs and express: https://pusher.com/docs/beams/reference/web/#npm-yarn
First I did: npm install #pusher/push-notifications-web before adding the code.
But when I add this code in the index.js file:
import * as PusherPushNotifications from "#pusher/push-notifications-web";
const beamsClient = new PusherPushNotifications.Client({
instanceId: "<YOUR_INSTANCE_ID_HERE>",
});
beamsClient.start().then(() => {
// Build something beatiful 🌈
});
I get this error:
SyntaxError: Cannot use import statement outside a module
It's also not very clear to me from the tutorial if the code has to be in the frontend or the backend. I tried both but got the same result.
How can I fix this problem?
The error is caused by the fact that you're trying to use ES module specific features in a regular CommonJS file (the default behavior in Node.js). However, what you're looking at is the Web SDK for Pusher which won't help you achieve your goals.
You need the server SDK for Node.js - https://pusher.com/docs/beams/reference/server-sdk-node/.
Verify that you have the latest version of Node.js installed and you have 2 ways of fixing that
Set "type" field with a value of "module" in package.json. This will ensure that all .js and .mjs files are interpreted as ES modules.
// package.json
{
"type": "module"
}
Use .mjs as file extension instead of .js.
I've written a custom NPM package that will spin up a mocked Apollo GraphQL server for me with some custom settings.
In my /bin folder I have a file, server.js which is responsible for spinning up the server.
In package.json I've set up my command like this:
...
"bin": {
"mock-server": "./src/server.js"
},
...
So when I run the command mock-server from the parent project it will execute the server.js file.
All good so far, but the problem is that once I start trying to require dependencies I run into this error:
$ use-env mock-server
/Users/dev/projects/share-vde-frontend/node_modules/.bin/mock-server: line 1: syntax error near unexpected token `('
/Users/dev/projects/share-vde-frontend/node_modules/.bin/mock-server: line 1: `const { ApolloServer } = require("apollo-server");'
error Command failed with exit code 2.
My knowledge of writing npm modules is just based on what I've seen in packages I've been using in the past, so maybe I'm missing something key. Do I need some special measures when requiring imports? Or do I need to build and transpile the code? I'm using ES6 syntax, but I feel confident that anyone using this package will be on modern Node.js versions (the package is private and only to be used within our organisation).
Based on the comment from #jonrsharpe above, I solved it by added shabang to the start of the server.js file:
#!/usr/bin/env node
const { ApolloServer } = require("apollo-server");
...
I try to import a node module inside an Angular 8 web worker, but get an compile error 'Cannot find module'. Anyone know how to solve this?
I created a new worker inside my electron project with ng generate web-worker app, like described in the above mentioned ng documentation.
All works fine until i add some import like path or fs-extra e.g.:
/// <reference lib="webworker" />
import * as path from 'path';
addEventListener('message', ({ data }) => {
console.log(path.resolve('/'))
const response = `worker response to ${data}`;
postMessage(response);
});
This import works fine in any other ts component but inside the web worker i get a compile error with this message e.g.
Error: app/app.worker.ts:3:23 - error TS2307: Cannot find module 'path'.
How can i fix this? Maybe i need some additional parameter in the generated tsconfig.worker.json?
To reproduce the error, run:
$ git clone https://github.com/hoefling/stackoverflow-57774039
$ cd stackoverflow-57774039
$ yarn build
Or check out the project's build log on Travis.
Note:
1) I only found this as a similar problem, but the answer handles only custom modules.
2) I tested the same import with a minimal electron seed which uses web workers and it worked, but this example uses plain java script without angular.
1. TypeScript error
As you've noticed the first error is a TypeScript error. Looking at the tsconfig.worker.json I've found that it sets types to an empty array:
{
"compilerOptions": {
"types": [],
// ...
}
// ...
}
Specifying types turns off the automatic inclusion of #types packages. Which is a problem in this case because path has its type definitions in #types/node.
So let's fix that by explicitly adding node to the types array:
{
"compilerOptions": {
"types": [
"node"
],
// ...
}
// ...
}
This fixes the TypeScript error, however trying to build again we're greeted with a very similar error. This time from Webpack directly.
2. Webpack error
ERROR in ./src/app/app.worker.ts (./node_modules/worker-plugin/dist/loader.js!./src/app/app.worker.ts)
Module build failed (from ./node_modules/worker-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'path' in './src/app'
To figure this one out we need to dig quite a lot deeper...
Why it works everywhere else
First it's important to understand why importing path works in all the other modules. Webpack has the concept of targets (web, node, etc). Webpack uses this target to decide which default options and plugins to use.
Ordinarily the target of a Angular application using #angular-devkit/build-angular:browser would be web. However in your case, the postinstall:electron script actually patches node_modules to change that:
postinstall.js (parts omitted for brevity)
const f_angular = 'node_modules/#angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
fs.readFile(f_angular, 'utf8', function (err, data) {
var result = data.replace(/target: "electron-renderer",/g, '');
var result = result.replace(/target: "web",/g, '');
var result = result.replace(/return \{/g, 'return {target: "electron-renderer",');
fs.writeFile(f_angular, result, 'utf8');
});
The target electron-renderer is treated by Webpack similarily to node. Especially interesting for us: It adds the NodeTargetPlugin by default.
What does that plugin do, you wonder? It adds all known built in Node.js modules as externals. When building the application, Webpack will not attempt to bundle externals. Instead they are resolved using require at runtime. This is what makes importing path work, even though it's not installed as a module known to Webpack.
Why it doesn't work for the worker
The worker is compiled separately using the WorkerPlugin. In their documentation they state:
By default, WorkerPlugin doesn't run any of your configured Webpack plugins when bundling worker code - this avoids running things like html-webpack-plugin twice. For cases where it's necessary to apply a plugin to Worker code, use the plugins option.
Looking at the usage of WorkerPlugin deep within #angular-devkit we see the following:
#angular-devkit/src/angular-cli-files/models/webpack-configs/worker.js (simplified)
new WorkerPlugin({
globalObject: false,
plugins: [
getTypescriptWorkerPlugin(wco, workerTsConfigPath)
],
})
As we can see it uses the plugins option, but only for a single plugin which is responsible for the TypeScript compilation. This way the default plugins, configured by Webpack, including NodeTargetPlugin get lost and are not used for the worker.
Solution
To fix this we have to modify the Webpack config. And to do that we'll use #angular-builders/custom-webpack. Go ahead and install that package.
Next, open angular.json and update projects > angular-electron > architect > build:
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
}
// existing options
}
}
Repeat the same for serve.
Now, create extra-webpack.config.js in the same directory as angular.json:
const WorkerPlugin = require('worker-plugin');
const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
module.exports = (config, options) => {
let workerPlugin = config.plugins.find(p => p instanceof WorkerPlugin);
if (workerPlugin) {
workerPlugin.options.plugins.push(new NodeTargetPlugin());
}
return config;
};
The file exports a function which will be called by #angular-builders/custom-webpack with the existing Webpack config object. We can then search all plugins for an instance of the WorkerPlugin and patch its options adding the NodeTargetPlugin.
I'd like to be able to test an Angular2 pipe purely in nodejs environment without including karma etc.
It is possible to use typescript files as test suites for mocha
https://templecoding.com/blog/2016/05/05/unit-testing-with-typescript-and-mocha/
But when I have a import {Pipe} from '#angular/core' it gives me
/Users/foo/node_modules/#angular/core/src/util/decorators.js:173
throw 'reflect-metadata shim is required when using class decorators';
^
reflect-metadata shim is required when using class decorators
Even if I write require('reflect-metadata') in my test file it still breaks with the same error.
Angular internally has this check:
(function checkReflect() {
if (!(Reflect && Reflect.getMetadata)) {
throw 'reflect-metadata shim is required when using class decorators';
}
})();
And after requireing reflect-matadata I indeed have Reflect on the global object, however it still doesn't work...
Anyway is there a way to test an Angular pipe purley in nodejs with mocha?
I'm using webpack to bundle the app so the file I'm requring in my test file looks like this:
import {Pipe} from '#angular/core';
#Pipe({
name: 'filterBy'
})
export class FilterByPipe {
transform(items = [], prop, val) {
return items.filter(someFilteringAlgorithm(prop, val));
}
}
I didn't test pipes yet, but here a post that explain how to test Angular 2 application in Node with Mocha. But It use Webpack instead of ts-node : Here
Hope It can help.