Ionic 2：使用绝对路径导入自定义组件/模块失败

Question

我正在开发一个使用以下依赖项的ionic 2应用程序:

"dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "^2.0.0-rc.4",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
"devDependencies": {
    "@ionic/app-scripts": "0.0.47",
    "typescript": "2.0.6",
    "electron": "^1.4.12",
    "@types/jasmine": "^2.5.38",
    "@types/node": "0.0.2",
    "angular-cli": "^1.0.0-beta.21",
    "codelyzer": "^2.0.0-beta.1"
 }

应用程序的结构如下所示：

tsconfig.json
webpack.config.json
src
  app
     app.module.ts
  pages
     home
       home.page.ts
     login
  modules

当我使用相对路径从 app.module.ts 导入模块/组件/类或其他内容时，没有问题：

import { HomePage } from '../pages/home/home.page';

我更喜欢使用绝对路径，但是我找不到使用它们的方法。我尝试设置 TypeScript tsconfig.json 文件如下：

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl": ".",

     "paths": {
      "*": [
        "*",
        "src/*"
      ]
    }
  }

并且像这样导入：

import { HomePage } from 'pages/home/home.page';

但 TypeScript 编译器在 IDE 内给我返回了这个错误（"Cannot find module 'pages/home/home.page'）

当执行 Ionic 应用（使用 ionic serve 命令）时，我会得到以下错误：

Error: Cannot find module "pages/home/home.page"
    at Object.<anonymous> (http://localhost:8100/build/main.js:81745:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:104718:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at http://localhost:8100/build/main.js:66:18
    at http://localhost:8100/build/main.js:69:10

我想要实现的想法是使用从src/开始的绝对路径，然后使用文件夹结构作为命名空间路径：

因此，如果组件的路径为root/src/pages/home/home.page

使用以下方式导入组件：

import { HomePage } from 'pages/home/home.page';
import { LoginPage } from 'pages/login/login.page';

HomePage组件是这样的：

@Component({
  selector: 'home-page', 
  templateUrl: 'home.page.html'  
})

export class HomePage {

    // Array of pages for main menu
    pages: Array<{ component: any, name:string }>;

    constructor(public navCtrl: NavController) {
        // set our app's pages
        this.pages = [
            { component: LoginPage, name: 'Login' },
            { component: SyncPage, name: 'Sync Service' },
            { component: FilesPage, name: 'Selecting a file' },
        ];
    }

    gotoPage(page) {
        this.navCtrl.push(page.component);
    }

}

有没有任何想法我做错了什么？

提前感谢

- rtrujillor

---

你尝试在 tsconfig.json 中将 "baseUrl" 设置为指向你的 src 文件夹了吗？ - n00dl3

发布 HomePage 类 - misha130

尝试从tsconfig中删除路径并添加以下内容： "include": [ "src/**/*.ts" ] - misha130

我的意思是，也许我必须使用Webpack解析器... - rtrujillor

不要忘记将你的Angular版本升级到2.2.1，这只是为了安全起见。 - misha130

Answer 1

我遇到了同样的问题。在一些初步测试中，对于我来说似乎有用的是对你的tsconfig.json进行轻微更改：

"baseUrl": "./src",
"paths": {
  "*": [
    "/src/*"
  ]
}

编辑：它在浏览器中可以运行，但是TS编译器告诉我无法找到模块：|

- andre.almeida