Question

我有这个角度2结构主要是通过跟随angular 2 QuickStart guide：

创建的

│   index.html
│   package.json
│   systemjs.config.js
│   tsconfig.json
│   typings.json
│
├───app
│   │   app.component.ts
│   │   app.module.ts
│   │   app.routes.ts
│   │   main.ts
│   │
│   ├───components
│   │       login.component.html
│   │       login.component.ts
│   │       nav-bar.component.html
│   │       nav-bar.component.ts
│   │       project-detail.component.html
│   │       project-detail.component.ts
│   │       project-list.component.html
│   │       project-list.component.ts
│   │
│   ├───models
│   │       person.ts
│   │       project.ts
│   │
│   └───services
│           login.service.ts
│
└───dist

我尝试在tsconfig.ts中为已编译的源设置dist文件夹：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules"
  ]
}

但现在我不确定如何引用组件templateUrl中的html文件。在login.component.ts我有这个：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'login',
    templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

在npm start之后，dist文件夹中缺少html文件。在app.routes.ts我设置为重定向到空路径路径上的登录页面。然后我在浏览器中收到此错误：

zone.js:486 Error: Uncaught (in promise): Failed to load http://localhost:3000/dist/components/login.component.html(…)

如何正确设置outDir？感谢

更新

npm start的{{1}}脚本部分：

package.json

Answer 1

你需要改变这个：

templateUrl: 'login.component.html'

为此：

templateUrl: 'app/components/login.component.html'

如果您使用Grunt移动文件，则可能需要更改网址以获取正确的文件路径。

typescript outdir错过了html文件

1 个答案: