Относительный путь компонента не работает. Угловой 2

Question

Ниже приведены мои настройки, которые я хотел использовать относительный путь для компонента. Но это дает мне эту ошибку:

404 GET /js/some.component.html

Я использую SystemJS.

some.component.ts

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'relative-path', 
    templateUrl: 'some.component.html', 
    styleUrls: ['some.component.css'], 

}) 

export class SomeRelativeComponent { 
} 

app.component.ts

import { Component } from '@angular/core'; 
import { SomeRelativeComponent } from './some.component'; 
@Component({ 
    selector: 'my-app', 
    template: `<h1>My First Angular 2 App</h1> 
    <relative-path></relative-path> 
    `, 
    directives: [SomeRelativeComponent] 
}) 
export class AppComponent { } 

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "./js" 
    } 
} 

Структура папок:

Очевидно, что нет some.component.html в каталоге /JS. Но как его сохранить, поскольку я добавляю свои компоненты в каталог /app?

Answer 1

В вашем ts.config.json вы указываете outdir, где экспортированы .js.

Либо вам нужно изменить свой outdir, либо вы также можете использовать такой инструмент, как Gulp, который позволяет вам манипулировать вашими файлами в виде потоков. Затем вы можете определить задачи, которые позволяют перемещать, конкатрировать, минимизировать и т. Д. Ваши файлы .css/.js, где вы хотите.

package.json

"devDependencies": { 
    "typescript": "^1.8.10", 
    "typings": "^1.0.4", 
    "gulp": "^3.9.1", 
    "path": "^0.12.7", 
    "gulp-clean": "^0.3.2", 
    "gulp-concat": "^2.6.0", 
    "gulp-typescript": "^2.13.1", 
    "gulp-tsc": "^1.1.5", 
    "run-sequence": "^1.2.2" 
} 

Вы должны добавить зависимости глотком в вашем package.json, и установить его с НПМ: https://www.npmjs.com/package/gulp

Тогда в единственном gulpfile.cs у вас есть в вашем проектного решения, вы можете определять задачи и даже делать предварительную компиляцию с наблюдателями, которые я считаю очень полезными.

Например, так как вы используете машинопись,

gulpfile.js

var destPathComponents = './wwwroot/app/'; 

var tsProject = ts.createProject('tsconfig.json'); 
gulp.task('Components_JS', function() { 
    var tsResult = tsProject.src() // instead of gulp.src(...) 
     .pipe(ts(tsProject)); 

    return tsResult.js.pipe(gulp.dest(destPathComponents)); 
}); 

NB: Я не совсем уверен в этом пункте, но я помню, что с помощью tsconfig.json с таким глотком, вы фактически используете значение outDir файла tsconfig.json вместо пути, установленного в gulpfile.js

Я действительно рекомендую использовать Gulp youg час

Вот еще один пример, чтобы использовать глотку простого CSS:

gulp.task('Components_HTML', function() { 
    return gulp.src([ 
     '*.html' 
    ], { 
     cwd: "Sources/**" 
    }) 
     .pipe(gulp.dest(destPathComponents)); 
}); 

В основном, это определяет Глоток задачу nammed «Components_HTML» и будет принимать все HTML файлы и скопировать их на путь назначения, который является»./wwwroot/app/'в моем случае. Надеюсь, это поможет.