组件相对路径不起作用。 Angular 2

我的配置如下我想使用组件的相对路径。但它给了我这个错误：组件相对路径不起作用。 Angular 2

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

文件夹结构：

很明显，在/JS目录中没有some.component.html。但如何将它保存在那里，因为我在/app目录中加上我的组件？

来源

2016-08-26 Prajeet Shrestha

在你的ts.config.json中，你指定了导出.js的outdir。

要么你需要修改你的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一饮而尽依赖和NPM安装：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)); 
});

注：我真的不知道这一点，但我记得，使用tsconfig.json与这样的吞噬你实际上使用tsconfig.json文件的outDir值，而不是您在gulpfile.js中设置的路径

我真的推荐使用Gulp thoug H。

下面是另一个例子用一口带有简单的CSS：

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

基本上，这个定义nammed“Components_HTML”一饮而尽任务，并会采取所有的HTML文件，并将其复制到它的目标路径”。/wwwroot/app /'在我的情况。希望这有助于。

来源

2016-08-26 12:38:18

组件相对路径不起作用。 Angular 2

回答

相关问题