angular - Angular2 ייבוא נתיב מוחלט או נתיב מותאם אישית (TypeScript 2)

בפרויקט ה-Angular2 שלנו, שמנו את כל קבצי ה-TS של המודלים שלנו בתיקייה מסוימת: /app/common/model/*. אני יכול לקרוא להם ברכיבים שלי עם נתיבים יחסיים, אבל זה מאוד מתיש. אז יש שתי פתרונות, הכי טוב הוא נתיב מותאם אישית: StackOverflow: נתיבים יחסיים לייבוא מודולים ב-SystemJS & ES. אבל ה-IDE שלי לא מצליח למצוא את הנתיב. הנה ה-tsconfig שלי :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "built",
    "baseUrl": ".",
    "paths": {
      "mymodel/*": [
        "app/common/model/*"
      ]
    }
  }
}

ברכיב שלי: import { Address } from 'mymodel/address.model';

IDE: [ts] לא מצליח למצוא מודול... ניסיתי עם או בלי * בנתיב

פתרון שני: Stackoverflow: Angular 2, ייבוא בין תיקיות שונות

IDE והקומפילציה בסדר, עם נתיב מלא ברכיב: import { Address } from 'common/model/address.model';

וה-tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "built",
    "baseUrl": ".",
    "paths": {
      "*": [
        "app/*",
        "node_modules/*"
      ]
    }
  }
}

אבל יש לנו 404 בעת טעינת העמוד עבור כל המודלים. אולי הגדרה בקובץ systemjs?

בשני המקרים, אני חושב שהפרמטר "outdir" הוא הבעיה, ואנחנו מפספסים משהו.

תודה רבה על העזרה!

בברכה,

TypeScript: 2.0.6 Angular: 2.0.0

תשובה #1

לאחר שנאבקתי בחיפוש באינטרנט וניסיתי להבין מה בדיוק הבעיה וניסיתי אפשרויות פתרון שונות, הגעתי להבנה איך baseUrl ו-Path פועלים יחד

הערה: הפתרון הזה מיועד ל-Angular Cli 1.x. לא בטוח לגבי כלי אחר,

אם אתם משתמשים ב-baseUrl:"." כמו למטה זה עובד ב-VScode אבל לא בזמן הקומפילציה

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["src/app/*"]
    }    
}

לפי הבנתי והאפליקציה שלי ועבודתי שנבדקה בקוד angular aio, אני מציע להשתמש כ-baseUrl:""src כמו למטה

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@myproject/*": ["app/*"],
      "testing/*": ["testing/*"]
    }    
}

כאשר יש URL בסיסי כתיקיית מקור (src), המהדר פותר את המודולים כראוי.

אני מקווה שזה יעזור לאנשים לפתור סוג כזה של בעיה.