jjzjj

javascript - 将 Sails Js 与 Angular 2 集成

coder 2025-02-05 原文

我正在尝试将 Angular 2 集成到 Sails Js 应用程序中。我对两者都是新手。我一直在关注this官方教程在这里。它在静态 http 服务器的独立模式下工作正常，但是当我尝试集成到 sails 应用程序时，我遇到以下问题:

1 - 我如何引用本地 node_modules 文件夹中的 angular2 js。每次我这样做，sails 都会将其解释为一条路线，并为我的脚本提供 404。例如:

<script src="node_modules/angular2/dist/angular2.min.js"></script>

我现在能够使用 cdnjs 链接克服上述问题，但我想知道更好/合适的解决方案。

2 - 我添加了 tsc和 tsc -w脚本到我的 package.json，但即使是 sails lift --verbose我没有得到任何输出或错误。这是我将脚本添加到 json 文件的方式:

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "debug": "node debug app.js",
    "start": "node app.js"
}

最后我不得不使用 -g 安装 typescript 并手动编译。这行得通，但同样，它应该与脚本一起工作。很高兴知道我错过了什么。

3 - 在克服上述错误后，当我再次提起服务器时，它给了我更多 404 错误，这似乎来自 system.src.js我无法弄清楚。请查看下面的控制台屏幕截图。

我想我在 sails 中设置 Angular 应用程序目录时可能会犯错误。为了确保我们涵盖所有内容，这里是我正在使用的目录结构。 sails 应用程序中还没有任何内容。这就是为什么以下路径仅适用于与 Angular 相关的工件和 Assets 。

在 Assets 文件夹中:

应用

│ ├── app.component.ts

│ └── main.ts

当然是 .ts文件被编译成js。

在 sails views 文件夹中，我有 layout.ejs，它包含以下内容:

  .
  .
  .

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.17/system-polyfills.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2-polyfills.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.17/system.src.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2.dev.js"></script>

  <script>

      System.config({
          packages: {
              app: {
                  format: 'register',
                  defaultExtension: 'js'
              }
          }
      });
      System.import('/app/main')
              .then(null, console.error.bind(console));
  </script>


  .
  .
  .

  <my-app>Loading...</my-app>

除了上述文件外，我还在 sails 根文件夹中添加了 tsconfig。

我遵循了 official 中的代码和目录结构指南快速入门教程。

最佳答案

所以，对于任何感兴趣的人，我已经解决了这样的问题:

1 - 为了提供对 node_modules 的静态访问，我创建了一个快速中间件(可能也为此使用策略？):

(config/express.js)

var express = require('express');
module.exports.http = {
customMiddleware: function (app) {
    app.use('/node_modules', express.static(process.cwd() + '/node_modules'));
   }
};

2 - 我已经能够编译了，一切都很好

3 - 对于与 rxjs 相关的错误，我做了一些研究，发现 rxjs 是 no longer bundled with angular 2 .因此，我不得不稍微修改 systemjs 配置以添加 rxjs 的映射，如下所示:

(views/layout.ejs)

System.config({
          map: {
              rxjs: 'node_modules/rxjs' // added this map section
          },
          packages: {
              app: {
                  format: 'register',
                  defaultExtension: 'js'
              },
              'rxjs': {defaultExtension: 'js'} // and added this to packages
          }
      });
System.import('/app/main')
              .then(null, console.error.bind(console));

关于javascript - 将 Sails Js 与 Angular 2 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35131611/

javascriptAngularscriptcode34angularjsnode.jssails.js

有关javascript - 将 Sails Js 与 Angular 2 集成的更多相关文章

  1. ruby-on-rails - 如何使辅助方法在 Rails 集成测试中可用？ - 2

    我在app/helpers/sessions_helper.rb中有一个帮助程序文件，其中包含一个方法my_preference，它返回当前登录用户的首选项。我想在集成测试中访问该方法。例如，这样我就可以在测试中使用getuser_path(my_preference)。在其他帖子中，我读到这可以通过在测试文件中包含requiresessions_helper来实现，但我仍然收到错误NameError:undefinedlocalvariableormethod'my_preference'.我做错了什么？require'test_helper'require'sessions_hel

  2. ruby-on-rails - 我如何将 Hoptoad 与 DelayedJob 和 DaemonSpawn 集成？ - 2

    我一直很高兴地使用DelayedJob习惯用法:foo.send_later(:bar)这会调用DelayedJob进程中对象foo的方法bar。我一直在使用DaemonSpawn在我的服务器上启动DelayedJob进程。但是...如果foo抛出异常，Hoptoad不会捕获它。这是任何这些包中的错误...还是我需要更改某些配置...或者我是否需要在DS或DJ中插入一些异常处理来调用Hoptoad通知程序？回应下面的第一条评论。classDelayedJobWorker 最佳答案 尝试monkeypatchingDelayed::W

  3. jenkins部署1--jenkins+gitee持续集成 - 2

    前置步骤我们都操作完了，这篇开始介绍jenkins的集成。话不多说，看操作1、登录进入jenkins后会让你选择安装插件，选择第一个默认的就行。安装完成后设置账号密码，重新登录。2、配置JDK和Git都需要执行路径，所以需要先把执行路径找到，先进入服务器的docker容器，2.1JDK的路径root@69eef9ee86cf:/usr/bin#echo$JAVA_HOME/usr/local/openjdk-82.2Git的路径root@69eef9ee86cf:/#whichgit/usr/bin/git3、先配置JDK和Git。点击：ManageJenkins>>GlobalToolCon

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. 三分钟集成 TapTap 防沉迷 SDK（Unity 版） - 2

    三分钟集成Tap防沉迷SDK（Unity版）一、SDK介绍基于国家对上线所有游戏必须增加防沉迷功能的政策下，TapTap推出防沉迷SDK，供游戏开发者进行接入；允许未成年用户在周五、六、日以及法定节假日晚上8:00-9:00进行游戏，防沉谜时间段进入游戏会弹窗进行提示！开发环境要求：Unity2019.4或更高版本iOS10或更高版本Android5.0（APIlevel21）或更高版本🔗Unity集成Demo参考链接🔗UnityTapSDK功能体验APK下载链接二、集成前准备1.创建应用进入开发者后台,按照提示开始创建应用；2.开通服务在使用TDS实名认证和防沉迷服务之前，需要在上面创建的应

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - RailsTutorial - 第 8.4.3 章 - 在集成测试中添加用户后未清除测试数据库 - 2

    我被这个难住了。到目前为止教程中的一切都进行得很顺利，但是当我将这段代码添加到我的/spec/requests/users_spec.rb文件中时，事情开始变得糟糕:describe"success"doit"shouldmakeanewuser"dolambdadovisitsignup_pathfill_in"Name",:with=>"ExampleUser"fill_in"Email",:with=>"ryan@example.com"fill_in"Password",:with=>"foobar"fill_in"Confirmation",:with=>"foobar"cl

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby-on-rails - Rails with angular 与 Rails pure(查看性能) - 2

    我尝试在Internet上搜索有关使用angularJS进入RubyonRails项目与RubyonRailspure的View性能的信息。我的问题是因为2个月前我开始使用纯AngularJS，现在我需要将AngularJS集成到一个新项目中，但需要展示使用带有RubyonRails的AngularJS呈现View的性能如何，并消除对RubyonRails的负担.例如:带Rails的Angular:使用RubyonRails获取数据(从数据库或GET请求)，将信息发送到file.js.erb并使用AngularJS操作数据并显示带有解析数据的View。纯粹的Rails:(自然流程)使用

随机推荐