加载节点模块失败

时间：2017-09-18 16:28:46

标签： javascript node.js asp.net-mvc angular typescript

我使用Angular 2在Visual Studio 2017中创建了一个ASP.NET MVC项目， 安装节点。

的package.json 

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "webpack-script": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "webpack-script"
    ]
  },
  "devDependencies": {
    "bootstrap": "^4.0.0-beta",
    "clean-webpack-plugin": "^0.1.16",
    "imports-loader": "^0.7.1",
    "jquery": "^2.2.4",
    "popper.js": "^1.12.5",
    "ts-loader": "^2.3.5",
    "typescript": "^2.5.2",
    "webpack": "^3.5.6",
    "concurrently": "2.2.0",
    "systemjs-builder": "0.15.32",
    "json-server": "0.8.21",
    "jsonwebtoken": "7.1.9"
  },
  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/compiler-cli": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/platform-server": "^4.3.6",
    "@angular/router": "^4.3.6",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.4",
    "reflect-metadata": "^0.1.10",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4",
    "core-js": "^2.4.1",
    "classlist.js": "^1.1.20150312",
    "systemjs": "0.19.40",
    "bootstrap": "^4.0.0-beta",
    "font-awesome": "^4.7.0",
    "intl": "^1.2.5",
    "html5-history-api": "^4.2.8",
    "file-loader": "^0.11.2",
    "css-loader": "^0.28.7",
    "jquery": "^2.2.4",
    "popper": "^1.0.0",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.6"
  }
}

systemjs.config.js 

(function (global) {
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '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' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [ // <-----
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    };
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    }
    System.config(config);
})(this);

在我添加的头部中的_Layout.cshtml 

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<title>@ViewData["Title"] - LanguageSchool.Web</title>

<environment include="Development">
    <script src=@Url.Content("~/node_modules/html5-history-api/history.min.js")></script>
    <script src="./node_modules/classlist.js/classList.min.js"></script>
    <script src="./node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/intl/dist/Intl.complete.js"></script>
    <script src="node_modules/zone.js/dist/zone.min.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="./node_modules/systemjs/dist/system.src.js"></script>
    <script src="rxjs.module.min.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import("app/main").catch(function (err) { console.error(err); });
    </script>
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet" />
    <link href="node_modules/font-awesome/css/font-awesome.min.css"
          rel="stylesheet" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

但是当我尝试加载页面时，我遇到了一些错误：

  

使用来源加载失败   “https://localhost:44341/node_modules/html5-history-api/history.min.js”。   localhost：44341：10 with source的加载失败   “https://localhost:44341/node_modules/classlist.js/classList.min.js”。   localhost：44341：11 with source的加载失败   “https://localhost:44341/node_modules/core-js/client/shim.min.js”。   localhost：44341：12 with source的加载失败   “https://localhost:44341/node_modules/intl/dist/Intl.complete.js”。   localhost：44341：13 with source的加载失败   “https://localhost:44341/node_modules/zone.js/dist/zone.min.js”。   localhost：44341：14 with source的加载失败   “https://localhost:44341/node_modules/reflect-metadata/Reflect.js”。   localhost：44341：15 with source的加载失败   “https://localhost:44341/node_modules/systemjs/dist/system.src.js”。   localhost：44341：16 with source的加载失败   “https://localhost:44341/rxjs.module.min.js”。本地主机：44341：17   with source的加载失败   “https://localhost:44341/systemjs.config.js”。

更新 main.ts 

window["$"] = window["jQuery"] = require("jquery");

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule).
    then(success => console.log('Bootstrap success')).
    catch(error => console.log(error));

app.modules.ts 

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.components.ts 

import { Component } from "@angular/core";

@Component({
    selector: "app",
    template: `<div class="bg-success p-a-1 text-xs-center">
This is SportsStore
</div>`
})
export class AppComponent { }

1 个答案:

答案 0 :(得分：0)

查看您设置的源路径。您的编译器找不到这些文件。 你没有正确设置它们。

 <script src=@Url.Content("~/node_modules/html5-history-api/history.min.js")></script>
<script src="./node_modules/classlist.js/classList.min.js"></script>
<script src="./node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/intl/dist/Intl.complete.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="./node_modules/systemjs/dist/system.src.js"></script>
<script src="rxjs.module.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
    System.import("app/main").catch(function (err) { console.error(err); });
</script>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet" />
<link href="node_modules/font-awesome/css/font-awesome.min.css"
      rel="stylesheet" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
相关问题
最新问题