Question

我收到了这个

[error]

我在另一台主机上有一个网站，它的工作非常好。但我也想在github pages上传。用于测试和其他原因。但是当我上传我的angular2 webapp时，我得到了上述错误。我们是否需要为页面做任何特殊设置？

的index.html

<html>
  <head>
    <title>Smit Shah</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Smit Shah">
      <link rel="icon" href="app/img/smitico.ico">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Gruppo" rel="stylesheet">
    <!-- 1. Load libraries -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
 <body class="indexStyle">
    <my-app></my-app>
  </body>
</html>

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

的package.json

{
  "name": "smit-web",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/router": "~3.4.1",
    "@angular/upgrade": "~2.4.1",
    "angular-in-memory-web-api": "~0.2.2",
    "angular2-bootstrap-confirm": "^1.0.4",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.1",
    "systemjs": "0.19.41",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

我尝试过提供更多信息。如果还有什么让我知道。感谢。

这里是github pages url。

Answer 1

首先，您需要确保所有文件都没有gitignore。或者从gitignore中删除以下项目。
1. node_modules
2. *。JS
3. **。map.js 4 ..和任何相关的事情。

因为在gh-pages上部署时，它不会为您安装任何npm软件包。

其次，默认情况下，Jekyll不会构建node_modules文件夹，因此您需要将一个名为.nojekyll的空文件添加到存储库的根目录以跳过该构建。这将包括未来版本中的node_modules文件夹。

DONE！它应该像在本地设置中一样完美。

<强>更新对于pathLocationStrategy用户：

更改

<base href="/">

到

<base href="/<app-name>/">

* app-name是存储库名称

Answer 2

我将agular2示例应用程序部署到github gh-pages 这里尝试按照这些步骤进行操作。

在git上删除你的gh-pages分支。

2017 07 06 23:30:00 - 2017 07 07 01:30:00 - Should return 2 hours.

将此angular-cli依赖项安装到您的项目
```
 git branch -D gh-pages
```
构建您的项目以进行部署
```
 npm install --save   @angular/cli
```

如果编译时遇到问题，请在app.module.ts文件中替换此代码

 ng build --prod--aot --base-href "https://<username>.github.io/<repo-name>/"

到

 "environments": {
     "source": "environments/environment.ts",
     "dev": "environments/environment.ts",
     "prod": "environments/environment.prod.ts"
   }

成功编译后（100％）只需运行此命令即可部署到gh-pahes

 "environmentSource": "environments/environment.ts",
           "environments": {
                   "dev": "environments/environment.ts",
                   "prod": "environments/environment.prod.ts"
            }

无法上传Angular2应用程序gh页面

2 个答案: