使用基本href从不同的子目录提供angular2

【问题标题】：Serving angular2 from different subdirectory with base href使用基本href从不同的子目录提供angular2
【发布时间】：2017-05-28 12:14:35
【问题描述】：

我正在使用 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，但正如我在下面评论的那样，要么我在做一些疯狂的事情，要么就是这样。这是我只运行 jspm install angular2 后的 config.js：

   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 看起来像是在自行引入通常的依赖项。

【问题讨论】：

  • 您的问题已从如何从另一个目录提供 Angular2 变为如何使用 JSPM 安装 Angular2。我的观点是，在 StackOverflow 上，当有人提供有用的答案或完全回答了我们的问题时，我们会通过投票或将答案标记为正确来奖励他们。然后我们根据所学提出一个新问题。

标签： angular asp.net-core systemjs


【解决方案1】：

简短回答

你写的：

这些库位于 node_modules 中。

不要把它们放在那里。将它们放入wwwroot。这就是客户端库所属的地方。 node_modules 目录更适合服务器端库。

更长的答案

你在使用jspm吗？这可能会有所帮助。或许可以在一次性项目中进行试验，以了解标准项目结构。

安装和初始化 JSPM

C:\MyProject> npm install jspm --save-dev
C:\MyProject> jspm init

在jspm init 上，接受大多数默认值（按回车键）。对于 ASP.NET Core，只有一个非默认值。

Enter server baseURL (public folder path) [./]:wwwroot

安装客户端资源

完成jspm init 后，像这样安装客户端资源：

C:\MyProject> jsmp install angular
C:\MyProject> jspm install bootstrap

这会将它们放入wwwroot &gt; jspm_packages &gt; npm 目录，并将它们映射到config.js 文件中。

可能的 ASP.NET Core 项目结构

这是我们一直在使用的最终项目结构（为清楚起见，省略了很多内容。）

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"
  }                                                 
});

祝你好运。 :)

【讨论】：

  • 我还没有尝试过 JSPM，所以我会试一试并回复您。谢谢！
  • 我一直在项目的一个废弃分支中使用 jspm。我不得不说，只要我输入jspm install angular2，我的 config.js 就变成了 1,300 行。我开始环顾四周，看看是否应该如此。我很确定答案是否定的。它引入了诸如 npm:write-file-atomic 和 npm:win-release 之类的东西。
  • 哦。我刚刚查看了我的 node_modules 目录，它似乎也爆炸了。我要把它清理干净，然后回复你。哈！
  • 我喜欢它。 ;)
  • 按照您的建议，我已经使用 JSPM 启动并运行了它。虽然我认为这个解决方案不会很快投入生产（初始加载时间几乎是 4 秒），但我怀疑一旦 Angular2 进入最终版本，情况会好得多。谢谢！
【解决方案2】：

正如@Shaun Luttin 所写：“不要将库放在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/

【讨论】：

  • 我的项目被很好地吞噬了，但我要看看你的项目，看看有没有我想偷的东西！感谢您的建议！
【解决方案3】：

虽然使用 gulp 打包似乎是最好的方法，但无论如何您都会想要这样做，我们确实找到了解决此问题的快速解决方案。

使基础 ref 指向包含 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

参考：https://angular.io/docs/ts/latest/guide/router.html

【讨论】：

    【解决方案4】：

    当您部署到域内的非根路径时，您需要手动更新

    <base href="/">

    到

    <base href="/wwwroot/">

    在您的 dist/index.html 中。

    或

    在 webpack.common.js 中进行更改

    1. 在 webpack.common.js 中更改 balseUrl:'/wwwroot/'
    2. 将/wwwroot/ 添加到index.html 中的链接

    【讨论】：

    • balseUrl, 还是baseUrl?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-09-29
    • 1970-01-01
    • 2021-03-08
    • 2014-02-11
    • 1970-01-01
    • 2012-09-30
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode