Angular2 System.js 找不到 jspm 包
Angular2 System.js can't find jspm packages
我正在尝试编写一个简单的 Angular2(使用 Alpha 47)应用程序,并且我正在尝试从 jspm 安装 "npm guid"。它安装正常,但是当我尝试 运行 应用程序时,我总是得到 "GET http://localhost:3001/jspm_packages/npm/guid@0.0.12 404 (Not Found)"。我也尝试过加载其他包,他们也提供了 404。否则我的 angular2 应用程序工作正常。我不确定我做错了什么。任何帮助将非常感激!谢谢!
System.js 配置文件
System.config({
baseURL: "/",
transpiler: "none",
paths: {
"npm:*": "jspm_packages/npm/*",
"github:*": "jspm_packages/github/*"
},
packages: {
"app": {
"defaultExtension": "js"
}
},
map: {
"guid": "npm:guid@0.0.12"
}
});
index.html
<html>
<head>
<title>Office Contacts</title>
<link rel="stylesheet" href="app/styles/foundation.css">
<script src="jspm_packages/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="config.js"></script>
<base href="/">
<script>
System.import('app/release/bootstrap');
</script>
<script src="node_modules/es6-shim/es6-shim.js"></script>
</head>
<body>
<app>Loading...</app>
</body>
</html>
我的bootstrap.ts文件
//
// ANGULAR PROVIDERS
//
import {bootstrap, provide, FORM_PROVIDERS} from 'angular2/angular2';
import {ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ContactsService} from './contacts.service';
import {guid} from 'guid';
//
// APP COMPONENT
// Top level component that holds all of our components
//
import {App} from './app';
//
// BOOTSTRAP
// Bootstrap our app with the top level component and
// inject services and providers
//
bootstrap(App, [
FORM_PROVIDERS,
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
ContactsService,
guid,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
您使用的是 Alpha 53 吗?如果是这样:
他们摆脱了 'angular2/angular2'。您现在必须使用 'angular2/bootstrap'、'angular2/core' 导入。
我实际上遇到了一个潜在的类似问题,其中 'angular2/bootstrap' 没有正确导入 SystemJS。
我看到你只为 app
添加了 "defaultExtension": "js"
扩展程序有问题,您是否尝试将 link 复制到您的浏览器 http://localhost:3001/jspm_packages/npm/guid@0.0.12
,然后添加 .js
以查看它是否加载。
试试这个
System.config({
map: { npm: 'jspm_packages/npm/' },
packages: {
npm: { defaultExtension: 'js' },
'app': {defaultExtension: 'js'}
}
});
我正在尝试编写一个简单的 Angular2(使用 Alpha 47)应用程序,并且我正在尝试从 jspm 安装 "npm guid"。它安装正常,但是当我尝试 运行 应用程序时,我总是得到 "GET http://localhost:3001/jspm_packages/npm/guid@0.0.12 404 (Not Found)"。我也尝试过加载其他包,他们也提供了 404。否则我的 angular2 应用程序工作正常。我不确定我做错了什么。任何帮助将非常感激!谢谢!
System.js 配置文件
System.config({
baseURL: "/",
transpiler: "none",
paths: {
"npm:*": "jspm_packages/npm/*",
"github:*": "jspm_packages/github/*"
},
packages: {
"app": {
"defaultExtension": "js"
}
},
map: {
"guid": "npm:guid@0.0.12"
}
});
index.html
<html>
<head>
<title>Office Contacts</title>
<link rel="stylesheet" href="app/styles/foundation.css">
<script src="jspm_packages/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="config.js"></script>
<base href="/">
<script>
System.import('app/release/bootstrap');
</script>
<script src="node_modules/es6-shim/es6-shim.js"></script>
</head>
<body>
<app>Loading...</app>
</body>
</html>
我的bootstrap.ts文件
//
// ANGULAR PROVIDERS
//
import {bootstrap, provide, FORM_PROVIDERS} from 'angular2/angular2';
import {ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ContactsService} from './contacts.service';
import {guid} from 'guid';
//
// APP COMPONENT
// Top level component that holds all of our components
//
import {App} from './app';
//
// BOOTSTRAP
// Bootstrap our app with the top level component and
// inject services and providers
//
bootstrap(App, [
FORM_PROVIDERS,
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
ContactsService,
guid,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
您使用的是 Alpha 53 吗?如果是这样: 他们摆脱了 'angular2/angular2'。您现在必须使用 'angular2/bootstrap'、'angular2/core' 导入。
我实际上遇到了一个潜在的类似问题,其中 'angular2/bootstrap' 没有正确导入 SystemJS。
我看到你只为 app
"defaultExtension": "js"
扩展程序有问题,您是否尝试将 link 复制到您的浏览器 http://localhost:3001/jspm_packages/npm/guid@0.0.12
,然后添加 .js
以查看它是否加载。
试试这个
System.config({
map: { npm: 'jspm_packages/npm/' },
packages: {
npm: { defaultExtension: 'js' },
'app': {defaultExtension: 'js'}
}
});