Éviter les chemins relatifs dans la CLI angulaire

Question

J'utilise la dernière Angulaire de la CLI, et j'ai créé un des composants personnalisés dossier qui est une collection de tous les composants.

Par exemple, TextInputComponent a TextInputConfiguration de la classe qui est placé à l'intérieur d' src/components/configurations.ts, et, en src/app/home/addnewuser/add.user.component.ts où je l'utiliser il y a:

import {TextInputConfiguration} from "../../../components/configurations";

C'est bien, mais comme mon application devient plus grand et plus profond à l' ../ augmente, comment dois-je faire?

Auparavant, pour SystemJS, je voudrais configurer le chemin d'accès par le biais system.config.js comme ci-dessous:

System.config({
..
 map : {'ng_custom_widgets':'components' },
 packages : {'ng_custom_widgets':{main:'configurations.ts', defaultExtension: 'ts'},
)};

Comment puis-je produire le même pour webpack Angulaire à l'aide de la CLI?

Answer 1

Par ce commentaire, vous pouvez ajouter de la source de votre application via paths en tsconfig.json:

{
  "compilerOptions": {
    ...,  
    "baseUrl": ".",
    "paths": {
      ...,
      "@app/*": ["app/*"],
      "@components/*": ["components/*"]
    }
  }
}

Vous pouvez ensuite importer absolument d' app/ ou components/ au lieu de par rapport à ce fichier:

import {TextInputConfiguration} from "@components/configurations";

Remarque: baseUrl doit être spécifié si paths est.

Voir aussi

• https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Answer 2

Grâce à jonrsharpe réponse pour me pointer dans la bonne direction. Bien que, après l'ajout de l' paths, tel que défini dans la réponse, je n'étais pas encore capable de le faire fonctionner. Pour quelqu'un d'autre face du même problème que moi à l'avenir, voici ce que j'ai fait pour résoudre les problèmes.

J'ai un module partagé et ses services sont utilisés dans de multiples composants, donc...

tsconfig.json:

{
    "compilerOptions": {
        ...
        "baseUrl": ".", //had to add this too
        "paths": {
            "@shared/*": ["src/app/modules/shared/*"]
        }
    }
}

Après cela, VS Code a été en mesure de résoudre l' import mais j'ai encore d'erreur suivant à partir de webpack , tandis que la compilation.

Module non trouvé: Erreur: ne Peut pas résoudre

Pour corriger cela, j'ai eu à ajouter

1. baseUrl of tsconfig en webpack's resolve.modules
2. paths of tsconfig en webpack's resolve.alias

webpack.config.js:

resolve: {
  extensions: ['*', '.js', '.ts'],
  modules: [
    rootDir,
    path.join(rootDir, 'node_modules')
  ],
  alias: {
    '@shared': 'src/app/modules/shared'
  }
},

composante.ts:

import { FooService } from '@shared/services/foo.service'
import { BarService } from '@shared/services/bar.service'
import { BazService } from '@shared/services/baz.service'

Pour le rendre encore plus propre, j'ai ajouté un index.d.ts à l'intérieur des services de dossier et exporté mes services à partir de là, comme ceci:

index.d.ts:

export * from './foo.service';
export * from './bar.service';
export * from './baz.service';

et maintenant, à l'intérieur de tout composant de:

import { FooService, BarService, BazService } from '@shared/services';

Answer 3

Au-dessus de toutes les réponse correcte, mais après avoir lutté en recherchant sur internet n en essayant de comprendre exactement ce problème et d'essayer différentes option de dépannage, je suis venu à connaître baseUrl et Chemin d'accès comment fonctionne toghether

Si vous utilisez baseUrl:"." comme ci-dessous, il travaille dans VScode mais pas lors de la compilation

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

Selon ma compréhension et de mon travail d'application et vérifié dans angulaire aio code, je vous suggère de l'utiliser comme baseUrl:"src" , comme ci-dessous

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

En ayant pour base l'url de la source(répertoire src), compilateur résout correctement les modules.

J'espère que cela aide les gens à résoudre ce genre de problème.

Answer 4

Je ne sais pas pourquoi mais quand j'ai essayé les autres réponses dans VS2017, j'ai été en mesure de compiler Angulaire sans erreurs, mais j'étais toujours de voir les erreurs dans VS "Impossible de trouver le Module de ...". Lorsque j'ai mis le baseUrl d' "src" de "." tout le monde était heureux.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "baseUrl": "src",                 // Main source directory same level as tsconfig
    "paths": {
      "app/*": [ "app/*" ],           // src/app
      "ui/*": [ "ui/*" ],             // src/ui       
      "services/*": [ "services/*" ], // src/services
      "assests/*": [ "assests/*" ],     // src/assests
      "models/*": [ "models/*" ]      // src/models
    },
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Puis à l'importation:

import { AppMenuComponent } from 'ui/app-menu/app-menu.component';

Remarque: Si Visual Studio est toujours jeter des erreurs, essayez soit de la fermeture et de la réouverture du fichier ou de redémarrer Visual Studio pour obtenir de reconnaître les nouveaux chemins.