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

【问题标题】：Ionic 2 : importing custom components / modules with absolute path failsIonic 2：使用绝对路径导入自定义组件/模块失败
【发布时间】：2017-05-05 10:23:14
【问题描述】：

我正在开发一个具有这些依赖项的 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"
 }

app的结构是这样的：

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';

但是打字稿编译器在 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';

主页组件是这样的：

@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);
    }

}

知道我做错了什么吗？

提前致谢

【问题讨论】：

您是否尝试在tsconfig.json 中设置"baseUrl" 指向您的src 文件夹？
是的，正如@n00dl3 提到的，baseUrl 应该是"./src"；现在它指向您的项目根目录，而不是应用程序根目录 (src/)。 import { HomePage } from 'src/pages/home/home.page'; 应该适用于您当前的设置。
大家好，两种解决方案都不起作用，我的意思是，baseUrl :"。"从 'src/pages/home/home.page' 导入 { HomePage }；也不是 "baseUrl": "./src" with import { HomePage } from 'pages/home/home.page';
发布主页类
@misha130，在主要问题中添加了类。

标签： angular typescript import webpack ionic2

【解决方案1】：

我也有同样的问题。在一些初步测试中，似乎对我有用的是您的tsconfig.json 略有变化：

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

编辑：它适用于浏览器，但 tscompiler 告诉它找不到模块：|

【讨论】：