Viteからangularプロジェクトをサクッと始めてみる

            $ yarn create vite
yarn create v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@6.4.1" with binaries:
      - create-vite
      - cva
[##] 2/2│
◇  Project name:
│  blog-parts-lib
│
◇  Select a framework:
│  Angular
│
◇  Select a variant:
│  Angular ↗
 
Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.dev/cli/analytics.

   No
Global setting: disabled
Local setting: No local workspace configuration file.
Effective status: disabled
✔ Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
CREATE blog-parts-lib/README.md (1475 bytes)
CREATE blog-parts-lib/.editorconfig (314 bytes)
CREATE blog-parts-lib/.gitignore (587 bytes)
CREATE blog-parts-lib/angular.json (2796 bytes)
CREATE blog-parts-lib/package.json (1007 bytes)
CREATE blog-parts-lib/tsconfig.json (915 bytes)
CREATE blog-parts-lib/tsconfig.app.json (424 bytes)
CREATE blog-parts-lib/tsconfig.spec.json (434 bytes)
CREATE blog-parts-lib/.vscode/extensions.json (130 bytes)
CREATE blog-parts-lib/.vscode/launch.json (470 bytes)
CREATE blog-parts-lib/.vscode/tasks.json (938 bytes)
CREATE blog-parts-lib/src/main.ts (250 bytes)
CREATE blog-parts-lib/src/index.html (298 bytes)
CREATE blog-parts-lib/src/styles.scss (80 bytes)
CREATE blog-parts-lib/src/app/app.component.scss (0 bytes)
CREATE blog-parts-lib/src/app/app.component.html (19903 bytes)
CREATE blog-parts-lib/src/app/app.component.spec.ts (940 bytes)
CREATE blog-parts-lib/src/app/app.component.ts (291 bytes)
CREATE blog-parts-lib/src/app/app.config.ts (310 bytes)
CREATE blog-parts-lib/src/app/app.routes.ts (77 bytes)
CREATE blog-parts-lib/public/favicon.ico (15086 bytes)
✔ Packages installed successfully.
        

            $ cd blog-parts-lib/
$ yarn ng serve --host 0.0.0.0

Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disable-host-check" if that's the
case.
    
Component HMR has been enabled.
If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the `--no-hmr` command line option.
Please consider reporting any issues you encounter here: https://github.com/angular/angular-cli/issues

Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  90.20 kB | 
main.js             | main          |  47.20 kB | 
styles.css          | styles        |  96 bytes | 

                    | Initial total | 137.50 kB

Application bundle generation complete. [1.878 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  Network: http://172.19.0.2:4200/
  ➜  press h + enter to show help
        

            $ yarn ng generate library blog-parts
yarn run v1.22.22
$ ng generate library blog-parts
CREATE projects/blog-parts/README.md (1452 bytes)
CREATE projects/blog-parts/ng-package.json (159 bytes)
CREATE projects/blog-parts/package.json (214 bytes)
CREATE projects/blog-parts/tsconfig.lib.json (475 bytes)
CREATE projects/blog-parts/tsconfig.lib.prod.json (401 bytes)
CREATE projects/blog-parts/tsconfig.spec.json (434 bytes)
CREATE projects/blog-parts/src/public-api.ts (130 bytes)
CREATE projects/blog-parts/src/lib/blog-parts.component.spec.ts (614 bytes)
CREATE projects/blog-parts/src/lib/blog-parts.component.ts (215 bytes)
CREATE projects/blog-parts/src/lib/blog-parts.service.spec.ts (373 bytes)
CREATE projects/blog-parts/src/lib/blog-parts.service.ts (138 bytes)
UPDATE angular.json (3218 bytes)
UPDATE package.json (735 bytes)
UPDATE tsconfig.json (995 bytes)
✔ Packages installed successfully.
        

            {
  // ....
  "projects": {
    //👇元のプロジェクト
    "blog-parts-lib": {
      "projectType": "application",
      // ...
    },
　　//👇追加したLibraryコンポーネントのプロジェクト
    "blog-parts": {
      "projectType": "library",
      "root": "projects/blog-parts",
      "sourceRoot": "projects/blog-parts/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/blog-parts/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/blog-parts/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/blog-parts/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "tsConfig": "projects/blog-parts/tsconfig.spec.json",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ]
          }
        }
      }
    }
  },
// ...
}
        

            $ yarn ng build blog-parts --configuration development
yarn run v1.22.22
$ ng build blog-parts --configuration development
Building Angular Package

------------------------------------------------------------------------------
Building entry point 'blog-parts'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy full compilation mode.
✔ Generating FESM bundles
✔ Copying assets
✔ Writing package manifest
✔ Built blog-parts

------------------------------------------------------------------------------
Built Angular Package
 - from: /usr/src/app/blog-parts-lib/projects/blog-parts
 - to:   /usr/src/app/blog-parts-lib/dist/blog-parts
------------------------------------------------------------------------------

Build at: 2025-04-20T16:23:42.459Z - Time: 1432ms
        

            $ yarn ng test blog-parts
$ yarn ng lint blog-parts
        

            {
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/blog-parts",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}
        

            $ tree -I node_modules
.
├── README.md
├── angular.json
├── dist
│   └── blog-parts
│       ├── README.md
│       ├── fesm2022
│       │   ├── blog-parts.mjs
│       │   └── blog-parts.mjs.map
│       ├── index.d.ts
│       ├── lib
│       │   ├── blog-parts.component.d.ts
│       │   └── blog-parts.service.d.ts
│       ├── package.json
│       └── public-api.d.ts
├── package.json
├── projects
│   └── blog-parts
│       ├── README.md
│       ├── ng-package.json
│       ├── package.json
│       ├── src
│       │   ├── lib
│       │   └── public-api.ts
│       ├── tsconfig.lib.json
│       └── tsconfig.lib.prod.json
├── public
│   └── favicon.ico
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── index.html
│   ├── main.ts
│   └── styles.scss
├── tsconfig.app.json
├── tsconfig.json
└── yarn.lock
        

            import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
//👇追加でインポート
import { BlogPartsComponent } from '../../dist/blog-parts';

@Component({
    selector: 'app-root',
    imports: [
        RouterOutlet,
        //👇コンポーネントを登録
        BlogPartsComponent
    ],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss'
})
export class AppComponent {
    title = 'blog-parts-lib';
}
        

            <!-- 省略 -->

<router-outlet />

<!-- 👇末尾にLibraryコンポーネントを使う -->
<lib-blog-parts />
        

            import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
//👇追加でインポート
import { BlogPartsComponent } from '@hoge/blog-parts';

@Component({
    selector: 'app-root',
    imports: [
        RouterOutlet,
        //👇コンポーネントを登録
        BlogPartsComponent
    ],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss'
})
export class AppComponent {
    title = 'blog-parts-lib';
}