Почему мой ботстрап с угловым 2-му приложением?

Question

Я пытаюсь создать шаблон шаблона для загрузки угловых 2 приложений с использованием выраженных, угловых 2, машинописных, gulp и systemjs. По какой-то причине мой файл index.html не распознает мой файл bootstrap.js. Все мои jade и typescript находятся в src. Я использую gulp, чтобы переписать машинописные тексты от src до dist и обслуживать мои статические активы от node_modules и jspm_packages в экспресс. Но когда он, наконец, приходит время для вызова System.import, например, так: System.import('app').catch(console.error.bind(console)), я получаю:

Error: SyntaxError: Unexpected token < Evaluating http://localhost:3000/app/bootstrap.js Error loading http://localhost:3000/app/bootstrap.js

ошибка, вероятно, вызвано в angular2-polyfills.min.js.

Вот мой основной экспресс-бэкенд, чтобы дать вам представление о том, как мои активы и файлы служили вверх (я с подозрением, что я имею временный brainfart и мои пути выключены):

const app = express(); 
app.use('/jspm_packages', express.static('jspm_packages')); 
app.use('/node_modules', express.static('node_modules')); 

app.get('*', function(req, res) { 
    const file = fs.readFileSync('src/index.jade').toString(); 
    const html = jade.render(file); 
    return res.send(html); 
}); 

app.listen(process.env.PORT || 3000); 

Мой файл index.html находится в dist, каталог, в котором хранится весь переданный javascript. Вот packages свойства на моем System.config:

packages: { 
      "dist": { 
      "main": "bootstrap", 
      "format": "system", 
      "defaultExtension": "js" 
      } 
     }, 

Я был под впечатлением, что dist идентифицирует папку относительно BASE_URL (в моем случае это просто /), а main свойства определяет имя файла , Поэтому я подумал, что, позвонив System.import('app'), он заглянет внутрь папки app внутри dist и найдет файл bootstrap.js для загрузки моего приложения angular2, но это, похоже, не так. Когда я открываю свою консоль с хром, bootstrap.js не появляется в моих источниках, поэтому я предполагаю, что где-то есть ошибка пути, но я пробовал все варианты и не могу заставить его работать.

Любая помощь была бы принята с благодарностью, спасибо.

Update:

Вот мой index.html: https://jsfiddle.net/r02r3jk3/ Вот структура папок и код на стороне сервера, который обслуживает до содержания: https://jsfiddle.net/cejk0jw3/

Когда я инспектировать сеть Tab для ответа на запрос на browser.js файл в angular2/platform, я получаю следующее:

запрос URL является http://localhost:3000/jspm_packages/npm/angular2@2.0.0-beta.9/platform/browser.js

Ответ имеет тип контента Content-Type:text/html; charset=utf-8, но ответ - мой индекс.HTML-файл :(

Answer 1

вместо app в System.import('app') должно быть dist так: System.import('dist') и ваше определение пакеты должны быть:

packages: { 
    "dist": { 
     "main": "app/bootstrap", 
     "format": "system", 
     "defaultExtension": "js" 
    } 
} 

Update

Поскольку ваш index.html находится в той же папке, где app - dist. Тогда вам не нужно dist в ваших определениях пакетов.

Ваше определение должно быть:

packages: { 
    "app": { 
     "main": "bootstrap", 
     "format": "system", 
     "defaultExtension": "js" 
    } 
} 

И импорт, как:

System.import('app')

Update

Я пытался дублировать вашу установку, а вот те вопросы, которые я нашел:

В своем базовом блоке:

Вы не подаете файлы внутри dist. Строка прокомментирована. Таким образом, любой запрос на app/* будет направлен index.html из-за вашего app.get('*', ...)

Вы можете раскомментировать исходную строку:
app.use('/dist', express.static('dist'));
или
app.use('/app',express.static('dist/app'))

зависит от того, один вы делаете, в packages объекта будут отличаться.

Пойду с последним, app.use('/app',express.static('dist/app')). Это просто делает больше, поскольку мне нужно скрывать dist от запросов.

Кроме того, проверьте SystemJS module formats

Определение пакетов будет:

packages: { 
    "app": { 
     "main": "bootstrap", 
     //"format": "system", // this was causing the main issue 
     format:"register", 
     "defaultExtension": "js" 
    } 
    }, 

И, наконец:

System.import('app') 

Update

Последняя проблема была о линии "angular2": "npm:angular2@2.0.0-beta.9":

Это было вызвано ниже двух линий в server/index.js:

app.use(express.static('jspm_packages')); 
app.use(express.static('node_modules')); 

Проблема заключается в том, что все содержимое внутри jspm_packages и node_modules будут обслуживаться непосредственно с сервера. Итак, если вы попытаетесь получить доступ: http://localhost:3000/angular2 будет подан от node_modules.
Если при попытке получить доступ: http://localhost:3000/npm/angular2@2.0.0-beta.9 будет отправлено с jspm_packages. Таким образом, если у вас есть такие строки:

paths: { 
    ... 
    "npm:*": "jspm_packages/npm/*" 
}, 
map:{ 
    `"angular2": "npm:angular2@2.0.0-beta.9"` 
} 

каждый запрос angular2 будет переведен на: jspm_packages/npm/angular2@2.0.0-beta.9. Но это должно было быть только /npm/angular2@2.0.0-beta.9.

Это сработало, когда вы удалили "angular2": "npm:angular2@2.0.0-beta.9", потому что angular2 теперь будет обслуживаться изнутри node_modules.

Таким образом, решение, чтобы изменить ваш server/index.js на:

app.use('jspm_packages',express.static('jspm_packages')); 
app.use('node_modules',express.static('node_modules')); 

Кроме того, тег сценария внутри index.html должен быть в настоящее время:

<script src="jspm_packages/npm/angular2@2.0.0-beta.9/bundles/angular2-polyfills.min.js"></script> 
<script src="jspm_packages/system.js"></script> 

Answer 2

На самом деле это зависит, как transpile ваши машинопись файлы при создании заявки:

• Если вы получаете JS-файл на TypeSc ript, в соответствующем файле создается анонимный модуль («System.register (['import1'], ..."). В этом случае модуль идентифицируется по его имени и его пути.
• Если вы используете только один файл JS для всех файлов TypeScript (с опцией outFile), имена модулей явно определяются при использовании функции System.register ((«System.register» («имя модуля», ['import1'] ., ... ")

в вашем случае, кажется, что вы в первом случае, так что вы можете попробовать это:

System.import('path/to/boot'); 

Обратите внимание, что если ваш файл index.html является расположенной в папке dist, вам нужна подпапка на этом уровне для ваших скомпилированных файлов JS. Эта подпапка должна быть настроена в ваш SystemJS в записи «пакеты».

Смотрите этот вопрос для более подробной информации:

• How do I actually deploy an Angular 2 + Typescript + systemjs app?