Question

我正在尝试制作一个Angular Universal，但我遇到了“ts-node server.ts”的问题。输出记录如下：

$ npm run start

> prestart public-site
> ng build --prod && ngc

 12% building modules 24/32 modules 8 active ...lic-site/src/styles.scssNode#moveTo was deprecated. Use Container#append.
Hash:                                                               
Time: 76999ms
chunk    {0} 0.chunk.js 11.9 kB {1} {2} {3} {4} {5} {6} 
chunk   {14} inline.bundle.js (inline) 0 bytes

> start public-site
> ts-node src/server.ts

public-site/node_modules/md2/module.js:7
import { NgModule } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (public-site/src/app/app.module.ts:11:1)

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! start: `ts-node src/server.ts`
npm ERR! Exit status 1
npm ERR!

如果你知道如何解决这个问题，我们将不胜感激。

Answer 1

应该编译所有3d-party libs。 ts-node不会转换es2015模块。我使用webpack来转换像@ angular / material和@ngx-translate这样的模块。查看我的存储库中的示例：https://github.com/SergiusSidorov/cli-universal-demo

我希望这会对你有所帮助。

Answer 2

对于未来访问过这个问题的人来说（就像我一样），锤子和jquery会引起问题，锤子是流行的Material 2 lib的一部分，所以这是人们进行这种转换的常见问题。

最糟糕的是，您可以取出第三方库并逐个重新添加它们，并每次启动服务器以查看它是否有效。

您还可以限制在浏览器中调用某些内容时的情况，如此;

import { PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';

 constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

 ngOnInit() {
   if (isPlatformBrowser(this.platformId)) {
      // Client only code.
      ...
   }
   if (isPlatformServer(this.platformId)) {
     // Server only code.
     ...
   }
 }

- 从这里找到的通用启动器中提取：https://github.com/angular/universal-starter

因此，如果您需要使用jquery，请确保您所做的任何调用都在'isPlatformBrowser'中，因为jquery和其他类似的库使用 DOM 和DOM在节点后端不存在，从而导致错误。

尝试运行Angular Universal时出错“意外的令牌导入”

2 个答案: