我尝试在Firebase上部署angular2应用程序。我已经关注this指南但是当我输入firebase open
时出现错误(见下文)。
这是我的应用程序的结构
\root
\ app
\ assets
\ dev
\ node_modules
\ public
\ src
\ typings
index.html
firebase.json
gulpfile.js
package.json
tsconfig.json
typings.json
我已将所有文件放在我的app
文件夹中(他们的.js
个文件,这些文件来自.ts
文件夹内的dev
文件夹)在公共文件夹内。我也在公共文件夹中复制了index.html文件。
所以现在公用文件夹结构是:
\public
\app
|-> app.component.js
|-> boot.js
|-> other .js files
index.html
这是index.html:
<html>
<head>
<base href="/">
<title>Angular 2 Boilerplate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
我的firebase.json是这样的:
{
"firebase": "wetta",
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
Google Chrome控制台shows is: (index):24 Uncaught ReferenceError: System is not defined
我是朝着正确的方向前进的吗?导致此错误的原因是什么?
答案 0 :(得分:3)
问题的根本原因是index.html的脚本想要调用
<强> System.config(... 强>
但是在
中定义的System对象<script src="node_modules/systemjs/dist/system.src.js"></script>
未加载,因为在您的firebase.json中,您忽略了 / node_modules / 的规则,并且系统.src.js未上传到Firebase服务器上。
从node_modules上传所有内容是不切实际的,因为有很多文件可以使用。
我能够通过以下步骤解决问题: