无法上传 Angular2 应用程序 gh-pages

Question

我收到这个

我在我的另一台主机上有一个网站，它工作得很好。但我也想在 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 页 url。

Answer 1

首先，你需要确保你拥有所有意味着没有gitignore的文件。或者从 gitignore 中删除以下项目。
1. node_modules
2. *.js
3. **.map.js 4.. 以及任何相关的东西。

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

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

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

更新对于 pathLocationStrategy 用户：

改变

<base href="/">

到

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

*app-name 是存储库名称

Answer 2

我将 agular2 示例应用程序部署到 github gh-pages 请尝试按照以下步骤操作。

删除 git 上的 gh-pages 分支。
```
 git branch -D gh-pages
```
将此 angular-cli 依赖项安装到您的项目
```
 npm install --save   @angular/cli
```

为部署构建项目

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

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

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

到

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

编译成功后(100%)只需运行这条命令部署到gh-pahes
```
      ngh --message "Deploy gh pages"
```

无法上传 Angular2 应用程序 gh-pages

Unable to upload Angular2 application gh-pages

github

github-pages

angular