如何将 ngx-bootstrap 与 angular4 与服务器端渲染一起使用

问题描述

限时删除！！

我已经安装了 ngx-bootstrap 并使用了 angular-cli 1.0.1 并在 Roberto Auler 的帖子.

i have installed ngx-bootstrap and using angular-cli 1.0.1 and done universal setup with the help of Roberto Auler's Post.

我在 angular-cli.json 样式中添加了 bootstrap 文件的路径

I have added path of bootstrap file in angular-cli.json styles

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

我正在使用 AlertModule 进行测试及其抛出错误

I am using AlertModule for testing and its throwing error

C:\Users\Praveen\Desktop\Projects\Angular2\universaltest\node_modules\ngx-bootstrap\alert\alert.module.js:1
(function (exports, require, module, __filename, __dirname) { import { CommonModule } from '@angular/common';
                                                              ^^^^^^
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> (C:\Users\Praveen\Desktop\Projects\Angular2\universaltest\dist\ngfactory\src\app\app.server.module.ngfact
ory.ts:17:1)
    at Module._compile (module.js:571:32)
    at Module.m._compile (C:\Users\Praveen\Desktop\Projects\Angular2\universaltest\node_modules\ts-node\src\index.ts:406:23)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\Users\Praveen\Desktop\Projects\Angular2\universaltest\node_modul
es\ts-node\src\index.ts:409:12)
    at Module.load (module.js:488:32)

任何输入将不胜感激.

推荐答案

我给你发了一个 pull request，ts-node 不会像 node_modules 中的 ngx-bootstrap 那样转译 es2015 模块，这就是我使用 webpack 转译代码的原因.

I sent you a pull request, ts-node does not transpiles the es2015 modules like ngx-bootstrap in node_modules, that's why I used webpack to transpile the code.

https://githubSimpleMDE/pull/2/commits/193f4a8c58e01a2b55764532d7e3ca8101d312ec-angular-universal/pull/2/commits/193f4a8c58e01a2b55764532d7e3ca8101d312ec

这篇关于如何将 ngx-bootstrap 与 angular4 与服务器端渲染一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..