使用基本 href 从不同的子目录提供 angular2
Serving angular2 from different subdirectory with base href
我正在使用 dotnet 核心在不同的子目录中提供独立的 angular 应用程序。看到这件事在行动真是太棒了，但我 运行 陷入了我不明白的事情中。
我的应用在这里：
wwwroot/
pap/
admin/
boot.ts
admin.component.ts
此应用的 MVC 路由是 /pap/admin/。在这种情况下，我希望 Angular2 路由有两种工作方式。第一个是构建我所有的 Angular 路由以匹配 MVC 路由。这行得通，但感觉很便宜。第二种方法是像这样设置基本标签：
<base href="/pap/admin/">
这两种方式都允许我独立使用服务器端和客户端路由，而无需在每条路由前添加 /panel/admin/。例如，
@RouteConfig([
{ path: '/menu', name: 'Menu', component: MenuComponent, useAsDefault: true },
{ path: '/panels/:id', name: 'Panel', component: PanelComponent }
])
我的问题是 SystemJS。我试验过、阅读过、搜索过，但我仍然不知道发生了什么。在快速入门中，Angular 库包含在脚本标签中。如果我理解正确的话，应用程序不需要被告知 Angular 和 Rxjs 要从哪里加载，因为它们已经包含在文档中了。
这些库位于 node_modules 中，并且就像它们位于 wwwroot/ 中一样提供服务。有了 ，我的应用程序自然会开始在 /pap/admin/angular2/ 中查找文件，而不是它们所在的位置。如果我使用这个配置，
System.config({
baseURL: '/',
defaultJSExtensions: true,
packages: {
format: 'register',
'pap/admin': { defaultExtension: 'js' }
}
});
System.import('/pap/admin/admin.boot.js')
.then(null, console.error.bind(console));
然后从
开始寻找我导入的所有东西，整个事情就爆炸了
import {bootstrap} from 'angular2/platform/browser';
它在根目录（wwwroot 或 http://localhost:5000/angular2/platform/browser.js）而不是 /node_modules/angular2/ 中查找它。这对我来说很有意义，虽然我不完全理解为什么它不使用我在脚本标签中加载的库。
如果我使用
System.config({
baseURL: '/node_modules/',
defaultJSExtensions: true,
packages: {
format: 'register',
'pap/admin': { defaultExtension: 'js' }
},
});
System.import('/pap/admin/admin.boot.js')
.then(null, console.error.bind(console));
应用程序栩栩如生。即使我从脚本标签中删除库，它也会这样做。当然，SystemJS 现在知道如果我从 'angular2/core' 导入某些东西，它可以在 /node_modules/ 中查找它。这里的缺点是，就初始而言，性能明显较慢。检查 dotnet core 的输出，我可以看到它正在加载这些库中的每个文件。糟糕。
我想如果我使用 baseURL: '/' 并将 Angular 位映射到它们所在的位置，一切都会好起来的，
map: { angular2: '/node_modules/angular2/' }
但结果是一样的；每最后一块都已加载。
还有一件事……SystemJS 说他们很快就会摆脱 defaultJSExtensions，但是一旦我添加并开始讨论 System.config 部分，没有它就无法工作。
如果有任何具有 SystemJS 经验或在新的 dotnet 核心内容之上构建经验的人提供一些指导，我将不胜感激。
编辑 1
我尝试开始使用 jspm，但正如我在下面评论的那样，要么我在做一些疯狂的事情，要么确实如此。这是我的 config.js 在 运行 之后只有 jspm install angular2:
System.config({
defaultJSExtensions: true,
transpiler: "typescript",
typescriptOptions: {
"module": "commonjs",
"emitDecoratorMetadata": true
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular2": "npm:angular2@2.0.0-beta.9",
"core-js": "npm:core-js@1.2.6",
"typescript": "npm:typescript@1.8.7",
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-buffer@0.1.0": {
"buffer": "npm:buffer@3.6.0"
},
"github:jspm/nodelibs-constants@0.1.0": {
"constants-browserify": "npm:constants-browserify@0.0.1"
},
"github:jspm/nodelibs-crypto@0.1.0": {
"crypto-browserify": "npm:crypto-browserify@3.11.0"
},
"github:jspm/nodelibs-events@0.1.1": {
"events": "npm:events@1.0.2"
},
"github:jspm/nodelibs-path@0.1.0": {
"path-browserify": "npm:path-browserify@0.0.0"
},
"github:jspm/nodelibs-process@0.1.2": {
"process": "npm:process@0.11.2"
},
"github:jspm/nodelibs-stream@0.1.0": {
"stream-browserify": "npm:stream-browserify@1.0.0"
},
"github:jspm/nodelibs-string_decoder@0.1.0": {
"string_decoder": "npm:string_decoder@0.10.31"
},
"github:jspm/nodelibs-util@0.1.0": {
"util": "npm:util@0.10.3"
},
"github:jspm/nodelibs-vm@0.1.0": {
"vm-browserify": "npm:vm-browserify@0.0.4"
},
"npm:angular2@2.0.0-beta.9": {
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"es6-promise": "npm:es6-promise@3.1.2",
"es6-shim": "npm:es6-shim@0.33.13",
"process": "github:jspm/nodelibs-process@0.1.2",
"reflect-metadata": "npm:reflect-metadata@0.1.2",
"rxjs": "npm:rxjs@5.0.0-beta.2",
"zone.js": "npm:zone.js@0.5.15"
},
"npm:asn1.js@4.5.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"bn.js": "npm:bn.js@4.11.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"inherits": "npm:inherits@2.0.1",
"minimalistic-assert": "npm:minimalistic-assert@1.0.0",
"vm": "github:jspm/nodelibs-vm@0.1.0"
},
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:bn.js@4.11.0": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:browserify-aes@1.0.6": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"buffer-xor": "npm:buffer-xor@1.0.3",
"cipher-base": "npm:cipher-base@1.0.2",
"create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"evp_bytestokey": "npm:evp_bytestokey@1.0.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"inherits": "npm:inherits@2.0.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:browserify-cipher@1.0.0": {
"browserify-aes": "npm:browserify-aes@1.0.6",
"browserify-des": "npm:browserify-des@1.0.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"evp_bytestokey": "npm:evp_bytestokey@1.0.0"
},
"npm:browserify-des@1.0.0": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"cipher-base": "npm:cipher-base@1.0.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"des.js": "npm:des.js@1.0.0",
"inherits": "npm:inherits@2.0.1"
},
"npm:browserify-rsa@4.0.1": {
"bn.js": "npm:bn.js@4.11.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"constants": "github:jspm/nodelibs-constants@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"randombytes": "npm:randombytes@2.0.3"
},
"npm:browserify-sign@4.0.0": {
"bn.js": "npm:bn.js@4.11.0",
"browserify-rsa": "npm:browserify-rsa@4.0.1",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"create-hmac": "npm:create-hmac@1.1.4",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"elliptic": "npm:elliptic@6.2.3",
"inherits": "npm:inherits@2.0.1",
"parse-asn1": "npm:parse-asn1@5.0.0",
"stream": "github:jspm/nodelibs-stream@0.1.0"
},
"npm:buffer-xor@1.0.3": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:buffer@3.6.0": {
"base64-js": "npm:base64-js@0.0.8",
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"ieee754": "npm:ieee754@1.1.6",
"isarray": "npm:isarray@1.0.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:cipher-base@1.0.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"inherits": "npm:inherits@2.0.1",
"stream": "github:jspm/nodelibs-stream@0.1.0",
"string_decoder": "github:jspm/nodelibs-string_decoder@0.1.0"
},
"npm:constants-browserify@0.0.1": {
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-js@1.2.6": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-util-is@1.0.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:create-ecdh@4.0.0": {
"bn.js": "npm:bn.js@4.11.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"elliptic": "npm:elliptic@6.2.3"
},
"npm:create-hash@1.1.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"cipher-base": "npm:cipher-base@1.0.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"inherits": "npm:inherits@2.0.1",
"ripemd160": "npm:ripemd160@1.0.1",
"sha.js": "npm:sha.js@2.4.5"
},
"npm:create-hmac@1.1.4": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"inherits": "npm:inherits@2.0.1",
"stream": "github:jspm/nodelibs-stream@0.1.0"
},
"npm:crypto-browserify@3.11.0": {
"browserify-cipher": "npm:browserify-cipher@1.0.0",
"browserify-sign": "npm:browserify-sign@4.0.0",
"create-ecdh": "npm:create-ecdh@4.0.0",
"create-hash": "npm:create-hash@1.1.2",
"create-hmac": "npm:create-hmac@1.1.4",
"diffie-hellman": "npm:diffie-hellman@5.0.2",
"inherits": "npm:inherits@2.0.1",
"pbkdf2": "npm:pbkdf2@3.0.4",
"public-encrypt": "npm:public-encrypt@4.0.0",
"randombytes": "npm:randombytes@2.0.3"
},
"npm:des.js@1.0.0": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"inherits": "npm:inherits@2.0.1",
"minimalistic-assert": "npm:minimalistic-assert@1.0.0"
},
"npm:diffie-hellman@5.0.2": {
"bn.js": "npm:bn.js@4.11.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"miller-rabin": "npm:miller-rabin@4.0.0",
"randombytes": "npm:randombytes@2.0.3",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:elliptic@6.2.3": {
"bn.js": "npm:bn.js@4.11.0",
"brorand": "npm:brorand@1.0.5",
"hash.js": "npm:hash.js@1.0.3",
"inherits": "npm:inherits@2.0.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:es6-promise@3.1.2": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:es6-shim@0.33.13": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:evp_bytestokey@1.0.0": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0"
},
"npm:hash.js@1.0.3": {
"inherits": "npm:inherits@2.0.1"
},
"npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:miller-rabin@4.0.0": {
"bn.js": "npm:bn.js@4.11.0",
"brorand": "npm:brorand@1.0.5"
},
"npm:parse-asn1@5.0.0": {
"asn1.js": "npm:asn1.js@4.5.2",
"browserify-aes": "npm:browserify-aes@1.0.6",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"evp_bytestokey": "npm:evp_bytestokey@1.0.0",
"pbkdf2": "npm:pbkdf2@3.0.4",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:path-browserify@0.0.0": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:pbkdf2@3.0.4": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"create-hmac": "npm:create-hmac@1.1.4",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:process@0.11.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0"
},
"npm:public-encrypt@4.0.0": {
"bn.js": "npm:bn.js@4.11.0",
"browserify-rsa": "npm:browserify-rsa@4.0.1",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"parse-asn1": "npm:parse-asn1@5.0.0",
"randombytes": "npm:randombytes@2.0.3"
},
"npm:randombytes@2.0.3": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:readable-stream@1.1.13": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"core-util-is": "npm:core-util-is@1.0.2",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"isarray": "npm:isarray@0.0.1",
"process": "github:jspm/nodelibs-process@0.1.2",
"stream-browserify": "npm:stream-browserify@1.0.0",
"string_decoder": "npm:string_decoder@0.10.31"
},
"npm:reflect-metadata@0.1.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:ripemd160@1.0.1": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:rxjs@5.0.0-beta.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:sha.js@2.4.5": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:stream-browserify@1.0.0": {
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"readable-stream": "npm:readable-stream@1.1.13"
},
"npm:string_decoder@0.10.31": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:vm-browserify@0.0.4": {
"indexof": "npm:indexof@0.0.1"
},
"npm:zone.js@0.5.15": {
"es6-promise": "npm:es6-promise@3.1.2",
"process": "github:jspm/nodelibs-process@0.1.2"
}
}
});
编辑 2
在扫描 jspm 在我的节点库中映射到的事物列表时，我注意到了这一点：
"npm:angular2@2.0.0-beta.9": {
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"es6-promise": "npm:es6-promise@3.1.2",
"es6-shim": "npm:es6-shim@0.33.13",
"process": "github:jspm/nodelibs-process@0.1.2",
"reflect-metadata": "npm:reflect-metadata@0.1.2",
"rxjs": "npm:rxjs@5.0.0-beta.2",
"zone.js": "npm:zone.js@0.5.15"
},
我在其他地方看到有人分别安装这些库中的每一个，但看起来安装 angular2 现在会自行引入通常的依赖项。
更简短的回答
您写道：
The libraries are in node_modules.
不要把它们放在那里。将它们放在 wwwroot 内。这就是客户端库所属的地方。 node_modules 目录更适合服务器端库。
更长的答案
您在使用 jspm 吗？这可能会有所帮助。也许在一个一次性项目中试验它，以了解标准项目结构。
安装并初始化 JSPM
C:\MyProject> npm install jspm --save-dev
C:\MyProject> jspm init
在 jspm init 上，接受大部分默认值（按回车键。）ASP.NET 核心只有一个非默认值。
Enter server baseURL (public folder path) [./]:wwwroot
安装客户端资源
完成 jspm init 后，像这样安装客户端资源：
C:\MyProject> jsmp install angular
C:\MyProject> jspm install bootstrap
这会将它们放入 wwwroot > jspm_packages > npm 目录并将它们映射到 config.js 文件中。
可能ASP.NET核心项目结构
这是我们一直在使用的结果项目结构（为清楚起见，省略了很多内容。）
MyProject/
node_modules/ <-- for server-side tooling
wwwroot/
jspm_packages/ <-- for client-side resources
github/
angular
components
twbs
npm/
typescript@1.8.7/
typescript@1.8.7.js/
config.js
package.json
project.json
Startup.cs
可能 config.js 文件
这是我们的 config.js。我们可以使用 baseURL: "/" 因为 config.js 位于我们的 wwwroot 目录中。
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "typescript",
paths: {
"npm:*": "jspm_packages/npm/*",
"github:*": "jspm_packages/github/*"
},
map: {
"angular": "github:angular/bower-angular@1.5.0",
"bootstrap": "github:twbs/bootstrap@3.3.6",
"typescript": "npm:typescript@1.8.7"
}
});
祝你好运。 :)
正如 @Shaun Luttin 所写："Do not put librairies in node_modules"。
我建议使用 gulp 个任务的解决方案。
将您的 angular 代码放入 src 文件夹的子文件夹中
node_modules/
src/
app/
wwwroot/
创建一个 gulpfile.js 包含任务来编译您的 .ts 并将源代码复制到 wwwroot
var gulp = require("gulp");
var del = require("del");
var tsc = require("gulp-typescript");
var sourcemaps = require('gulp-sourcemaps');
var tsProject = tsc.createProject("tsconfig.json");
var cache = require('gulp-cached');
/**
* Watch for source file changed.
*/
gulp.task('watch', function () {
gulp.watch("src/**/*", ['compile', 'resources']);
});
/**
* Compile TypeScript files into wwwroot directory.
*/
gulp.task('compile', function () {
var tsResult = gulp.src("src/**/*.ts")
.pipe(cache('compiling'))
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("wwwroot"));
});
/**
* Copy all resources that are not TypeScript files into wwwroot directory.
*/
gulp.task("resources", function () {
return gulp.src(["src/**/*", "!**/*.ts"])
.pipe(cache('resourcing'))
.pipe(gulp.dest("wwwroot"))
});
/**
* Copy all required libraries into wwwroot directory.
*/
gulp.task("libs", function () {
return gulp.src([
'es6-shim/es6-shim.min.js',
'systemjs/dist/system-polyfills.js',
'angular2/bundles/angular2-polyfills.js',
'systemjs/dist/system.src.js',
'rxjs/bundles/Rx.js',
'angular2/bundles/angular2.dev.js',
'angular2/bundles/router.dev.js',
'angular2/es6/dev/src/testing/shims_for_IE.js'
], {cwd: "node_modules/**"}) /* Glob required here. */
.pipe(gulp.dest("wwwroot/lib"));
});
/**
* Build all.
*/
gulp.task("build", ['compile', 'resources', 'libs'], function () {
console.log("Building the project ...")
});
/**
* Default task.
*/
gulp.task('default', ['watch']);
此脚本使用 gulp-cached 编译和仅复制更改的文件。
有一个 watch 任务可以监视文件更改，因此您无需在每次修改代码时都启动 build 任务。
第一次使用 npm build 构建整个 angular 2 应用程序然后使用 npm watch
脚本将 angular 2 依赖项从 node_modules 文件夹复制到 wwwroot/lib 文件夹。配置您的 index.html 以使用此文件夹
<html>
<head>
<base href="/">
<title>ma freebox blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="lib/es6-shim/es6-shim.min.js"></script>
<script src="lib/systemjs/dist/system-polyfills.js"></script>
<script src="lib/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="lib/angular2/bundles/angular2-polyfills.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<script src="lib/rxjs/bundles/Rx.js"></script>
<script src="lib/angular2/bundles/angular2.dev.js"></script>
<script src="lib/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading ...</my-app>
</body>
</html>
为 gulp 依赖项配置 package.json：
{
"name": "your app name",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run gulp\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"gulp": "gulp",
"build": "gulp build",
"watch": "gulp watch",
"resources": "gulp resources",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.8",
"systemjs": "0.19.24",
"es6-promise": "^3.1.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.7",
"typings":"^0.7.7",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-cached" : "^1.1.0",
"gulp-typescript": "^2.12.1",
"gulp-sourcemaps": "^1.6.0"
}
}
在这个示例中，我在脚本部分使用 lite-server，这不是强制性的。
构建文件夹结构后
node_modules/
scr/
app/
wwwroot/
app/
lib/
虽然用 gulp 打包似乎是最好的方法，但无论如何你都会想要这样做，我们确实找到了解决这个问题的快速方法。
使基本引用指向包含 angular 项目的子目录。这将确保找到所有 node_module 依赖项，等等。然后使用不同的 APP_BASE_HREF 配置 PathLocationStrategy，以便 html5 模式仍然适用于实际的 angular 应用程序。
bootstrap(AppComponent, [..... bind(APP_BASE_HREF).toValue("/yardmap/planning")
参考：https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
当您部署到域中的非根路径时，您需要手动更新
<base href="/">
到
<base href="/wwwroot/">
在你的 dist/index.html.
或
在 webpack.common.js
中进行更改
- 在 webpack.common.js
中更改 balseUrl:'/wwwroot/'
- 将
/wwwroot/ 添加到 index.html 中的链接
我正在使用 dotnet 核心在不同的子目录中提供独立的 angular 应用程序。看到这件事在行动真是太棒了，但我 运行 陷入了我不明白的事情中。
我的应用在这里：
wwwroot/
pap/
admin/
boot.ts
admin.component.ts
此应用的 MVC 路由是 /pap/admin/。在这种情况下，我希望 Angular2 路由有两种工作方式。第一个是构建我所有的 Angular 路由以匹配 MVC 路由。这行得通，但感觉很便宜。第二种方法是像这样设置基本标签：
<base href="/pap/admin/">
这两种方式都允许我独立使用服务器端和客户端路由，而无需在每条路由前添加 /panel/admin/。例如，
@RouteConfig([
{ path: '/menu', name: 'Menu', component: MenuComponent, useAsDefault: true },
{ path: '/panels/:id', name: 'Panel', component: PanelComponent }
])
我的问题是 SystemJS。我试验过、阅读过、搜索过，但我仍然不知道发生了什么。在快速入门中，Angular 库包含在脚本标签中。如果我理解正确的话，应用程序不需要被告知 Angular 和 Rxjs 要从哪里加载，因为它们已经包含在文档中了。
这些库位于 node_modules 中，并且就像它们位于 wwwroot/ 中一样提供服务。有了 ，我的应用程序自然会开始在 /pap/admin/angular2/ 中查找文件，而不是它们所在的位置。如果我使用这个配置，
System.config({
baseURL: '/',
defaultJSExtensions: true,
packages: {
format: 'register',
'pap/admin': { defaultExtension: 'js' }
}
});
System.import('/pap/admin/admin.boot.js')
.then(null, console.error.bind(console));
然后从
开始寻找我导入的所有东西，整个事情就爆炸了import {bootstrap} from 'angular2/platform/browser';
它在根目录（wwwroot 或 http://localhost:5000/angular2/platform/browser.js）而不是 /node_modules/angular2/ 中查找它。这对我来说很有意义，虽然我不完全理解为什么它不使用我在脚本标签中加载的库。
如果我使用
System.config({
baseURL: '/node_modules/',
defaultJSExtensions: true,
packages: {
format: 'register',
'pap/admin': { defaultExtension: 'js' }
},
});
System.import('/pap/admin/admin.boot.js')
.then(null, console.error.bind(console));
应用程序栩栩如生。即使我从脚本标签中删除库，它也会这样做。当然，SystemJS 现在知道如果我从 'angular2/core' 导入某些东西，它可以在 /node_modules/ 中查找它。这里的缺点是，就初始而言，性能明显较慢。检查 dotnet core 的输出，我可以看到它正在加载这些库中的每个文件。糟糕。
我想如果我使用 baseURL: '/' 并将 Angular 位映射到它们所在的位置，一切都会好起来的，
map: { angular2: '/node_modules/angular2/' }
但结果是一样的；每最后一块都已加载。
还有一件事……SystemJS 说他们很快就会摆脱 defaultJSExtensions，但是一旦我添加并开始讨论 System.config 部分，没有它就无法工作。
如果有任何具有 SystemJS 经验或在新的 dotnet 核心内容之上构建经验的人提供一些指导，我将不胜感激。
编辑 1
我尝试开始使用 jspm，但正如我在下面评论的那样，要么我在做一些疯狂的事情，要么确实如此。这是我的 config.js 在 运行 之后只有 jspm install angular2:
System.config({
defaultJSExtensions: true,
transpiler: "typescript",
typescriptOptions: {
"module": "commonjs",
"emitDecoratorMetadata": true
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular2": "npm:angular2@2.0.0-beta.9",
"core-js": "npm:core-js@1.2.6",
"typescript": "npm:typescript@1.8.7",
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-buffer@0.1.0": {
"buffer": "npm:buffer@3.6.0"
},
"github:jspm/nodelibs-constants@0.1.0": {
"constants-browserify": "npm:constants-browserify@0.0.1"
},
"github:jspm/nodelibs-crypto@0.1.0": {
"crypto-browserify": "npm:crypto-browserify@3.11.0"
},
"github:jspm/nodelibs-events@0.1.1": {
"events": "npm:events@1.0.2"
},
"github:jspm/nodelibs-path@0.1.0": {
"path-browserify": "npm:path-browserify@0.0.0"
},
"github:jspm/nodelibs-process@0.1.2": {
"process": "npm:process@0.11.2"
},
"github:jspm/nodelibs-stream@0.1.0": {
"stream-browserify": "npm:stream-browserify@1.0.0"
},
"github:jspm/nodelibs-string_decoder@0.1.0": {
"string_decoder": "npm:string_decoder@0.10.31"
},
"github:jspm/nodelibs-util@0.1.0": {
"util": "npm:util@0.10.3"
},
"github:jspm/nodelibs-vm@0.1.0": {
"vm-browserify": "npm:vm-browserify@0.0.4"
},
"npm:angular2@2.0.0-beta.9": {
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"es6-promise": "npm:es6-promise@3.1.2",
"es6-shim": "npm:es6-shim@0.33.13",
"process": "github:jspm/nodelibs-process@0.1.2",
"reflect-metadata": "npm:reflect-metadata@0.1.2",
"rxjs": "npm:rxjs@5.0.0-beta.2",
"zone.js": "npm:zone.js@0.5.15"
},
"npm:asn1.js@4.5.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"bn.js": "npm:bn.js@4.11.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"inherits": "npm:inherits@2.0.1",
"minimalistic-assert": "npm:minimalistic-assert@1.0.0",
"vm": "github:jspm/nodelibs-vm@0.1.0"
},
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:bn.js@4.11.0": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:browserify-aes@1.0.6": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"buffer-xor": "npm:buffer-xor@1.0.3",
"cipher-base": "npm:cipher-base@1.0.2",
"create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"evp_bytestokey": "npm:evp_bytestokey@1.0.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"inherits": "npm:inherits@2.0.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:browserify-cipher@1.0.0": {
"browserify-aes": "npm:browserify-aes@1.0.6",
"browserify-des": "npm:browserify-des@1.0.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"evp_bytestokey": "npm:evp_bytestokey@1.0.0"
},
"npm:browserify-des@1.0.0": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"cipher-base": "npm:cipher-base@1.0.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"des.js": "npm:des.js@1.0.0",
"inherits": "npm:inherits@2.0.1"
},
"npm:browserify-rsa@4.0.1": {
"bn.js": "npm:bn.js@4.11.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"constants": "github:jspm/nodelibs-constants@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"randombytes": "npm:randombytes@2.0.3"
},
"npm:browserify-sign@4.0.0": {
"bn.js": "npm:bn.js@4.11.0",
"browserify-rsa": "npm:browserify-rsa@4.0.1",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"create-hmac": "npm:create-hmac@1.1.4",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"elliptic": "npm:elliptic@6.2.3",
"inherits": "npm:inherits@2.0.1",
"parse-asn1": "npm:parse-asn1@5.0.0",
"stream": "github:jspm/nodelibs-stream@0.1.0"
},
"npm:buffer-xor@1.0.3": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:buffer@3.6.0": {
"base64-js": "npm:base64-js@0.0.8",
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"ieee754": "npm:ieee754@1.1.6",
"isarray": "npm:isarray@1.0.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:cipher-base@1.0.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"inherits": "npm:inherits@2.0.1",
"stream": "github:jspm/nodelibs-stream@0.1.0",
"string_decoder": "github:jspm/nodelibs-string_decoder@0.1.0"
},
"npm:constants-browserify@0.0.1": {
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-js@1.2.6": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-util-is@1.0.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:create-ecdh@4.0.0": {
"bn.js": "npm:bn.js@4.11.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"elliptic": "npm:elliptic@6.2.3"
},
"npm:create-hash@1.1.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"cipher-base": "npm:cipher-base@1.0.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"inherits": "npm:inherits@2.0.1",
"ripemd160": "npm:ripemd160@1.0.1",
"sha.js": "npm:sha.js@2.4.5"
},
"npm:create-hmac@1.1.4": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"inherits": "npm:inherits@2.0.1",
"stream": "github:jspm/nodelibs-stream@0.1.0"
},
"npm:crypto-browserify@3.11.0": {
"browserify-cipher": "npm:browserify-cipher@1.0.0",
"browserify-sign": "npm:browserify-sign@4.0.0",
"create-ecdh": "npm:create-ecdh@4.0.0",
"create-hash": "npm:create-hash@1.1.2",
"create-hmac": "npm:create-hmac@1.1.4",
"diffie-hellman": "npm:diffie-hellman@5.0.2",
"inherits": "npm:inherits@2.0.1",
"pbkdf2": "npm:pbkdf2@3.0.4",
"public-encrypt": "npm:public-encrypt@4.0.0",
"randombytes": "npm:randombytes@2.0.3"
},
"npm:des.js@1.0.0": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"inherits": "npm:inherits@2.0.1",
"minimalistic-assert": "npm:minimalistic-assert@1.0.0"
},
"npm:diffie-hellman@5.0.2": {
"bn.js": "npm:bn.js@4.11.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"miller-rabin": "npm:miller-rabin@4.0.0",
"randombytes": "npm:randombytes@2.0.3",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:elliptic@6.2.3": {
"bn.js": "npm:bn.js@4.11.0",
"brorand": "npm:brorand@1.0.5",
"hash.js": "npm:hash.js@1.0.3",
"inherits": "npm:inherits@2.0.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:es6-promise@3.1.2": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:es6-shim@0.33.13": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:evp_bytestokey@1.0.0": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0"
},
"npm:hash.js@1.0.3": {
"inherits": "npm:inherits@2.0.1"
},
"npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:miller-rabin@4.0.0": {
"bn.js": "npm:bn.js@4.11.0",
"brorand": "npm:brorand@1.0.5"
},
"npm:parse-asn1@5.0.0": {
"asn1.js": "npm:asn1.js@4.5.2",
"browserify-aes": "npm:browserify-aes@1.0.6",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"evp_bytestokey": "npm:evp_bytestokey@1.0.0",
"pbkdf2": "npm:pbkdf2@3.0.4",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:path-browserify@0.0.0": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:pbkdf2@3.0.4": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"create-hmac": "npm:create-hmac@1.1.4",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:process@0.11.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0"
},
"npm:public-encrypt@4.0.0": {
"bn.js": "npm:bn.js@4.11.0",
"browserify-rsa": "npm:browserify-rsa@4.0.1",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"parse-asn1": "npm:parse-asn1@5.0.0",
"randombytes": "npm:randombytes@2.0.3"
},
"npm:randombytes@2.0.3": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:readable-stream@1.1.13": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"core-util-is": "npm:core-util-is@1.0.2",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"isarray": "npm:isarray@0.0.1",
"process": "github:jspm/nodelibs-process@0.1.2",
"stream-browserify": "npm:stream-browserify@1.0.0",
"string_decoder": "npm:string_decoder@0.10.31"
},
"npm:reflect-metadata@0.1.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:ripemd160@1.0.1": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:rxjs@5.0.0-beta.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:sha.js@2.4.5": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:stream-browserify@1.0.0": {
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"readable-stream": "npm:readable-stream@1.1.13"
},
"npm:string_decoder@0.10.31": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:vm-browserify@0.0.4": {
"indexof": "npm:indexof@0.0.1"
},
"npm:zone.js@0.5.15": {
"es6-promise": "npm:es6-promise@3.1.2",
"process": "github:jspm/nodelibs-process@0.1.2"
}
}
});
编辑 2
在扫描 jspm 在我的节点库中映射到的事物列表时，我注意到了这一点：
"npm:angular2@2.0.0-beta.9": {
"crypto": "github:jspm/nodelibs-crypto@0.1.0",
"es6-promise": "npm:es6-promise@3.1.2",
"es6-shim": "npm:es6-shim@0.33.13",
"process": "github:jspm/nodelibs-process@0.1.2",
"reflect-metadata": "npm:reflect-metadata@0.1.2",
"rxjs": "npm:rxjs@5.0.0-beta.2",
"zone.js": "npm:zone.js@0.5.15"
},
我在其他地方看到有人分别安装这些库中的每一个，但看起来安装 angular2 现在会自行引入通常的依赖项。
更简短的回答
您写道：
The libraries are in node_modules.
不要把它们放在那里。将它们放在 wwwroot 内。这就是客户端库所属的地方。 node_modules 目录更适合服务器端库。
更长的答案
您在使用 jspm 吗？这可能会有所帮助。也许在一个一次性项目中试验它，以了解标准项目结构。
安装并初始化 JSPM
C:\MyProject> npm install jspm --save-dev
C:\MyProject> jspm init
在 jspm init 上，接受大部分默认值（按回车键。）ASP.NET 核心只有一个非默认值。
Enter server baseURL (public folder path) [./]:wwwroot
安装客户端资源
完成 jspm init 后，像这样安装客户端资源：
C:\MyProject> jsmp install angular
C:\MyProject> jspm install bootstrap
这会将它们放入 wwwroot > jspm_packages > npm 目录并将它们映射到 config.js 文件中。
可能ASP.NET核心项目结构
这是我们一直在使用的结果项目结构（为清楚起见，省略了很多内容。）
MyProject/
node_modules/ <-- for server-side tooling
wwwroot/
jspm_packages/ <-- for client-side resources
github/
angular
components
twbs
npm/
typescript@1.8.7/
typescript@1.8.7.js/
config.js
package.json
project.json
Startup.cs
可能 config.js 文件
这是我们的 config.js。我们可以使用 baseURL: "/" 因为 config.js 位于我们的 wwwroot 目录中。
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "typescript",
paths: {
"npm:*": "jspm_packages/npm/*",
"github:*": "jspm_packages/github/*"
},
map: {
"angular": "github:angular/bower-angular@1.5.0",
"bootstrap": "github:twbs/bootstrap@3.3.6",
"typescript": "npm:typescript@1.8.7"
}
});
祝你好运。 :)
正如 @Shaun Luttin 所写："Do not put librairies in node_modules"。
我建议使用 gulp 个任务的解决方案。
将您的 angular 代码放入 src 文件夹的子文件夹中
node_modules/
src/
app/
wwwroot/
创建一个 gulpfile.js 包含任务来编译您的 .ts 并将源代码复制到 wwwroot
var gulp = require("gulp");
var del = require("del");
var tsc = require("gulp-typescript");
var sourcemaps = require('gulp-sourcemaps');
var tsProject = tsc.createProject("tsconfig.json");
var cache = require('gulp-cached');
/**
* Watch for source file changed.
*/
gulp.task('watch', function () {
gulp.watch("src/**/*", ['compile', 'resources']);
});
/**
* Compile TypeScript files into wwwroot directory.
*/
gulp.task('compile', function () {
var tsResult = gulp.src("src/**/*.ts")
.pipe(cache('compiling'))
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("wwwroot"));
});
/**
* Copy all resources that are not TypeScript files into wwwroot directory.
*/
gulp.task("resources", function () {
return gulp.src(["src/**/*", "!**/*.ts"])
.pipe(cache('resourcing'))
.pipe(gulp.dest("wwwroot"))
});
/**
* Copy all required libraries into wwwroot directory.
*/
gulp.task("libs", function () {
return gulp.src([
'es6-shim/es6-shim.min.js',
'systemjs/dist/system-polyfills.js',
'angular2/bundles/angular2-polyfills.js',
'systemjs/dist/system.src.js',
'rxjs/bundles/Rx.js',
'angular2/bundles/angular2.dev.js',
'angular2/bundles/router.dev.js',
'angular2/es6/dev/src/testing/shims_for_IE.js'
], {cwd: "node_modules/**"}) /* Glob required here. */
.pipe(gulp.dest("wwwroot/lib"));
});
/**
* Build all.
*/
gulp.task("build", ['compile', 'resources', 'libs'], function () {
console.log("Building the project ...")
});
/**
* Default task.
*/
gulp.task('default', ['watch']);
此脚本使用 gulp-cached 编译和仅复制更改的文件。
有一个 watch 任务可以监视文件更改，因此您无需在每次修改代码时都启动 build 任务。
第一次使用 npm build 构建整个 angular 2 应用程序然后使用 npm watch
脚本将 angular 2 依赖项从 node_modules 文件夹复制到 wwwroot/lib 文件夹。配置您的 index.html 以使用此文件夹
<html>
<head>
<base href="/">
<title>ma freebox blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="lib/es6-shim/es6-shim.min.js"></script>
<script src="lib/systemjs/dist/system-polyfills.js"></script>
<script src="lib/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="lib/angular2/bundles/angular2-polyfills.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<script src="lib/rxjs/bundles/Rx.js"></script>
<script src="lib/angular2/bundles/angular2.dev.js"></script>
<script src="lib/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading ...</my-app>
</body>
</html>
为 gulp 依赖项配置 package.json：
{
"name": "your app name",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run gulp\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"gulp": "gulp",
"build": "gulp build",
"watch": "gulp watch",
"resources": "gulp resources",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.8",
"systemjs": "0.19.24",
"es6-promise": "^3.1.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.7",
"typings":"^0.7.7",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-cached" : "^1.1.0",
"gulp-typescript": "^2.12.1",
"gulp-sourcemaps": "^1.6.0"
}
}
在这个示例中，我在脚本部分使用 lite-server，这不是强制性的。
构建文件夹结构后
node_modules/
scr/
app/
wwwroot/
app/
lib/
虽然用 gulp 打包似乎是最好的方法，但无论如何你都会想要这样做，我们确实找到了解决这个问题的快速方法。
使基本引用指向包含 angular 项目的子目录。这将确保找到所有 node_module 依赖项，等等。然后使用不同的 APP_BASE_HREF 配置 PathLocationStrategy，以便 html5 模式仍然适用于实际的 angular 应用程序。
bootstrap(AppComponent, [..... bind(APP_BASE_HREF).toValue("/yardmap/planning")
参考：https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
当您部署到域中的非根路径时，您需要手动更新
<base href="/">
到
<base href="/wwwroot/">
在你的 dist/index.html.
或
在 webpack.common.js
中进行更改- 在 webpack.common.js 中更改
- 将
/wwwroot/添加到 index.html 中的链接
balseUrl:'/wwwroot/'