Обслуживание angular2 из другого подкаталога с базовым href

Я работаю с независимыми угловыми приложениями в разных подкаталогах с ядром dotnet. Это было потрясающе видеть эту вещь в действии, но я сталкиваюсь с чем-то, чего я просто не понимаю.

Мое приложение живет здесь:

wwwroot/
  pap/
    admin/
      boot.ts
      admin.component.ts

Маршрут MVC для этого приложения - /pap/admin/. Есть два способа, как я ожидаю, что маршрутизация Angular2 будет работать в этой ситуации. Первый - это построить все мои угловые маршруты в соответствии с маршрутами 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, я вижу, что он загружает каждый файл в этих библиотеках. Woops.

Я подумал, что если бы я использовал 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 теперь использует обычные зависимости самостоятельно.

Источник

4 ответа

Решение

Краткий ответ

Вы написали:

Библиотеки находятся в node_modules.

Не кладите их туда. Положить их внутрь wwwroot, Вот где принадлежат клиентские библиотеки. node_modules Каталог лучше для серверных библиотек.

Более длинный ответ

Вы используете JSPM? Это может помочь. Возможно, поэкспериментируйте с ним в одноразовом проекте, чтобы узнать о стандартной структуре проекта.

Установите и инициализируйте JSPM

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

На jspm init, примите большинство значений по умолчанию (нажав enter.) Для ASP.NET Core есть только одно значение по умолчанию.

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: "Не Shaun Luttin в node_modules ".

Я предлагаю решение с использованием gulp задачи.

Поместите свой угловой код в подпапку вашего 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 компилировать и копировать только измененные файлы. E сть watch задача, которая следит за измененными файлами, поэтому вам не нужно запускать build Задача каждый раз, когда вы изменяете свой код. 1-й раз использовать 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>

Настройте свой package.json за gulp зависимости:

{
  "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 действительно кажется наилучшим способом, так как вы все равно захотите это сделать, мы нашли быстрое решение этой проблемы.

Сделайте базовую ссылку на подкаталог, содержащий угловой проект. Это обеспечит обнаружение всех зависимостей node_module и т. Д. Затем настройте PathLocationStrategy с другим APP_BASE_HREF, чтобы режим html5 все еще работал для реального углового приложения.

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

Источник

При развертывании по некорневому пути в домене вам необходимо вручную обновить

<base href="/">

в

<base href="/wwwroot/">

в вашем dist/index.html.

или же

Внести изменения в webpack.common.js

  1. + Изменить balseUrl:'/wwwroot/' в webpack.common.js
  2. добавлять /wwwroot/ на ссылки в index.html
Источник
Другие вопросы по тегам