应用程序找不到.js文件

Question

我有一个Play应用程序。应用程序的UI在Angular中。我创建了一个文件夹ui这是顶级目录Angular。

build.sbt
`ui-dev-build` := {
implicit val UIroot = baseDirectory.value / "ui"
if (runDevBuild != Success) throw new Exception("Oops! UI Build crashed.")
}
def runDevBuild(implicit dir: File): Int = ifUiInstalled(runScript("npm run build"))
package.json
"build": "ng build --output-path ../public/ui",

生成Angular应用程序时，我将输出传输到Play框架的public文件夹。从那里，Play将public文件夹的联系人传输到target文件夹进行部署。在index.html(主页 html 文件(中，我通过包含Angular构建中创建的脚本来访问angular。

<script src="@routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>

这工作正常。

我想在我的应用程序中使用ng-ace2-editor- https://github.com/fxmontigny/ng2-ace-editor。我已经在package.json-"ng2-ace-editor": "0.3.9"中添加了它，我可以看到ng2-ace-editor目录存在于node_modules中。

当我运行应用程序时，出现错误

GET http://localhost:9000/mode-html.js net::ERR_ABORTED 404 (Not Found)
exports.loadScript  @   index.js:3802
exports.loadModule  @   index.js:4174
setMode @   index.js:10152
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setMode

我不明白如何让我的应用程序找到mode-html.js.该文件存在于位置"./node_modules/ace-builds/src-min/mode-html.js中。我已经在package.json"script":[]添加了此路径，但仍然收到错误。

"scripts":[
"./node_modules/ace-builds/src-min/ace.js",
"./node_modules/ace-builds/src-min/theme-eclipse.js",
"./node_modules/ace-builds/src-min/mode-html.js"
]

有趣的是，如果我在主页文件中包含ace.js，事情就会起作用

<script src="@routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/ace/src-min/ace.js")" type="text/javascript"></script> <!-- this makes things work-->

所以我知道问题是我的mode-html.js文件没有得到服务，很可能是路径解析问题，但我无法弄清楚它是什么。

进一步分析表明，ace.js中的以下代码会导致错误。

exports.loadModule = function(moduleName, onLoad) {
var module, moduleType;
if (Array.isArray(moduleName)) {
moduleType = moduleName[0];
moduleName = moduleName[1];
}
try {
module = require(moduleName);
} catch (e) {}
if (module && !exports.$loading[moduleName])
return onLoad && onLoad(module);
if (!exports.$loading[moduleName])
exports.$loading[moduleName] = [];
exports.$loading[moduleName].push(onLoad);
if (exports.$loading[moduleName].length > 1)
return;
var afterLoad = function() {
require([moduleName], function(module) {
exports._emit("load.module", {name: moduleName, module: module});
var listeners = exports.$loading[moduleName];
exports.$loading[moduleName] = null;
listeners.forEach(function(onLoad) {
onLoad && onLoad(module);
});
});
};
if (!exports.get("packaged"))
return afterLoad();
net.loadScript(exports.moduleUrl(moduleName, moduleType), afterLoad);
reportErrorIfPathIsNotConfigured();
};
var reportErrorIfPathIsNotConfigured = function() {
if (
!options.basePath && !options.workerPath 
&& !options.modePath && !options.themePath
&& !Object.keys(options.$moduleUrls).length
) {
console.error(
"Unable to infer path to ace from script src,",
"use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes",
"or with webpack use ace/webpack-resolver"
);
reportErrorIfPathIsNotConfigured = function() {};
}
};

为什么显式调用<script src="@routes.Assets.versioned("javascripts/common/vendor/ace/src-min/ace.js")" type="text/javascript"></script>使代码正常工作。根据 Angular 打包方法 https://upgradetoangular.com/angular-news/the-angular-cli-is-a-great-way-to-build-your-angular-app-but-what-it-does-can-be-a-mystery-what-are-those-files-it-generates/，此脚本是否应该已经在ui/scripts.js中可用？

Answer 1

我终于能够让我的代码工作了。 我的设置不同。我构建了我的 Angular 应用程序，它由我的 Play 服务器提供。角度构建存储在Play的/public/ui文件夹中。请求的格式应为/assets/ui/.。映射到/public/ui/...由于播放路由文件中的规则

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

当我运行代码时，我遇到了错误。

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-javascript.js' failed to load.
at blob:http://localhost:9000/3df21e42-fecb-4026-8bd6-f2b0d1d0540a:1:1

早些时候，我也得到了错误Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver

似乎ng-ace-editor根据编辑器的theme和mode导入.js脚本(主题、模式、worker(。theme和modejs文件可以包含在scripts.js中，但有些worker-.js文件不能包含在其中(我不知道为什么，也许是因为工人文件是使用 importScript 动态加载的。

Angular.json中的脚本部分是(这将全部捆绑在脚本中.js在 Angular 的最终捆绑包中(

"scripts": [
"./node_modules/ace-builds/src/ace.js",
"./node_modules/ace-builds/src/theme-eclipse.js",
"./node_modules/ace-builds/src/theme-monokai.js",
"./node_modules/ace-builds/src/mode-html.js"
]]

为了包含worker-.js文件，我添加了此规则angular-cli因为它似乎无法从node_modules加载。所以我不得不将文件从node modules复制到我的ui构建的根目录 - 如何在角度 cli 项目中包含来自node_modules的资产

"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "./node_modules/ace-builds/src/",
"output": "/"
}
],

当我执行代码时，我发现错误http://localhost:9000/worker-javascript.js can't be loaded.我意识到我的文件加载在/assets/ui/路径中，而不是在服务器的根目录中。 所以我将basepath设置为在组件的.ts文件中/assets/ui

import * as ace from 'ace-builds/src-noconflict/ace';
ace.config.set('basePath', '/assets/ui/');
ace.config.set('modePath', '');
ace.config.set('themePath', '');

总结basePath似乎是用于动态加载脚本(例如工作线程脚本(的modePath和themePath/，因为模式和主题脚本捆绑在scripts.js中，并且在根级别可用 需要在node_modules外部复制worker-.js文件，因为angular_cli无法从node_modules复制资产