У меня есть приложение 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 вывод переносится в папку public платформы Play. Оттуда Play передает контакты папки public в папку target для развертывания. В index.html (домашняя страница html файл) я получаю доступ к angular, включая сценарии, созданные в Angular build.
<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. Я добавил этот путь в "script":[] из package.json, но все равно получаю ошибку.
"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> делает код работающим. Должен ли этот сценарий быть доступен в ui/scripts.js согласно 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/?