未捕获（承诺）没有定义 PLATFORM.Loader 并且没有全局可用的系统 API (ES6) 或 Require API (AMD) 来加载您的应用程序
Uncaught (in promise) No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app
使用 Aurelia latest 和 webpack，运行ning npm run watch，我在浏览器中收到以下错误并且应用程序无法加载：
Uncaught (in promise) No PLATFORM.Loader is defined and there is
neither a System API (ES6) or a Require API (AMD) globally available
to load your app
我认为平台（来自 aurelia-pal）由于某种原因在 运行 时间不可用。以下是我希望足以理解问题所在的信息。
这是我的 webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { AureliaPlugin, ModuleDependenciesPlugin } = require("aurelia-webpack-plugin");
const optimize = webpack.optimize;
module.exports = {
entry: {
main: "./src/main.ts",
vendor: [ "aurelia-bootstrapper" ]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
resolve: {
extensions: [".ts", ".js"],
modules: ["src", "node_modules"].map(x => path.resolve(x))
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
// serve index.html for all 404 (required for push-state)
historyApiFallback: true
},
mode: "development",
devtool: "inline-source-map",
optimization: {
minimize: false
},
module: {
rules: [
{
enforce: "pre",
test: /.ts$/,
use: "source-map-loader"
},
{
test: /\.css$/i,
use: [{
loader: "css-loader",
options: {
sourceMap: true
}
}]
},
{
test: /\.less$/i,
use: [{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true
}
}]
},
{
test: /\.ts$/i,
use: "ts-loader"
},
{
test: /\.html$/i,
use: "html-loader"
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
name: 'fonts/[name].[ext]'
}
}]
},
{
test: /\.(eot|svg|ttf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'file-loader'
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
}),
new AureliaPlugin()
]
};
还有我的package.json：
{
"name": "ts-webpack-starter",
"version": "1.0.0",
"main": "index.js",
"author": "Benny Halperin",
"license": "MIT",
"scripts": {
"lint": "tslint src/**/*.ts",
"watch": "yarn webpack-dev-server --config webpack.dev.js --hot --inline --progress",
"_watch": "webpack-dashboard webpack-dev-server --config webpack.dev.js --hot --inline --progress",
"build:prod": ""
},
"devDependencies": {
"@types/jasmine": "^2.8.6",
"aurelia-testing": "^1.0.0-beta.4.0.0",
"aurelia-webpack-plugin": "^3.0.0-rc.1",
"awesome-typescript-loader": "^5.0.0",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jasmine": "^3.1.0",
"jasmine-core": "^3.1.0",
"jasmine-ts": "^0.2.1",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-headless-chrome-launcher": "^0.0.6",
"karma-jasmine": "^1.1.1",
"karma-phantomjs-launcher": "^1.0.4",
"karma-typescript": "^3.0.12",
"karma-webpack": "^3.0.0",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"source-map-loader": "^0.2.3",
"style-loader": "^0.20.3",
"ts-loader": "^4.2.0",
"tslib": "^1.9.0",
"tslint": "^5.9.1",
"typescript": "^2.8.1",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dashboard": "^1.1.1",
"webpack-dev-server": "^3.1.2",
"webpack-merge": "^4.1.2"
},
"dependencies": {
"aurelia-bootstrap": "^0.1.20",
"aurelia-bootstrapper": "^2.2.0",
"aurelia-fetch-client": "^1.3.1",
"aurelia-framework": "^1.2.0",
"aurelia-google-maps": "^2.2.1",
"bootstrap": "^4.0.0",
"firebase": "^4.12.1",
"font-awesome": "^4.7.0"
}
}
您可以尝试将 aurelia-loader 安装为明确的依赖项。不过通常不需要。我个人喜欢显式安装所有 aurelia 依赖项。当然有 20 个，但你多久看一次 package.json 无论如何..
我注意到的其他一些潜在问题：
很确定你不应该在你的 webpack 配置中引用 main.ts。这是典型的入门配置：
entry: {
app: ["aurelia-bootstrapper"],
vendor: ["bluebird"]
},
aurelia-bootstrapper 将根据 index.html 中的 aurelia-app 属性找到您的 main.ts。 aurelia-webpack-plugin 将确保它包含在内。 Vendor 可能会或可能不会完全省略（实际上不确定 webpack 插件是否明确寻找这个），但应用程序应该是 aurelia-bootstrapperafaik.
我也看到你没有安装蓝鸟。也许 firebase 已经包含了 promises，但你可能想要保留 bluebird 无论如何（如果大小是一个问题，可以选择 .core 变体）。那里没有 better performing promise 库（Aurelia 在项目模板中有它是有充分理由的）
使用 Aurelia latest 和 webpack，运行ning npm run watch，我在浏览器中收到以下错误并且应用程序无法加载：
Uncaught (in promise) No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app
我认为平台（来自 aurelia-pal）由于某种原因在 运行 时间不可用。以下是我希望足以理解问题所在的信息。
这是我的 webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { AureliaPlugin, ModuleDependenciesPlugin } = require("aurelia-webpack-plugin");
const optimize = webpack.optimize;
module.exports = {
entry: {
main: "./src/main.ts",
vendor: [ "aurelia-bootstrapper" ]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
resolve: {
extensions: [".ts", ".js"],
modules: ["src", "node_modules"].map(x => path.resolve(x))
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
// serve index.html for all 404 (required for push-state)
historyApiFallback: true
},
mode: "development",
devtool: "inline-source-map",
optimization: {
minimize: false
},
module: {
rules: [
{
enforce: "pre",
test: /.ts$/,
use: "source-map-loader"
},
{
test: /\.css$/i,
use: [{
loader: "css-loader",
options: {
sourceMap: true
}
}]
},
{
test: /\.less$/i,
use: [{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true
}
}]
},
{
test: /\.ts$/i,
use: "ts-loader"
},
{
test: /\.html$/i,
use: "html-loader"
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
name: 'fonts/[name].[ext]'
}
}]
},
{
test: /\.(eot|svg|ttf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'file-loader'
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
}),
new AureliaPlugin()
]
};
还有我的package.json：
{
"name": "ts-webpack-starter",
"version": "1.0.0",
"main": "index.js",
"author": "Benny Halperin",
"license": "MIT",
"scripts": {
"lint": "tslint src/**/*.ts",
"watch": "yarn webpack-dev-server --config webpack.dev.js --hot --inline --progress",
"_watch": "webpack-dashboard webpack-dev-server --config webpack.dev.js --hot --inline --progress",
"build:prod": ""
},
"devDependencies": {
"@types/jasmine": "^2.8.6",
"aurelia-testing": "^1.0.0-beta.4.0.0",
"aurelia-webpack-plugin": "^3.0.0-rc.1",
"awesome-typescript-loader": "^5.0.0",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jasmine": "^3.1.0",
"jasmine-core": "^3.1.0",
"jasmine-ts": "^0.2.1",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-headless-chrome-launcher": "^0.0.6",
"karma-jasmine": "^1.1.1",
"karma-phantomjs-launcher": "^1.0.4",
"karma-typescript": "^3.0.12",
"karma-webpack": "^3.0.0",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"source-map-loader": "^0.2.3",
"style-loader": "^0.20.3",
"ts-loader": "^4.2.0",
"tslib": "^1.9.0",
"tslint": "^5.9.1",
"typescript": "^2.8.1",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dashboard": "^1.1.1",
"webpack-dev-server": "^3.1.2",
"webpack-merge": "^4.1.2"
},
"dependencies": {
"aurelia-bootstrap": "^0.1.20",
"aurelia-bootstrapper": "^2.2.0",
"aurelia-fetch-client": "^1.3.1",
"aurelia-framework": "^1.2.0",
"aurelia-google-maps": "^2.2.1",
"bootstrap": "^4.0.0",
"firebase": "^4.12.1",
"font-awesome": "^4.7.0"
}
}
您可以尝试将 aurelia-loader 安装为明确的依赖项。不过通常不需要。我个人喜欢显式安装所有 aurelia 依赖项。当然有 20 个，但你多久看一次 package.json 无论如何..
我注意到的其他一些潜在问题：
很确定你不应该在你的 webpack 配置中引用 main.ts。这是典型的入门配置：
entry: {
app: ["aurelia-bootstrapper"],
vendor: ["bluebird"]
},
aurelia-bootstrapper 将根据 index.html 中的 aurelia-app 属性找到您的 main.ts。 aurelia-webpack-plugin 将确保它包含在内。 Vendor 可能会或可能不会完全省略（实际上不确定 webpack 插件是否明确寻找这个），但应用程序应该是 aurelia-bootstrapperafaik.
我也看到你没有安装蓝鸟。也许 firebase 已经包含了 promises，但你可能想要保留 bluebird 无论如何（如果大小是一个问题，可以选择 .core 变体）。那里没有 better performing promise 库（Aurelia 在项目模板中有它是有充分理由的）