Adding server side code to angular-cli project conflicts with node typings

Question

When adding a basic express.js configuration (using TypeScript) to an Angular2 project that was initialized with angular-cli ng new [project-name], I need to add the following typing to compile the express server using gulp:

typings install --ambient --save node

This adds the following line to typings/browser.d.ts and typings/main.d.ts

/// <reference path="browser/ambient/node/index.d.ts" />
and
/// <reference path="main/ambient/node/index.d.ts" />

In the express server.ts file I can add a reference to main instead of browser to keep TypeScript happy

/// <reference path="../typings/main.d.ts" />

But when I leave the node typing reference in the browser.d.ts file, the ng build command will fail:

Build failed.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  C:/Users/user123/Downloads/my-catalog-master/my-catalog-master/tmp/broccoli_type_script_compiler-input_base_path-7VFCE2dg.tmp/0/src/typings.d.ts (3, 13): Subsequent variable declarations must have the same type.  Variable 'module' must be of type 'NodeModule', but here has type '{ id: string; }'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
    at C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
    at lib$rsvp$$internal$$tryCatch (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1198:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\broccoli-plugin\index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:21:10)
    at BroccoliTypeScriptCompiler (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:10)
    at Angular2App._getTsTree (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\lib\broccoli\angular2-app.js:280:18)
    at Angular2App._buildTree (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\lib\broccoli\angular2-app.js:101:23)
    at new Angular2App (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\lib\broccoli\angular2-app.js:42:23)
    at module.exports (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:55:19)
    at Class.module.exports.Task.extend.init (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:89:10)
    at new Class (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\node_modules\core-object\core-object.js:18:12)
    at Class.module.exports.Task.extend.run (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\lib\tasks\build.js:15:19)
    at C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\lib\commands\build.js:32:24
    at lib$rsvp$$internal$$tryCatch (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\user123\Downloads\my-catalog-master\my-catalog-master\node_modules\angular-cli\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)

I could delete the line for now in browser.d.ts so it starts working again but that's not ideal when re-installing typings. I'm currently using angular-cli v1.0.0-beta.0

emp · Accepted Answer · 2016-05-27 14:48:01Z

4

The actual error originates from the src/typings.d.ts file. Angular-cli creates this typings.d.ts file with the following content:

/// <reference path="../typings/browser.d.ts" />
declare var module: { id: string };

Removing this file solved the problem and the application is still working.

answered May 27, 2016 at 14:48

emp

5,0962 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Johnny Over a year ago

Can you please provide more info on how you were able to get the server side integrated with the angular cli? Do the "ng build" and "ng serve" also compile and run the server side code?

emp Over a year ago

I don't compile server code with the angular-cli, I would also like to keep it that way. To prerpare a build I just use gulp. One task calls ng serve and another task starts the server.

Johnny Over a year ago

Thanks for the reply. Do you happen to have a link to a seed project that uses both angular cli as well as server code?

Splaktar · Accepted Answer · 2016-05-29 05:00:18Z

2

I was able to resolve this by changing src/typings.d.ts

From

declare var module: { id: string };

To

declare var module: NodeModule;

And making sure that I had typings for Node 4 via typings install node-4 --ambient --save.

answered May 29, 2016 at 5:00

Splaktar

5,9145 gold badges45 silver badges76 bronze badges

Comments

ethemsulan · Accepted Answer · 2016-09-06 08:04:03Z

0

The error about .spec.ts file. When i update

'@angular/testing';

code like

'@angular/core/testing';

my error resolved;

import {
  describe,
  ddescribe,
  expect,
  iit,
  it
} from '@angular/testing';
import {Hero} from './hero';

describe('Hero', () => {
  it('should create an instance', () => {
    expect(new Hero()).toBeTruthy();
  });
});

answered Sep 6, 2016 at 8:04

ethemsulan

2,32727 silver badges19 bronze badges

Collectives™ on Stack Overflow

Adding server side code to angular-cli project conflicts with node typings

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related