web-dev-qa-db-ja.com

Angular CLIでの相対パスの回避

最新のAngular CLIを使用しており、すべてのコンポーネントのコレクションであるカスタムコンポーネントフォルダーを作成しました。

たとえば、TextInputComponentにはTextInputConfigurationクラスがあり、src/components/configurations.tsの内部に配置され、src/app/home/addnewuser/add.user.component.tsで使用します。

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

これは問題ありませんが、アプリが大きくなり、../が大きくなるにつれて、これをどのように処理しますか？

以前は、SystemJSの場合、system.config.jsを介したパスを次のように構成していました。

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

Angular CLIを使用してwebpackに同じものを作成するにはどうすればよいですか？

angulartypescriptwebpackangular-cli
42
Pratik Kelwalkar

このコメント ごとに、tsconfig.jsonのpathsでアプリケーションソースを追加できます。

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

次に、現在のファイルに相対的ではなく、app/またはcomponents/から絶対にインポートできます。

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

注：baseUrlは、pathsが指定されている場合に指定する必要があります。

こちらもご覧ください

64
jonrsharpe

jonrsharpeの答えに感謝します。 pathsを追加した後、答えで定義されているように、私はまだそれを機能させることができませんでした。将来、私と同じ問題に直面している他の人のために、問題を解決するために私がしたことは次のとおりです。

私は共有モジュールを持っています、そのサービスは複数のコンポーネントで使用されているので...

tsconfig.json：

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

この後、VS Codeはimportを解決できましたが、コンパイル中にwebpackから次のエラーが発生しました。

モジュールが見つかりません：エラー：解決できません

これを修正するには、追加する必要がありました

  1. baseUrl of tsconfiginwebpack's resolve.modules
  2. paths of tsconfiginwebpack's resolve.alias

webpack.config.js：

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

component.ts：

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

さらにクリーンにするために、servicesフォルダー内にindex.d.tsを追加し、次のようにそこからすべてのサービスをエクスポートしました。

index.d.ts：

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

そして今、任意のコンポーネント内：

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

何よりも正しい答えですが、インターネットnで検索して問題を正確に理解し、さまざまなトラブルシューティングオプションを試してみた後、baseUrlおよびPath

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ディレクトリ）として持つことにより、コンパイラーはモジュールを適切に解決します。

これがこの種の問題の解決に役立つことを願っています。

14
Viraj

理由はわかりませんが、VS2017で他の回答を試みたとき、Angularをエラーなしでコンパイルできましたが、VS "モジュールが見つかりません..."でエラーが表示されていました。 baseUrlを"src"から"."に設定すると、誰もが満足しました。

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"
    ]
  }
}

次にインポートする：

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

注： Visual Studioでエラーが引き続き発生する場合は、ファイルを閉じてから再度開くか、Visual Studioを再起動して新しいパスを認識させてください。

5
Andy Braham

Angular 8では、*は不要です。 *はCannot find moduleのエラーを引き起こしますtsconfig.jsonファイルにこれを追加します

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