Question

我一直在关注anuglar.io上的Angular 2 Tour of Heroes教程和快速入门指南。在教程中，所有文件都直接位于app文件夹下。我已经开始了自己的项目，我想设置文件夹结构，其中我有一个组件文件夹，服务文件夹和指令文件夹，都在项目的app文件夹下。在每个这些文件夹下，我还想让每个单独组件的文件夹包含ts，js，map和与组件相关的html文件。它看起来像这样：

-My_Project
  - app
     - components
        -app
          - app.component.ts
          - app.component.js
          - app.component.map
          - app.component.html
        -logon
          - logon.component.ts
          - logon.component.js
          - logon.component.map
          - logon.component.html
      - services
         -user
          - user.services.ts
          - user.services.js
          - user.services.map

等等。

我理解使用绝对和相对路径并使用../向上移动到父文件夹而../../返回路径中的两个文件夹，但由于某种原因它似乎没有正在使用lite服务器。当我使用Windows IIS 7.5运行应用程序时，这工作正常。当我尝试运行编译器时，会出现以下错误：

app - Copy/app.component.ts(6,32): error TS2307: Cannot find module './logon/logon.component'.

我使用以下内容来引用app.component文件中的logon.component文件。

 import { LogonComponent } from '../logon/logon.component';

此外，我在项目文件夹中的php文件夹中有一些PHP文件。这在Windows IIS 7.5上运行时再次正常工作，但是当我尝试使用lite服务器运行它时，当需要这些php文件时，我会收到404错误。

修改

这是我的tsconfig.json

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

这是我的pacakage.json

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },

如何设置angular 2 app的文件夹结构？

0 个答案: