3

我正在尝试使用angular2-universal. 我将官方仓库https://github.com/angular/universal/tree/master/examples/src/universal/todo的示例 todo 应用程序复制粘贴到我自己的 Trails/Express 服务器中。

我设法启动了我的服务器，但是当我打电话时http://localhost:3000出现以下错误：

Error: No Directive annotation found on TodoApp
    at new BaseException (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/facade/exceptions.js:17:23)
    at DirectiveResolver.resolve (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/directive_resolver.js:31:15)
    at CompileMetadataResolver.getDirectiveMetadata (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/metadata_resolver.js:55:51)
    at RuntimeCompiler.resolveComponent (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/runtime_compiler.js:34:47)
    at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:99:37
    at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:292:26
    at ZoneDelegate.invoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:281:29)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:41)
    at ZoneDelegate.invoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:280:35)
    at Zone.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:174:44)
    at NgZoneImpl.runInner (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone_impl.js:76:71)
    at NgZone.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone.js:223:66)
    at ApplicationRef_.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:290:14)
    at Object.coreLoadAndBootstrap (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:96:19)
    at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/angular2-universal/dist/node/bootloader.js:186:34
    at Array.map (native)

通用回购的例子正在工作，所以我不明白为什么它对我不起作用。我没有更改 angular2 源的任何内容。

我所有的代码都在这里https://github.com/jaumard/trails-angular2-isomorphic配置在这里https://github.com/jaumard/trails-angular2-isomorphic/blob/master/api/controllers/ViewController。 js#L58用于路由，此处用于模板引擎https://github.com/jaumard/trails-angular2-isomorphic/blob/master/config/web.js#L76

4

1 回答 1

6

您的问题是您同时使用不同angular2的软件包。

您使用文件夹中的模块启动服务器，./node_modules/但您的组件TodoApp将由文件夹中的实例ComponentMetadata（extends DirectiveMetadata）装饰./dist/src/node_modules/@angular/core/。 在此处输入图像描述

我认为首先你需要将包传输到dist文件夹然后运行 ​​server. 你必须使用相同的路径到 angular2 模块（./dist/src/node_modules）

例如，您可以尝试这样的事情：

服务器.js

'use strict'

const gulp = require('gulp');
const rimraf = require('gulp-rimraf');
const path = require('path');
const dest = './dist';  

gulp.task('clean', (cb) => {
  return gulp.src(dest).pipe(rimraf())
});

gulp.task('prerun', ['clean'], () => {
  return gulp.src([
    'node_modules/rxjs/**/*',
    'node_modules/zone.js/**/*',
    'node_modules/core-js/**/*',
    'node_modules/reflect-metadata/**/*',
    'node_modules/systemjs/**/*',
    'node_modules/@angular/**/*',
    'node_modules/angular2-universal/**/*',
    'node_modules/angular2-universal-polyfills/**/*',
    'node_modules/angular2-express-engine/**/*',
    'node_modules/angular2-hapi-engine/**/*'
  ], { base: './' })
    .pipe(gulp.dest(path.join(dest, 'src')))
});


gulp.start('prerun', run)

function run() {
  require('./dist//src/node_modules/angular2-universal/polyfills')
  const app = require('./')
  const TrailsApp = require('trails')
  const server = new TrailsApp(app)

  server.start().catch(err => server.stop(err))
}

我reflect-metadata在package.json添加。您还需要componentUrl像这样进行一些更改：

视图控制器.js

module.exports = class ViewController extends Controller {
  helloWorld(req, res) {
    const todoApp = require('../../dist/src/todo/app')
    let queryParams = ng2U.queryParamsToBoolean(req.query);
    let options = Object.assign(queryParams , {
      // client url for systemjs
      buildClientScripts: true,
      systemjs: {
        componentUrl: 'todo/browser', <== remove src/
        map: {
          'angular2-universal': 'node_modules/angular2-universal',
          '@angular': 'node_modules/@angular'
        },
        packages: PACKAGES
      },
      ...

然后你可以看到以下错误：

在此处输入图像描述

所以你需要rxjs在你的配置中添加： ViewController.js

const PACKAGES = {
  'angular2-universal/polyfills': {
    format: 'cjs',
    main: 'dist/polyfills',
    defaultExtension: 'js'
  },
  ...
  rxjs: {  <== this property
    defaultExtension: 'js'
  }
};

...
systemjs: {
  componentUrl: 'todo/browser',
  map: {
    'angular2-universal': 'node_modules/angular2-universal',
    '@angular': 'node_modules/@angular',
    'rxjs': 'node_modules/rxjs' <== this line
  },
  packages: PACKAGES
},

另请参阅此处的完整更改列表https://github.com/alexzuza/trails-angular2-isomorphic/commit/45f2e59529821757f6a6c03c5872e08fdce3f3e7

希望对你有帮助！

于 2016-06-15T05:43:06.273 回答