Bộ chọn “ứng dụng của tôi” không khớp với bất kỳ phần tử nào

Question 1

Vấn đề là khi tôi chạy ứng dụng của mình, nó hoạt động tốt. Nhưng khi tôi làm mới nó, hầu hết thời gian tôi nhận được dưới dạng tin nhắn.

Bộ chọn "ứng dụng của tôi" không khớp với bất kỳ phần tử nào

Nhưng điều kỳ lạ là nhiều khi tôi làm mới ứng dụng của mình, nó cũng hoạt động.

Vì vậy, cuối cùng tôi có một hành vi lạ của ứng dụng của mình và không thể tìm ra điều này.
Đôi khi nó hoạt động đôi khi không ...

Bất kỳ đề nghị, không thể nghĩ ra mã ???

Lưu ý: Tôi chưa có cấu trúc hoặc thành phần phức tạp nhưng thực hiện đơn giản.

Question 2

Điều này xảy ra với tôi vì tôi đang nhập mã của mình vào headthẻ, vì vậy, nó có khả năng đang chạy và cố gắng khởi động lại trước khi DOM sẵn sàng.

Bạn có thể di chuyển tập lệnh xuống cuối bodythẻ hoặc đặt mã bootstrap trong trình xử lý sự kiện:

document.addEventListener("DOMContentLoaded", function(event) {
  bootstrap(AppComponent);
});

hoặc là:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example app</title>
  </head>
  <body>
    <my-app></my-app>
  </body>
  <script src="main.js" charset="utf-8"></script>
</html>

Question 3

Angular 4: Tôi đã phải thay đổi <app-root></app-root>bằng <my-app></my-app>trong tệp index.html

Question 4

Những việc cần làm:

Tới app.module.ts (các mô-đun chính, trong hầu hết các trường hợp này là một cái tên)
Kiểm tra xem bạn có phần " boostrap :" hay không - nếu không, hãy thêm:

bootstrap: [AppComponent] // trong đó AppComponent là thành phần chính của bạn
Kiểm tra xem nó có hoạt động ngay bây giờ hay không, nếu không - hãy truy cập AppComponent và kiểm tra bộ chọn của bạn . Nó phải giống như các thẻ trong nội dung trong index.html

vì vậy index.html nên chứa một cái gì đó như sau:

<body>
  <app-root>Loading...</app-root>
</body>

thay vì <app-root>bạn nên sử dụng bộ chọn từ AppComponent chính

Nếu bạn đang sử dụng ứng dụng góc cạnh của mình trong trang web bên ngoài thì bạn nên cân nhắc sử dụng tiêu đề trì hoãn cho các tệp góc cạnh

Question 5

Tôi gặp vấn đề tương tự khi sử dụng Angular Universal. Nhưng đó là vì tôi đang sử dụng BrowserModuletrong main.node.ts , giải pháp là

  imports: [
    UniversalModule,
    BrowserModule   // <- delete this will solve the issue
  ],

Và kiểm tra tại đây để biết thêm thông tin: https://github.com/angular/universal/issues/542

Question 6

Nếu bạn đang sử dụng mẫu cốt lõi angle2 / asp.net từ đây: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/, bạn có thể thấy thay thế một vài dòng cuối cùng của boot-client.ts với các cách sau sẽ giúp ích (và tránh nhiều lỗi bảng điều khiển trông đáng sợ khi HMR tải lại trang của bạn):

const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    window.onload = () => bootApplication();
    location.reload();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

Question 7

Tôi đang cập nhật ứng dụng Angular 5.2 lên Angular 6.1 và gặp sự cố tương tự. Trong trường hợp này, vấn đề là tệp index.html hoàn toàn không có <body>. Thay vào đó, nó đã được bao gồm trong my-appthành phần.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <base href="https://stackoverflow.com/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<my-app></my-app>
</html>

Điều này từng hoạt động với Angular 5.2 (và các phiên bản trước đó nữa) vì trong index.html đã tạo, các thẻ script được đặt ở cuối. Sau khi nâng cấp lên 6.1, thay vào đó, các thẻ script đã được đặt ở phần đầu của tệp (và tôi cho rằng do đó được thực thi trước khi <my-app></my-app>phần tử gốc thực sự có mặt.

Giải pháp là chuyển <body>sang index.html . (Ban đầu nó được đặt vào thành phần vì ai đó muốn áp dụng các lớp có điều kiện cho phần tử thân với ngClass.)

Question 8

Không phải các câu trả lời ở trên đã giải quyết được vấn đề của tôi. Đây là cách giải quyết cùng một loại lỗi. Bạn không nên có nhiều hơn một thành phần làm thành phần Bootstarp. Vì vậy, mảng Bootstrap chỉ nên có một thành phần. Do nhầm lẫn, tôi đã đặt 4 thành phần trong mảng bootstrap. Tôi đã loại bỏ 4 thành phần đó từ đó và đưa vào mảng entryComponents (như được hiển thị trong mã bên dưới). Điều này đã giúp tôi.

@NgModule({
 declarations: [
AppComponent,
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],
entryComponents:[ 
SanackBarBodyComponent,
SuccessNavBarComponent,
AlertNavBarComponent,
NormalNavBarComponent
],

imports: [
BrowserModule,
BrowserAnimationsModule
],
 providers: [],
 bootstrap: [AppComponent
]
})
export class AppModule { }

Question 9

Có lẽ bạn có thể sử dụng

hoãn lại

Gắn thẻ js-files trong tiêu đề của bạn.

http://www.w3schools.com/TAgs/att_script_defer.asp

Question 10

Điều này đã xảy ra với tôi khi tôi thay đổi thành phần bootstrap từ AppComponentthành phần mới. Khi bạn thay đổi nó, bạn cũng cần phải thay đổi nó trong chính index.html. index.htmlnên chứa thành phần bootstrap.

Ví dụ: nếu bạn thay đổi app-componentthành app-logintrong app.module.tsphần bootstrap thì bạn nên cập nhật index.htmlnhư thế này

<body>
  <app-login></app-login>
</body>

Question 11

Khi tôi tạo thành phần mới cần làm theo các bước dưới đây để giải quyết các vấn đề dưới đây.

Bước-1- Tạo thành phần mới với ng g c lakshya. Bước 2- Trong ứng dụng lakshya folfer được tạo với 4 tệp. Step-3- Index.html cần <app-root></app-root>đến <app-lakshya></app-lakshya> Bước 4- app.Module.ts thay đổi tệp bootstrap: [AppComponent] thành bootstrap: [LakshyaComponent]

để giải quyết lỗi trên.

Question 12

Django + Angular

Tôi có một index.html tùy chỉnh, không phải cái được tạo bởi CLI góc cạnh.

Tôi gặp lỗi này vì tôi đã đặt các tệp tập lệnh được tạo trong <head>phần thay vì ở cuối </body>thẻ đóng (sau các <app-root></app-root>thẻ)

Question 13

Trong app.module.ts của bạn, nếu bạn có ứng dụng của tôi trong bootstrap, hãy nhận xét hoặc xóa nó.

bootstrap: [AppComponent, // my-app]