将服务器端代码添加到 angular-cli 项目与节点类型冲突

Question

将基本 express.js 配置（使用 TypeScript）添加到使用 angular-cli ng new [project-name] 初始化的 Angular2 项目时，我需要添加以下类型来编译快递服务器使用 gulp:

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

Answer 1

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

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

删除此文件解决了问题，应用程序仍在运行。

Answer 2

我可以通过更改 src/typings.d.ts

来解决这个问题

来自

declare var module: { id: string };

到

declare var module: NodeModule;

并确保我通过 typings install node-4 --ambient --save 为 Node 4 打字。

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();
  });
});

将服务器端代码添加到 angular-cli 项目与节点类型冲突

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

node.js

typescript

angular-cli

angular