2016-07-05 68 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