Vue

Angular Error

錯誤訊息：[ERROR] NG8001: ‘app-to-do’ is not a known element

在app資料夾內app.component.html 新增

1
2
3
4
<main class="main">
 <app-to-do></app-to-do>
</main>
<router-outlet />
錯誤訊息：[ERROR] NG8001: 'app-to-do' is not a known element
處理方式：imports引入 ToDoComponent
在app資料夾內引入app.component.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
+ import { ToDoComponent } from './components/to-do/to-do.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
+    ToDoComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'tode_project';
}

Error: getaddrinfo ENOTFOUND localhost

處理方式

Mac 系統前往

1
/private/etc/
將hosts檔案移動到桌面修改 
1
27.0.0.1 localhost

錯誤訊息 Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

無法綁定到“ngModel”，因為它不是“input”的已知屬性

處理方式
引入 FormsModule 
1
2
3
4
5
6
7
8
9
10
11
import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

錯誤訊息 The pipe ‘async’ could not be found

處理方式
引入 CommonModule 
1
import { CommonModule } from '@angular/common';

錯誤訊息 打包時 [WARNING] Module ‘dayjs’ used by ‘src/app/home/home.component.ts’ is not ESM

處理方式
angular.json 檔案內 allowedCommonJsDependencies(允許 CommonJs 依賴項):["dayjs"] 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 {
   "projects":{
      "vite_project":{  
        "architect":{
          "build":{
            "options":{
+             "allowedCommonJsDependencies": [
+               "dayjs"
+             ],
            }
          }
        }
      }
   }
 }

錯誤訊息 Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
The plugin “angular-sass” was triggered by this import

處理方式

src/style.scss引入方式@import修改為@use

1
@use 'bootstrap/scss/bootstrap';

錯誤訊息 打包時 Did not expect successive traversals.

▲ [WARNING] 9 rules skipped due to selector errors:
.table>>> -> Did not expect successive traversals.
.table-sm>>> -> Did not expect successive traversals.
.table-bordered>>* -> Did not expect successive traversals.
.table-bordered>>> -> Did not expect successive traversals.
.table-borderless>>> -> Did not expect successive traversals.
.form-floating>label -> Did not expect successive traversals.
.form-floating>label -> Did not expect successive traversals.
.btn-group>+.btn -> Did not expect successive traversals.
.btn-group>+.btn -> Did not expect successive traversals.

處理方式
angular.json 檔案內 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
   "projects":{
    "vite_project":{
      "architect":{
        "build":{
+          "options":{
+            "optimization": {
+              "scripts": true,
+              "styles": {
+                "minify": true,
+                "inlineCritical": false
+              },
+              "fonts": true
+            }
          }
        }
      }     
    }
   }
 }

錯誤訊息 打包時 bundle exceeded maximun. Budget 500kb was not met by ….

捆綁包超出最大值。預算 500 kb 未達
如圖

處理方式
angular.json 檔案內 budgets捆綁initial最初 與 anyComponentStyle任何組件樣式 ＝>maximumWarning 最大警告 ＝>maximumError最大誤差 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
   "projects":{
    "vite_project":{
      "architect":{
        "build":{
          "configurations": {
            "production": {
              "budgets":[
                {
                  "type": "initial",
+                  "maximumWarning": "50MB",
+                  "maximumError": "10MB"
                },
                {
                  "type": "anyComponentStyle",
+                  "maximumWarning": "50MB",
+                  "maximumError": "10MB"
                }
              ]
            }
          }          
        }
      }     
    }
   }
 }

錯誤訊息:ERROR NullInjectorError: R3InjectorError(Environment Injector)[_ProductsService -> _ApiService -> _HttpClient -> _HttpClient]:

處理方式如下
src/app/app.config.ts 引入 provideHttpClient 
1
2
3
4
5
6
7
8
9
10
11
12
13
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
+ import {provideHttpClient} from '@angular/common/http';
import { routes } from './app.routes';

 export const appConfig: ApplicationConfig = {
   providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
+    provideHttpClient(),
     provideRouter(routes)
   ]
};

✘ [ERROR] The ‘index/product/:id’ route uses

✘ [ERROR] The ‘index/product/:id’ route uses prerendering and includes parameters, but ‘getPrerenderParams’ is missing. Please define ‘getPrerenderParams’ function for this route in your server routing configuration or specify a different ‘renderMode’.

處理方式
1
2
3
4
5
6
7
8
9
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
+    renderMode: RenderMode.Server
  }
];