Question

我正在开发具有这些依赖关系的离子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 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);
    }

}

知道我做错了什么？

提前致谢

Answer 1

我遇到了同样的问题。在一些初步测试中，对我来说似乎有用的是tsconfig.json：

的细微变化

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

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

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

1 个答案: