web-dev-qa-db-fra.com

Éviter les chemins relatifs dans Angular CLI

J'utilise la dernière CLI Angular) et j'ai créé un dossier de composants personnalisés qui regroupe tous les composants.

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

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

C’est bien, mais à mesure que mon application grossit et approfondit le ../ augmente, comment puis-je gérer cela?

Auparavant, pour SystemJS, je configurerais le chemin via system.config.js comme ci-dessous:

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

Comment est-ce que je produis la même chose pour webpack en utilisant Angular CLI?

angulartypescriptwebpackangular-cli
42
Pratik Kelwalkar

Per ce commentaire , vous pouvez ajouter votre source d'application via paths dans tsconfig.json:

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

Ensuite, vous pouvez importer absolument de app/ ou components/ au lieu de relatif au fichier actuel:

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

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

Voir également

64
jonrsharpe

Merci à réponse de jonrsharpe pour m'avoir dirigé dans la bonne direction. Bien que, après avoir ajouté le paths, tel que défini dans la réponse, je n’étais toujours pas en mesure de le faire fonctionner. Pour les autres personnes confrontées au même problème que moi à l'avenir, voici ce que j'ai fait pour résoudre ces problèmes.

J'ai un module partagé et ses services sont utilisés dans plusieurs composants, alors ...

tsconfig.json: 

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

Après cela, VS Code a été capable de résoudre le import mais j'ai toujours l'erreur suivante de webpack pendant la compilation.

Module introuvable: Erreur: impossible à résoudre

Pour résoudre ce problème, je devais ajouter

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

webpack.config.js: 

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

composant.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 dans le dossier services et a exporté tous mes services à partir de là, comme ceci:

index.d.ts: 

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

et maintenant dans tout composant : 

import { FooService, BarService, BazService } from '@shared/services';
15
Syed Ali Taqi

Surtout répondez correctement, mais après avoir lutté en cherchant sur Internet n en essayant de comprendre exactement quel problème et en essayant différentes options de dépannage, j’ai appris à connaître baseUrl et Chemin comment fonctionne toghether

Si vous utilisez baseUrl: "." comme ci-dessous, cela fonctionne dans VScode mais pas pendant la compilation.

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

Selon ma compréhension et mon application de travail et archivé aio angulaire code, je suggère d'utiliser comme baseUrl: "src" comme au dessous de

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

En ayant l'URL de base comme source (répertoire src), le compilateur résout correctement les modules.

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

14
Viraj

Je ne sais pas pourquoi mais lorsque j'ai essayé les autres réponses dans VS2017, j'ai pu compiler Angular sans erreurs, mais je voyais toujours des erreurs dans VS "Impossible de trouver le module ...". la baseUrl à "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 importer:

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

Remarque: Si Visual Studio génère toujours des erreurs, essayez de fermer et de rouvrir le fichier ou de redémarrer Visual Studio pour le faire reconnaître les nouveaux chemins.

5
Andy Braham

Dans Angular 8, pas besoin de *. Le * provoquera une erreur de Cannot find module ajouter ceci à votre fichier tsconfig.json

"baseUrl": "./",
"paths": {
      "@test": [ "src/app/test/" ],
      "@somthing": [ "src/app/something/" ],
      "@name": [ "src/app/name/" ]
    },
0
Martian.titan