2016-07-05 72 views
1

應用程序加載時出現以下錯誤。無法加載@ angular/platform-b​​rowser-dynamic

http://localhost:49769/node_modules/@angular/platform-browser-dynamic/index.js Failed to load resource: the server responded with a status of 404 (Not Found) 
localhost/:21 Error: Error: XHR error (404 Not Found) loading http://localhost:49769/node_modules/@angular/platform-browser-dynamic/index.js 
     at XMLHttpRequest.wrapFn [as _onreadystatechange] (https://npmcdn.com/[email protected]?main=browser:769:30) 
     at ZoneDelegate.invokeTask (https://npmcdn.com/[email protected]?main=browser:356:38) 
     at Zone.runTask (https://npmcdn.com/[email protected]?main=browser:256:48) 
     at XMLHttpRequest.ZoneTask.invoke (https://npmcdn.com/[email protected]?main=browser:423:34) 
    Error loading http://localhost:49769/node_modules/@angular/platform-browser-dynamic/index.js as "@angular/platform-browser-dynamic" from http://localhost:49769/app/main.js(anonymous function) @ localhost/:21 
http://localhost:49769/node_modules/@angular/core/index.js Failed to load resource: the server responded with a status of 404 (Not Found) 

請在我的項目中找到放置config和.ts文件的文件夾結構。請驗證文件是否被放置在正確的文件夾enter image description here

的package.json

{ 
    "name": "Testing", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "lint": "tslint ./app/**/*.ts -t verbose", 
    "lite": "lite-server", 
    "typings": "typings", 
    "postinstall": "typings install" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.2", 

    "systemjs": "0.19.27", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12", 

    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "tslint": "^3.7.4", 
    "typescript": "^1.8.10", 
    "typings": "^1.0.4" 
    }, 
    "repository": { } 
} 

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', 
     'rxjs': 'node_modules/rxjs', 
     '@angular': 'node_modules/@angular' 

    }; 

    // 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' }, 

     '@angular/common': { defaultExtension: 'js', main: 'index.js' }, 
     '@angular/compiler': { defaultExtension: 'js', main: 'index.js' }, 
     '@angular/core': { defaultExtension: 'js', main: 'index.js' }, 
     '@angular/http': { defaultExtension: 'js', main: 'index.js' }, 
     '@angular/platform-browser': { defaultExtension: 'js', main: 'index.js' }, 
     '@angular/platform-browser-dynamic': { defaultExtension: 'js', main: 'index.js' }, 
     '@angular/router': { defaultExtension: 'js', main: 'index.js' }, 

    }; 

    var packageNames = [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/forms', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router' 
    ]; 

    // add package entries for angular packages in the form 
    // '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    packageNames.forEach(function (pkgName) { 
     packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

    var config = { 
     map: map, 
     packages: packages 
    }; 

    System.config(config); 

})(this); 

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es6", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    } 
} 

爲什麼應用程序無法在node_modules下載入platform-b​​rowser-dynamic?我驗證了文件存在於指定的文件夾下,仍然出現此錯誤。

注:儘管NPM /依賴性文件夾說,「不安裝」,但我可以展開文件夾,並注意到所有的引用是否正確安裝,但仍顯示此錯誤/警告消息

+0

有你嘗試重新啓動IDE? – maxisam

+0

多次嘗試,沒有用...其他建議? – Krishnan

+0

嘗試吹走整個node_modules目錄並再次運行'npm install'。如果它仍然存在,請在角色團隊的github頁面上提交錯誤報告。你的配置文件和package.json對我來說看起來很好,所以不清楚發生了什麼事情,很難在不復制你的環境的情況下重現問題。 – BrianRT

回答

3

你無法從wwwroot導入node_modules,但您必須複製wwwroot中的目標文件夾中的軟件包,例如通過gulp,然後通過systemjs.config.js從那裏導入它們。 在wwwroot中的位置是正確的。

我建議你遵循了幾個例子,像這樣:https://github.com/ajtowf/aspnetcore-angular2-seed