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

Question

Я пытаюсь использовать относительный путь при определении templateUrl в angular2 компоненте, как описано здесь: http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

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

хотя я получаю:

ERROR: module is not defined

Я использую --m commonjs на настройках компиляции ts.

Как заставить его работать?

Answer 1

Это, похоже, не работает для меня. I can see in the Github repo для Angular 2, что функция предположительно была добавлена ​​в начале декабря, но она не работает, насколько я могу судить.

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

Update:

Вот часть того, что происходит. This requires a CommonJS specific feature, так что вам нужно иметь эту систему модулей, которая используется в файле tsconfig.json.

Кроме того, there's an issue when using SystemJS из-за того, что он связывает все с корнем.

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

Answer 2

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

error TS2304: Cannot find name 'module'.

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

declare var module: { 
    id: string; 
}; 

Answer 3

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

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

Answer 4

Поскольку этот вопрос получает много внимания - я выложу ссылку к хорошей статье в ОФИЦИАЛЬНОГО ANGULAR CookBook: Component-relative Paths

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

Answer 5

Просто установите свойство moduleId компонента Component с его значением module.id. Обратитесь к примеру здесь: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html#!#set-the-moduleid-

Пример кода: @Component ({ moduleId: module.id, селектор: 'Войти', templateUrl: "login.component.html" })

Работал для меня.

Answer 6

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

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

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

Надеюсь, что эта помощь.

Answer 7

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

Добавьте узел в свой 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" 
    } 
} 

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

Answer 8

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

@Component ({ селектор: 'Логин-приложение', templateUrl: 'приложение/app.html' })

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

Answer 9

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

declare var __moduleName: string; 

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