将服务器端代码添加到angular-cli项目会与节点类型定义文件发生冲突。

Question

当我给使用TypeScript的Angular2项目添加一个基本的express.js配置时，该项目是通过angular-cli ng new [project-name]初始化的。我需要添加以下类型来使用gulp编译express服务器：

typings install --ambient --save node

这将在typings/browser.d.ts和typings/main.d.ts中添加以下行：

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

在 Express 的 server.ts 文件中，我可以添加对 main 的引用，而不是 browser，以使 TypeScript 保持正常。

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

但是，当我将节点类型引用留在 browser.d.ts 文件中时，ng build 命令会失败：

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)

我可以暂时删除 browser.d.ts 中的这一行，以便它重新开始工作，但是当重新安装类型时这并不理想。我目前正在使用 angular-cli v1.0.0-beta.0

- emp

Answer 1

实际错误源自src/typings.d.ts文件。Angular-cli使用以下内容创建此typings.d.ts文件：

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

删除这个文件解决了问题，应用程序仍然可以正常工作。

- emp

---

请问您能否提供更多关于如何将服务器端与Angular CLI集成的信息？ "ng build"和"ng serve"是否也编译并运行服务器端代码？ - Johnny

我不使用angular-cli编译服务器代码，我也希望保持这种方式。为了准备构建，我只使用gulp。一个任务调用ng serve，另一个任务启动服务器。 - emp

谢谢回复。你有没有一个同时使用Angular CLI和服务器代码的种子项目链接？ - Johnny

Answer 2

我通过更改 src/typings.d.ts 来解决了这个问题。

从

declare var module: { id: string };

到

declare var module: NodeModule;

并确保我通过 typings install node-4 --ambient --save 获得了 Node 4 的类型定义。

- Splaktar

Answer 3

关于.spec.ts文件的错误。当我更新代码如下:

'@angular/testing';

变成：

'@angular/core/testing';

我的错误解决了；

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

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

- ethemsulan