Использование относительного пути для templateUrl в Компоненте с SystemJS

Ответ 1

Это просто не работает для меня. Я вижу в репозитории Github для Angular 2, что функция предположительно была добавлена ​​в начале декабря, но она не работает, насколько я могу судить.

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

Update:

Здесь часть того, что происходит. Для этого требуется специальная функция CommonJS, поэтому вы должны использовать эту систему модулей в файле tsconfig.json.

Кроме того, возникает проблема при использовании SystemJS из-за того, как он связывает все с корнем.

В принципе, существует множество ограничений на возможность использования этой новой функции.

Ответ 2

Вы можете попробовать выполнить следующие действия:

Шаг 1. Объявляет объект модуля формата commonjs, который идентифицирует "id модуля" для текущего модуля.

"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    ...
}

Шаг 2: Добавление typings.d.ts в папку wwwroot для идентификации "id модуля".

/// <reference path="../typings/globals/core-js/index.d.ts" />
 declare var module: { id: string };

Шаг 3. Установите для компонента moduleId свойство метаданных значение module.id для относительных URL-адресов (обратите внимание на соглашение).

@Component({
    selector: 'login-app',
    moduleId: module.id,
    templateUrl: 'app.component.html'
})

Надеюсь на эту помощь.

Ответ 3

Обходной путь: используйте require с шаблоном вместо templateUrl

@Component({
    selector: 'login-app',
    template: require('./app.html')
})

Ответ 4

У меня была та же проблема:

Ошибка TS2304: Не удается найти имя 'module'.

по некоторым причинам, даже при "module": "commonjs" в compilerOptions в tsconfig.json файле TypeScript повышается эта ошибка. Поэтому я решил проблему, добавив для нее объявление:

declare var module: {
    id: string;
};

Ответ 5

Просто установите свойство "moduleId" Компонента со значением module.id.

Пожалуйста, обратитесь к примеру здесь: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html#!#set-the-moduleid-

Образец кода:

@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl: "login.component.html"
})

Ответ 6

С systemjs сначала объявите строку __moduleName (два символа подчеркивания), а затем используйте ее вместо module.id следующим образом:

declare var __moduleName: string;

@Component({
    selector: 'login-app',
    moduleId: __moduleName,
    templateUrl: './app.html'
})

Ответ 7

По мере того как этот вопрос получает много внимания, я отправлю ссылку на хорошую статью в ОФИЦИАЛЬНО ANGULAR COOKBOOK: Относительные контуры компонентов

В нем объясняется , почему по умолчанию используются абсолютные пути и , как использовать относительные пути в зависимости от стратегий загрузки упаковки и модулей.

Ответ 8

фактически определен внутри index.d.ts в node.

Добавьте node в свой typings.json, как показано ниже, и запустите "npm run typings install".

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

Это должно решить вашу проблему.

Ответ 9

Использовать абсолютный путь к html файлу при использовании temlplateUrl. например: Если ваша иерархия приложений - это MyApp- > app- > yourComponent.ts и на уровне приложения, ваш app.html там, то обратитесь к Component decorator yourComponent.ts следующим образом, он должен работать.

@Component ({   селектор: "login-app",   templateUrl: 'app/app.html' })

относительный путь никогда не работал у меня, даже после установки moduleID на module.id или любой другой работы. Если это действительно работает для всех, пожалуйста, разделите.