基本的にコマンドでアプリケーションの作成を行なっていきます。
新規で空のAngularワークスペースを作成します。
ng new my-workspace --no-create-application
その後、ワークスペース内にアプリケーションとライブラリを生成します。
cd my-workspace
ng generate application my-first-app
ng generate library my-lib
今の時点でファイル構造は以下のようになっています。
my-workspace
├── ...
├── projects
│ ├── my-first-app （生成したアプリケーション）
│ │ ├── ...
│ │ └── src
│ └── my-lib （生成したライブラリ）
│ ├── ...
│ └── src今から、my-first-appからmy-libを参照できるようにします。
生成されたmy-libディレクトリの中のtsconfig.jsonを以下のように修正します。
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
+ "target": "ES2022",
+ "module": "ES2022",
"types": []
},
"exclude": [
"**/*.spec.ts"
]
}
ng build my-lib
npm link ./dist/my-lib
my-first-applicationからmy-libライブラリが参照できるようになりました
import { MyLibService } from 'my-lib';
Workspace and project file structure
Creating libraries – Angular
Schematics for libraries
