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

Posted 2023-03-07

【中文标题】尝试运行 Angular Universal 时出现“意外的令牌导入”错误

【英文标题】：Error "Unexpected token import" when trying to run Angular Universal

【发布时间】：2017-10-20 02:41:17

【问题描述】：

我正在尝试制作 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! 

如果您知道如何解决此问题，我们将不胜感激。

【参考方案1】：

请注意，对于将来访问此内容的人（就像我所做的那样），hammerjs 和 jquery 会导致问题，hammerjs 是流行的 Material 2 库的一部分，因此对于进行此转换的人来说这是一个常见问题。

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

您还可以限制在浏览器中呈现某些内容的时间；

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.
     ...
   
 

- 来自universal-starter 的摘录：https://github.com/angular/universal-starter

因此，如果您需要使用 jquery，请确保您进行的任何调用都在“isPlatformBrowser”内，因为 jquery 和其他类似的库会使用 DOM 和 DOM节点后端不存在，导致报错。

【参考方案2】：

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

希望对你有帮助。

【讨论】：

谢谢，这可以让我找到更好的方向