如何解决Angular 2 - Base64 404资源未找到错误?

时间:2016-10-11 15:42:54

标签: angular

执行新的npm install后,系统崩溃了。我收到错误说" 404 Resourse not found。"

我尝试过以下内容,但没有帮助......

  • 删除了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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您可能需要在system.config.js中为js-base64添加映射,例如:

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