NetworkError：404 Not Found - http：// localhost：7649/node_modules/@angular/platform-b​​rowser-dynamic/bundles/platform-b​​rowser-dynamic.umd.js

Question

我在使用angular2和asp時遇到了一個問題。 net core mvc項目。 我在我的佈局頁以下

<script src="~/lib/core-js/shim.js"></script> 
 
    <script src="~/lib/zone.js/zone.js"></script> 
 
    <script src="~/lib/reflect-metadata/reflect.js"></script> 
 
    <script src="~/lib/systemjs/system.src.js"></script> 
 

 

 
    <script src="~/lib/jquery/dist/jquery.js"></script> 
 
    <script src="~/js/systemjs.config.js"></script> 
 

 
    <script> 
 
     System.import('app').catch(function(err){console.error(err + ' no idea what is going on')}) 
 
    </script>

我用下面的一口到角文件複製到wwwroot文件夾。

/* 
 
This file in the main entry point for defining Gulp tasks and using Gulp plugins. 
 
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007 
 
*/ 
 

 
var gulp = require('gulp'); 
 
var libs = './wwwroot/lib/'; 
 

 

 
gulp.task('restore:core-js', function() { 
 
    gulp.src([ 
 
     'node_modules/core-js/client/*.js' 
 
    ]).pipe(gulp.dest(libs + 'core-js')); 
 
}); 
 

 
gulp.task('restore:zone.js', function() { 
 
    gulp.src([ 
 
     'node_modules/zone.js/dist/*.js' 
 
    ]).pipe(gulp.dest(libs + 'zone.js')); 
 
}); 
 

 
gulp.task('restore:reflect-metadata', function() { 
 
    gulp.src([ 
 
     'node_modules/reflect-metadata/reflect.js' 
 
    ]).pipe(gulp.dest(libs + 'reflect-metadata')); 
 
}); 
 

 
gulp.task('restore:systemjs', function() { 
 
    gulp.src([ 
 
     'node_modules/systemjs/dist/*.js' 
 
    ]).pipe(gulp.dest(libs + 'systemjs')); 
 
}); 
 

 
gulp.task('restore:rxjs', function() { 
 
    gulp.src([ 
 
     'node_modules/rxjs/**/*.js' 
 
    ]).pipe(gulp.dest(libs + 'rxjs')); 
 
}); 
 

 
gulp.task('restore:angular-in-memory-web-api', function() { 
 
    gulp.src([ 
 
     'node_modules/angular-in-memory-web-api/**/*.js' 
 
    ]).pipe(gulp.dest(libs + 'angular-in-memory-web-api')); 
 
}); 
 

 
gulp.task('restore:angular', function() { 
 
    gulp.src([ 
 
     'node_modules/@angular/**/*.js' 
 
    ]).pipe(gulp.dest(libs + '@angular')); 
 
}); 
 

 
gulp.task('default', function() { 
 
    // place code for your default task here 
 
}); 
 

 
gulp.task('restore:bootstrap', function() { 
 
    gulp.src([ 
 
     'node_modules/bootstrap/dist/**/*.*' 
 
    ]).pipe(gulp.dest(libs + 'bootstrap')); 
 
}); 
 

 
gulp.task('restore', [ 
 
    'restore:core-js', 
 
    'restore:zone.js', 
 
    'restore:reflect-metadata', 
 
    'restore:systemjs', 
 
    'restore:rxjs', 
 
    'restore:angular-in-memory-web-api', 
 
    'restore:angular', 
 
    'restore:bootstrap' 
 
]);

我systemjs.config.js如下：

(function (global) { 
 
    System.config({ 
 
     paths: { 
 
      'npm:': 'node_modules/' 
 
     }, 
 
     map: { 
 
      app: 'app', 
 

 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
 
      //'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
 

 
      'rxjs': 'npm:rxjs', 
 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api' 
 
     }, 
 

 
     packages: { 
 
      app: { 
 
       main: './main.js', 
 
       defaultExtension: 'js' 
 
      }, 
 
      rxjs: { 
 
       defaultExtension: 'js' 
 
      }, 
 
      'angular-in-memory-web-api': { 
 
       main: './index.js', 
 
       defaultExtension: 'js' 
 
      } 
 
     } 
 
    }); 
 
})(this);

和的package.json如下所示

{ 
 
    "version": "1.0.0", 
 
    "name": "asp.net", 
 
    "private": true, 
 
    "dependencies": { 
 
    "@angular/common": "^4.0.1", 
 
    "@angular/compiler": "^4.0.1", 
 
    "@angular/core": "^4.0.1", 
 
    "@angular/forms": "^4.0.1", 
 
    "@angular/http": "^4.0.1", 
 
    "@angular/platform-browser": "^4.0.1", 
 
    "@angular/platform-browser-dynamic": "^4.0.1", 
 
    "@angular/router": "^4.0.1", 
 
    "@angular/upgrade": "^4.0.1", 
 
    "angular-in-memory-web-api": "^0.3.1", 
 
    "core-js": "^2.4.1", 
 
    "reflect-metadata": "^0.1.10", 
 
    "rxjs": "^5.3.0", 
 
    "systemjs": "^0.20.12", 
 
    "zone.js": "^0.8.5" 
 
    }, 
 
    "devDependencies": { 
 
    "concurrently": "^3.4.0", 
 
    "gulp": "3.9.1", 
 
    "typescript": "^2.2.2" 
 
    }, 
 
    "scripts": { 
 
    "start": "tsc && concurrently \"npm run tsc:w\"npm run lite\" ", 
 
    "lite": "lite-server", 
 
    "postinstall": "typings install", 
 
    "tsc": "tsc", 
 
    "tsc:w": "tsc -w", 
 
    "typings": "typings"  
 
    } 
 
}

而且tsconfig.json如下圖所示：

{ 
 
    "compilerOptions": { 
 
    "target": "es2015", 
 
    "module": "commonjs", 
 
    "moduleResolution": "node", 
 
    "sourceMap": true, 
 
    "emitDecoratorMetadata": true, 
 
    "experimentalDecorators": true, 
 
    "removeComments": false, 
 
    "noImplicitAny": false, 
 
    "rootDir": "app", 
 
    "outDir": "wwwroot/app" 
 
    }, 
 
    "compileOnSave": true, 
 
    "exclude": [ 
 
    "node_modules", 
 
    "wwwroot" 
 
    ] 
 
}

最後我typings.json是

{ 
 
    "globalDependencies": { 
 
    "core-js": "registry:dt/core-js#0.9.0+20170324193834", 
 
    "node": "registry:dt/node#7.0.0+20170322231424" 
 
    } 
 
}

我使用打字稿v 2.2.2.0

任何建議表示讚賞。

Answer 1

它看起來像你正在將你的@angular庫從node_modules文件夾移動到wwwroot/libs。

我建議您在systemjs.config.js改變這個：

paths: { 
    'npm:': 'libs/' 
}, 

這將解決您的@angular依賴性。如果要將節點包移動到「libs /」以外的文件夾，則可能需要添加另一個路徑。