如何解决 Angular 2 - Base64 404 Resource not found 错误？答案

【问题标题】：How to resolve Angular 2 - Base64 404 Resource not found Error?如何解决 Angular 2 - Base64 404 Resource not found 错误？
【发布时间】：2017-02-20 05:36:27
【问题描述】：

做了一个新鲜的npm install之后，系统坏了。我收到一条错误消息，提示“找不到 404 资源”。

我尝试了以下方法，但没有帮助...

删除了 node_modules 和 typings 文件夹，后跟“npm install”。
已将依赖项和 devDependencies 更新到最新版本和
从版本号中删除了“^”前缀，后跟“npm install”。
尝试在 index.html 和/或 systemjs.config.js 中添加 base64 引用

http://localhost:3000/js-base64

我的 package.json 文件如下所示，

"dependencies": {
"@angular/common": "2.0.2",
"@angular/compiler": "2.0.2",
"@angular/core": "2.0.2",
"@angular/forms": "2.0.2",
"@angular/http": "2.0.2",
"@angular/platform-browser": "2.0.2",
"@angular/platform-browser-dynamic": "2.0.2",
"@angular/router": "3.0.2",
"@angular/upgrade": "2.0.2",
"angular2-jwt": "^0.1.24",
"auth0-lock": "^10.4.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"metismenu": "^2.5.2",
"moment": "^2.15.1",
"ng2-fontawesome": "0.0.6",
"ng2-toasty": "2.1.0",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-rc.1",
"systemjs": "0.19.39",
"typings": "1.4.0",
"zone.js": "0.6.25"},

"devDependencies": {
"gulp": "3.9.1",
"gulp-clean": "0.3.2",
"gulp-concat": "2.6.0",
"gulp-less": "3.1.0",
"gulp-sourcemaps": "2.0.0",
"gulp-typescript": "3.0.2",
"gulp-uglify": "2.0.0",
"concurrently": "3.1.0",
"lite-server": "2.2.2",
"tslint": "3.15.1",
"typescript": "2.0.3"}

我的 tsconfig.js 如下所示，

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

我的 system.config.js 如下所示，

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    '@angular':                   'node_modules/@angular',
    'angular2-jwt':               'node_modules/angular2-jwt/angular2-jwt.js',
    'ng2-toasty':                 'node_modules/ng2-toasty',
    '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' },
    'angular2-jwt':               { defaultExtension: 'js' },
    'ng2-toasty':                 { main: 'index.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' }
  };

我的 index.html 文件如下所示，

<!-- 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>

<!-- Auth0 Lock script -->
<script src="http://cdn.auth0.com/js/lock/10.0.0/lock.min.js"></script>

<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err);  });
</script>

Error while loading Angular 2 SPA

【问题讨论】：

您找到解决方案了吗？我正在使用 Angular-cli 并想解决同样的问题（在我升级到新版本之前它工作正常）

标签： angular

【解决方案1】：

我有一个类似的问题，在我的情况下，它似乎是 angular2-jwt 加载 js-base64。我似乎无法弄清楚如何纠正这个问题。但是，我也遇到了可能相关的问题。 https://auth0.com/forum/t/angular2-jwt-unexpected-token-syntax-error-from-system-config/1807

【讨论】：

【解决方案2】：

您可能需要在 system.config.js 中添加 js-base64 的映射，例如：

var map = {
    ...
    'js-base64': 'node_modules/js-base64/base64.js'
    ...
};

【讨论】：