Расширение Google Chrome с использованием Углового CLI, застрявшего на «загрузке»

Question

Я пытаюсь разработать простое расширение Google Chrome с использованием угловой CLI, но оно застряло на Loading.

Если я пытаюсь запустить мое приложение, как правило, используя npm start и открыть его в окне браузера, он отлично работает.

Я также пытаюсь скомпилировать мое приложение с помощью ng build, положить мой manifest.json в моей dist папке, но результат тот же.

мой manifest.json :

{ 
    "manifest_version": 2, 

    "name": "Weather for Chrome", 
    "description": "Weather for Chrome is a simple Google chrome plugin using angular CLI", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "assets/Soleil.png", 
    "default_popup": "index.html" 
    }, 
    "permissions": [ 
    "activeTab", 
    "https://ajax.googleapis.com/" 
    ] 
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppRoutingModule } from './app-routing.module'; 

import { AppComponent } from './app.component'; 
import { WeatherService } from "./_services/weather.service"; 
import { PopupComponent } from "./popup/popup.component"; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    PopupComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AppRoutingModule 
    ], 
    providers: [ 
    WeatherService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.sass'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

app-routing.module.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.sass'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

Я не знаю, как отладить расширение хром. Спасибо за ответы.

Answer 1

Я смог получить эту работу для создания основного углового приложения 2 с помощью @ angular/cli. Проблема, с которой я столкнулась, связана с ошибкой разрешения, то есть Refused to evaluate a string as JavaScript because 'unsafe-eval'.

Я нашел эту ошибку, щелкнув правой кнопкой мыши значок расширения и выбрав Inspect Popup. Затем я выкопал это сообщение с информацией о разрешениях на разрешение в хромовых расширениях: Content Security Policy in Chrome App

Решение здесь работает для меня. Мой manifest.json находится в моей папке /dist, и я загрузил распакованное расширение из этого каталога. Вот мой манифест:

{ 
    "manifest_version": 2, 

    "name": "Extension", 
    "description": "This extension ...", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "index.html" 
    }, 
    "permissions": [ 
    "activeTab", 
    "https://ajax.googleapis.com/" 
    ], 

    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 
}